浏览器的渲染引擎

在面试的时候或许经常被问到：从你的浏览器输入一个网址到网页

内容完全被展示的这段时间内，都发生了什么事情？

（1）开启一个单独的线程，判断输入是否合法，然后判断是否为HTTP协议请求，

如果是进行下一步；

（2）浏览器的浏览器引擎将对此URL进行分析加载；

（3）通过DNS解析域名获取该网站地址对应的IP地址，查询完成后连同浏览器

Cookie、userAgent等信息向网站目的IP发出get请求；

（4）三次握手，http协议会话；

（5）ngnix根据URL做服务器分发，返回静态HTML；

（6）浏览器接收返回信息，判断本地是否有；

（7）浏览器的渲染引擎开始解析构建DOM，下载MIME类型文件；

（8）渲染引擎根据CSS样式将DOM树扩充为渲染树，然后进行重排、重绘；

（9）执行js脚本，重新进入ngnix分发，返回数据；

（10）增删页面元素，可能重排或重绘，加载结束。

浏览器的结构组成

浏览器一般由七个模块组成：

用户界面：地址栏、书签目录等；

浏览器引擎：传送指令，读写本地数据，是浏览器中各个部分之间相互通信的

核心；

渲染引擎：解析DOM和CSS，也称排版引擎，我们常说的浏览器内核主要指的

就是渲染引擎；

网络：完成网络调用或资源下载的模块；

UI后端：用来绘制窗口控件，如输入框、按钮等；

JS解析器：解释执行js模块，如V8引擎；

数据存储：浏览器在硬盘保存cookie、localStorage等各种数据。

浏览器渲染引擎

浏览器渲染引擎是由各大浏览器厂商依照W3C标准自行实现的，也被称之为浏览器内核。

目前，市面上主流浏览器内核有5类：

Trident（IE内核）

Gecko（Firefox内核），开源内核；

Presto（Opera前内核）Opera12.17

以后就用Google Chrome的Blink内核

Webkit（Safari内核也是Chrome内核

原型），大量使用在移动端浏览器上；

Blink（由Google和Opera Software

开发），webkit的一个分支，较多移

动端采用。

渲染引擎工作流程：

解析HTML构建DOM树->构建渲染树->

渲染树布局->渲染树绘制

CSS规则的匹配：从右向左

相关性能优化

（1）减少JS加载对DOM渲染的影响：将js放在HTML文档后加载或异步加载；

（2）避免重排，减少重绘：CSS动画减少使用width、margin、padding等CSS

布局对规则，可以使用transform代替；

（3）减少使用关系型样式表的写法：直接使用唯一的类名可最大幅度提升

渲染效率；

（4）减少DOM层级：减少无意义的DOM可以减少渲染引擎的匹配计算量。