浅析前端页面渲染机制

作为一个前端开辟，最常见的运行情况应当是浏览器吧，为了更好的经由过程浏览器把优良的产品带给用户，也为了更好的成长本身的前端职业之路，有须要懂得大年夜我们在浏览器地址栏输入网址到看到页面这时代浏览器是若何进行工作的,进而懂得若何更好的优化实践，本篇重要环绕这两点展开阐述。前端页面衬着机制可谓是老生常谈，但又很有须要再谈的话题，于是照样决定写一篇，等于对常识的回想总结，又能与大年夜家分享，何乐而不为。网上相干类型的文┞仿也很多，有兴趣的可以多进修一下。

浏览器

在介绍浏览器工作流程之前，先懂得一下主流浏览器的基本构造，本文所介绍的浏览器重要为开源的Chrome，FireFox及部分开源的Safari，这也是今朝市场占比最高的几大年夜浏览器，以本人博客网站为例，可以大年夜致看出各浏览器应用比例：

各浏览器应用比例

浏览器基本构造

浏览器基本构造重要包含如下7部分：

1.用户界面(User Interface):用户所看到及与之交互的功能组件，如地址栏，返回，进步按钮等;

2.浏览器引擎(Browser engine):负责控制和治理下一级的衬着引擎;

3.浏览器加载HTML文件及文件内包含的外部引用文件及图片，多媒体等资本。

3.衬着引擎(Rendering engine):负责解析用户请求的内容(如HTML或XML，衬着引擎会解析HTML或XML，以及相干CSS，然后返回解析后的内容);

4.收集(Networking):负粜ウ理收集相干的事务，如HTTP请求等;

6.JavaScript说冥器(JavaScript interpreter):负责解析和履行JavaScript代码;

7.数据存储(Data storage):负责持久存储诸如cookie懈弛存等应用数据。

浏览器基本构造

各大年夜重要浏览器应用内核也是有差其余，大年夜致可以分为以下几类：

Trident内核： IE
Webkit内核：Chrome,Safari
Gecko内核：FireFox

收集

当用户拜访页面时，浏览器须要获取用户请求内容，这个过程重要涉及浏览器收集模块：

1.用户在地址栏输入域名，如baidu.com，DNS(Domain Name System，域名解析体系)办事器根据输入的域名查找对应IP，然后向该IP地址提议请求;

DNS

DNS预解析(DNS prefetch)

浏览器DNS解析大年夜多时刻较快，且会缓存常用域名的解析值，然则如不雅网站涉及多域名，在对每一个域名拜访时都须要先解析出IP地址，而我们欲望在跳转或者请求其他域名资本时尽量快，则可以开启域名预解析，浏览器会在余暇时提前解析声明须要预解析的域名，如：

多过程

我们平日说JavaScript履行是单过程的，然则浏览器收集部分平日是有几个平行过程同时开启，然则也会有

限制，一般为2-6个。

衬着引擎及关键衬着路径(Critical Rendering Path)

衬着引擎所做的事是将请求内容展示给我们，默认支撑HTML,XML和图片类型，对于其他诸如PDF等类型的内容则须要安装响应插件，但浏览器的┞饭示工作流程根本是一样的。

经由过程收集模块加载到HTML文件后衬着引擎衬着流程如下，这也平日被称作关键衬着路径(Critical Rendering Path)：

1.构建DOM树(DOM tree)：大年夜上到下解析HTML文档生成DOM节点树(DOM tree)，也叫内容树(content tree);

Webkit衬着引擎流程如下图：

2.构建CSSOM(CSS Object Model)树：加载解析样式生成CSSOM树;

3.履行JavaScript：加载并履行JavaScript代码(包含内联代码或外联JavaScript文件);

4.构建衬着树(render tree)：根据DOM树和CSSOM树,生成衬着树(render tree);衬着树：按次序展示在屏幕上的一系列矩形，这些矩形带有字体，色彩和尺寸等视觉属性。

5.构造(layout)：根据衬着树将节点树的每一个节点构造在屏幕上的┞俘确地位;

6.绘制(painting)：遍历衬着树绘制所有节点，为每一个节当善?对应的样式，这一过程是经由过程UI后端模块完成;

为了更友爱的用户体验，浏览器会尽可能快的┞饭现内容，而不会比及文档所有内容达到才开端解析和构建/构造衬着树，而是每次处理一部分，并展如今屏幕上，这也是为什愦我们经常可以看到页面加载的时刻内容是大年夜上到下一点一点展示的。

流程图

Webkit衬着引擎流程

Gecko衬着引擎流程如下图：

Gecko衬着引擎流程

如上图，Webkit浏览器和Gecko浏览器衬着流程大年夜致雷同,不合的是：

1.Webkit浏览器中的衬着树(render tree)，在Gecko浏览器中对应的则是框架树(frame tree),衬着对象(render object)对应的是框架(frame);

3.Gecko中HTML和DOM树中心多了一层内容池(Content sink),可以懂得成生成DOM元素的工厂。

1/5 1 2 3 4 5 下一页尾页

　　推荐阅读

　　在终端中优雅地编写Python

媒介最早我也执偾在办事器上编辑文件的时刻用用vim来改改法度榜样，并没有把vim当做本身的主力编辑器。然则有时的一次机会须要改一个奇葩的输入文件的格局，用了下Vim的宏录制，尝到了甜头，于是后面就开端用Vim来写>>>详细阅读

本文标题：浅析前端页面渲染机制

地址：http://www.17bianji.com/lsqh/34753.html

1/2 1