浏览器渲染网页的流程是什么-创新互联

本篇内容主要讲解“浏览器渲染网页的流程是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“浏览器渲染网页的流程是什么”吧!

浏览器渲染网页的流程，浏览器从HTTP服务器获取html文档，到呈现页面给用户，会经过以下几个步骤：

浏览器渲染网页流程

1、解析文档构建DOM树

浏览器的解析内容可以分为三个部分：

HTML/XHTML/SVG：解析这三种文件后，会生成DOM树（DOMTree）

CSS：解析样式表，生成CSS规则树（CSSRuleTree）

JavaScript：解析脚本，通过DOMAPI和CSSOMAPI操作DOMTree和CSSRuleTree，与用户进行交互。

以上三类文件的执行顺序会根据其在文档中的位置及其标签属性的不同而有异同，具体在后文进行讨论。

2、构建渲染树

解析文档完成后，浏览器引擎会将CSSRuleTree附着到DOMTree上，并根据DOMTree和CSSRuleTree构造RenderingTree（渲染树）。此处需要注意：

RenderTree和DOMTree的区别在于，类似Head或display：node之类的东西不会放在渲染树中；

将CSSRuleTree匹配到DOMTree需要解析CSS的选择器，为了提高该过程的性能，DOM树应该尽量小，CSSSelector应该尽量使用id和class，避免过度层叠。

3、布局与绘制渲染树

解析position,overflow,z-index等等属性，计算每一个渲染树节点的位置和大小，此过程被称为reflow。最后调用操作系统的NativeGUIAPI完成绘制（repain）。注意：

渲染树的节点，在Gecko中称为frame，而在webkit中称为renderer；

reflow和repaint是两个不同的概念，其区别会在后文进行探讨。

脚本和样式文件对浏览器渲染网页的影响

浏览器从服务器获取文档并从上到下进行解析，在脚本文件标签不包含defer和async属性的情况下，会按照如下规则执行文档内容：

解析html文档，遇到HTML标签时，构建DOM树

在构建DOM的过程中，如果遇到外联的样式声明或脚本声明，则暂停文档解析，创建新的网络连接，开始下载样式文件和脚本文件

样式文件下载完成后，构建CSSRuleDOM，脚本文件下载完成后，解释并立即执行。

构建DOM的同时，结合CSS规则树完成页面渲染。

如果DOM树先于CSS规则树构建完成，则在CSS规则树构建完成后，页面会发生一次重绘，将新构建的CSS规则应用于渲染树。

脚本文件对文档解析的影响

在这个过程中，脚本文件的下载和执行是与文档解析同步进行的，脚本文件的下载和执行都会阻塞文档的解析，如果控制得不好，在用户体验上就会造成一定程度的影响。

到此，相信大家对“浏览器渲染网页的流程是什么”有了更深的了解，不妨来实际操作一番吧！这里是创新互联建站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！