深入浅出浏览器渲染原理 about blog

[nanhupatar]

引申一下事件循环EventLoop

[MiaoJiHui]

不错。深入浅出。

[ljianshu]

不错。深入浅出。

最近觉得不满意，这篇重新改写，敬请期待！

[ljianshu]

不错。深入浅出。

今天重新更新了

[jessiezhudev]

请问一下，比如用户在input框中输入文字，会造成整个页面的回流吗？还是局部的？

[lixin741023]

很详细，棒棒哒！

[pcdegithub]

window.onload事件是发生在哪个阶段,就是页面加载完成在哪个阶段,为什么有时可以访问dom节点但页面空白

[yinmuhuhu]

干货满满

DOM树，规则树构建不是在渲染线程吗，那个图里的规则树构建的时候是怎么做到同时解析script文件的？JS解析难道不在JS引擎线程？

[mark1145588963]

想请教一下浏览器如何可以得知发生了回流事件

[vortesnail]

有没有文章是讲 浏览器 如何解析React写的html，css，js的？全部都写在了一起
难道是加载了哪个组件就加载这个组件的js和css？

[fjh352]

期待写的更深一点

[mofiggHasSugar]

补充说明1，情况2和情况3可以调换下位置

[Linkontoask]

JS文件不只是阻塞DOM的构建，它会导致CSSOM也阻塞DOM的构建。
原本DOM和CSSOM的构建是互不影响，井水不犯河水，但是一旦引入了JavaScript，CSSOM也开始阻塞DOM的构建，只有CSSOM构建完毕后，DOM再恢复DOM构建。
这是什么情况？
这是因为JavaScript不只是可以改DOM，它还可以更改样式，也就是它可以更改CSSOM。因为不完整的CSSOM是无法使用的，如果JavaScript想访问CSSOM并更改它，那么在执行JavaScript时，必须要能拿到完整的CSSOM。所以就导致了一个现象，如果浏览器尚未完成CSSOM的下载和构建，而我们却想在此时运行脚本，那么浏览器将延迟脚本执行和DOM构建，直至其完成CSSOM的下载和构建。也就是说，在这种情况下，浏览器会先下载和构建CSSOM，然后再执行JavaScript，最后在继续构建DOM。

我觉得有点不严谨
比如，js与css两者之间的解析关系是根据不同的引擎决定的。
Firefox 在样式表加载和解析的过程中，会禁止所有脚本。而对于 WebKit 而言，仅当脚本尝试访问的样式属性可能受尚未加载的样式表影响时，它才会禁止该脚本。

[xyqiao]

妙哇

[dwb1994]

赞一个

[iamwjj]

写得非常不错，学习了。

[HogoZhang]

只有 HTML 格式浏览器才能正确解析 这句话是不是不严谨，像pdf，视频，语音甚至json

[ZhuZicai]

请问各位大佬，文章里 “将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点。比如对于 video 标签来说，浏览器会自动将该节点变为图层。” 这句话中的图层是什么意思呢？我在百度上搜了好久，没找到答案，请各位大佬赐教了，谢谢

[752337625]

请问各位大佬，文章里 “将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点。比如对于 video 标签来说，浏览器会自动将该节点变为图层。” 这句话中的图层是什么意思呢？我在百度上搜了好久，没找到答案，请各位大佬赐教了，谢谢
浏览器->F12->设置->Layers ->你可以进行360°操作。（找有轮播的页面查看，你会看到一层一层。这就是浏览器在渲染的时候产生的图层。）图层的实现可以有多种方式大多是靠css设置。

[MX0000]

CSS的Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element（也即是每个Frame）

确定这个Frame不是Node吗？渲染树上的每个元素不是代表着渲染树上的每个节点？怎么会是框架呢？

[DaphnisLi]

这一版感觉只是对浏览器原理的简单介绍。大佬有没有计划再出一版涉及整个渲染流程的文章？

[xiaokunxu]

 您好，您的来信已收到，我会尽快阅读且回复，谢谢！