浏览器渲染原理及流程学习笔记

网友投稿 700 2022-12-02

《浏览器渲染原理及流程》学习笔记

《浏览器渲染原理及流程》学习笔记

浏览器完整地呈现一张页面在我们眼帘之前,都做了啥工作?或者说,其步骤为何?

答案是构建各种树。所谓的树,那就是有兄弟、子孙等节点了。一棵树构造出来,各种元素的先后顺序就都有了。

有哪些树呢?这些树:

DOM Tree:浏览器将HTML解析成树形的数据结构。

CSS Rule Tree:浏览器将CSS解析成树形的数据结构。

Render Tree: DOM和CSSOM合并后生成Render Tree。

layout: 有了Render Tree,浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系,从而去计算出每个节点在屏幕中的位置。

painting: 按照算出来的规则,通过显卡,把内容画到屏幕上。

期间会有一些二月逆流:reflow(回流)和 repaint(重绘)。

注意:上述这个过程是逐步完成的,为了更好的用户体验,渲染引擎将会尽可能早的将内容呈现到屏幕上,并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容,同时,可能还在通过网络-其余内容。

有学习必有输出,《浏览器渲染原理及流程》是高手的学习笔记,然后我现在拜读了他的学习笔记后又写了这篇学习笔记。

参考资料: ​​​浏览器渲染原理及流程​​

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Taurus.MVC 2.2 开源发布:WebAPI 功能增强(请求跨域及Json转换)
下一篇:IE11被识别为较低版本,页面错位问题
相关文章

 发表评论

暂时没有评论,来抢沙发吧~