浏览器渲染网页的流程

浏览器渲染网页的流程（HTML CSS JS）：

1.使用 HTML 建立文档工具模子（DOM）

2.使用 CSS 建立 CSS 工具模子（CSSOM）

3.基于 DOM 和 CSSOM 执行剧本（Scripts）

4.合并 DOM 和 CSSOM 形成渲染树（Render Tree）

5.使用渲染树结构（Layut）所有米素

6.渲染（Paint）所有米素

示意图：

浏览器渲染网页的流程（HTML CSS）：

第一步，用HTML剖析器，剖析HTML米素， 构建一颗DOM树(符号化和树构建)。

第二步，用CSS剖析器，剖析CSS文件和米素上的inline样式，天生页面的样式表。

第三步，将DOM树和样式表，关联起来，构建一颗Render树(这一历程又称为Attachment)。每个DOM节点都有 attach方式，接受样式信息，返回一个render工具(又名renderer)。这些render工具最终会被构建成一颗Render树。

第四步，有了Render树，浏览器最先结构，为每个Render树上的节点确定一个在显示屏上泛起的正确坐标。

第五步，Render树和节点显示坐标都有了，就挪用每个节点 paint方式，把它们绘制出来。

webkit渲染引擎事情流程

问： 资源壅闭问题：CSS加载会不会壅闭DOM树的剖析和渲染？会壅闭剧本执行吗？

问：DOM树的构建是文档加载完成最先的吗？

构建DOM树是一个渐进历程，为到达更好用户体验，渲染引擎会尽快将内容显示在屏幕上。 它不必等到整个HTML文档剖析完毕之后才最先构建render树和结构。

问：Render树是DOM树和CSSOM树构建完毕才最先构建的吗？

这三个历程在现实举行的时刻又不是完全自力，而是会有交织。会造成一边加载，一遍剖析，一遍渲染的事情征象。

问：CSS剖析是从左向右照样从右向左，对DOM树而言呢？

CSS的剖析是从右往左逆向剖析的(从DOM树的下－上剖析比上－下剖析效率高)， 嵌套标签越多，剖析越慢。

思源资源网：分类流动

1.阿里云: 本站现在使用的是阿里云主机，平安/可靠/稳固。点击领取2000米代金券、领会最新阿里云产物的种种优惠流动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各种产物的最新流动，优惠券领取点击进入

3.广告同盟: 整理了现在主流的广告同盟平台，若是你有流量，可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/4418

0 条评论