网站开发关于浏览器渲染过程讲解

我们可能都知道浏览器含有一个渲染引擎，用来渲染窗口所展示的内容。默认情况下，渲染引擎可以显示html、xml文档及图片，它也可以借助插件(一种浏览器扩展)显示其他类型数据，例如使用PDF阅读器插件，用于显示PDF格式。但是其具体的渲染原理和流程估计也有很多人都不知道或者不清楚吧。这些天研究了一下浏览器的渲染原理，有了些心得，在这里跟大家分享一下，这里只讨论渲染引擎最主要的用途——显示应用了CSS之后的html及图片。

1.解析HTML，构建DOM树(这里遇到外链，此时会发起请求)

2.解析CSS，生成CSS规则树

3.合并DOM树和CSS规则，生成render树

4.布局render树(Layout/reflow)，负责各元素尺寸、位置的计算

5.绘制render树(paint)，绘制页面像素信息

6.浏览器会将各层的信息发送给GPU，GPU将各层合成(composite)，显示在屏幕上。这一点在网站开发中十分重要。

1.构建DOM树

无论是DOM还是CSSOM，都是要经过 bytes→characters→tokens→nodes→objectmodel这个过程。

DOM树构建过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。

2.构建CSSOM树

上述也提到了CSSOM的构建过程，也是树的结构，在最终计算各个节点的样式时，浏览器都会先从该节点的普遍属性(比如body里设置的全局样式)开始，再去应用该节点的具体属性。还有要注意的是，每个浏览器都有自己默认的样式表，因此很多时候这棵CSSOM树只是对这张默认样式表的部分替换。

3.生成render树

DOM树和CSSOM树合并生成render树

简单描述这个过程：

DOM树从根节点开始遍历可见节点，这里之所以强调了“可见”，是因为如果遇到设置了类似 display:none;的不可见节点，在render过程中是会被跳过的(但 visibility:hidden;opacity:0这种仍旧占据空间的节点不会被跳过render)，保存各个节点的样式信息及其余节点的从属关系。

4.Layout 布局

有了各个节点的样式信息和属性，但不知道各个节点的确切位置和大小，所以要通过布局将样式信息和属性转换为实际可视窗口的相对大小和位置。

5.Paint 绘制

对于网站建设而言，Paint 绘制可以说是会给人一种万事俱备的感觉，最后只要将确定好位置大小的各节点，通过GPU渲染到屏幕的实际像素。

希望以上内容对您有所帮，如果大家对这些内容还有想要了解的可以随时咨询我们，也可以关注创新互联的官方公众号，里边会有更多的相关内容解决您的问题。

当前标题：网站开发关于浏览器渲染过程讲解
本文网址：/news1/315151.html

成都网站建设公司_创新互联，为您提供手机网站建设、移动网站建设、企业网站制作、建站公司、网站设计公司、关键词优化

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联