浏览器渲染机制
当咱们请求页面的时候，拿到资源时，浏览器是怎么渲染的呢？这里咱们就来了解一些浏览器渲染的过程。javascript
关键词
- 渲染引擎：包括HTML解释器、CSS解释器、布局layout
- HTML解释器：解析HTML，构建DOM树
- CSS解释器：解析css，构建CSSOM
- 布局layout：对渲染树进行布局绘制
- js引擎：解析JavaScript
认识完关键词以后，咱们来看一下浏览器是怎么将html、css、js文件，渲染到页面上的。css
首先固然是请求html文件，拿到html文件以后，浏览器就能够对文件进行解析处理。html
构建DOM树
拿到html文件以后，HTML解释器会先对拿到的数据进行响应的编码，转成本身想到的格式。前端
而后就开始构建DOM树，为何是树结构呢？前端的同窗应该都很好理解，由于html结构自己就是一个树形结构，因此树是html很好的表现形式。java
咱们来看html的hello world，从锁进格式就能够看出html的DOM树。node
<html lang="en">
<head>
<title>title</title>
</head>
<body>
<div>hello world</div>
</body>
</html>
复制代码
构建CSSOM（CSS规则树）
接着，咱们来看css，CSSOM是由css规则树来处理的。chrome
拿到css数据以后，CSS解释器就开始构建CSSOM。浏览器
由于css的规则是须要给html节点配置的，因此也是一棵树的形状。服务器
html {
color: #ffffff;
}
body {
font-size: 14px;
}
复制代码
渲染树
有来DOM树和CSSOM以后，其实还不是最后须要渲染的东西，由于有些标签实际上是不须要显示的，好比head内容，好比display:none;的内容。布局
因此，这里渲染引擎会将DOM树和CSSOM合成一棵渲染树。
咱们能够看到下面这张图片，这就是渲染树的组合流程。
布局 & 绘制
有了渲染树以后，浏览器要怎么把渲染树画到浏览器上呢？
渲染树实际上是一个树结构，尚未进行实例的结构布局，因此，布局这里就根据渲染树的结构样式，对盒子宽高进行计算，总体结构布局。
布局完成以后，浏览器就要把布局结构绘制到浏览器上。
js文件呢？几乎全部的页面都会有js脚本，否则没有办法与用户/服务器进行交互，下面咱们来看看js脚本。
js引擎
js引擎，看到这个名字，咱们就能够理解，用来执行js脚本用的。目前chrome用的是javascript v8引擎，node使用的也是javascript v8引擎。
为何这里要讲到js引擎呢？由于js脚本有可能会阻塞浏览器的渲染。
阻塞渲染
相信前端同窗写页面的时候都有一个习惯，就是把js放到html文件的最下面。
为何呢？为来不阻塞浏览器渲染。
<!--阻塞-->
<html lang="en">
<head>
<title>Document</title>
<script src="./binnie.js"></script>
</head>
<body>
<div>hello world</div>
</body>
</html>
<!--非阻塞-->
<html lang="en">
<head>
<title>Document</title>
// defer脚本会在页面渲染完成才执行js脚本
<script src="./binnie.js" defer></script>
</head>
<body>
<div>hello world</div>
<script src="./binnie.js"></script>
</body>
</html>
复制代码
咱们知道，js脚本能够操做DOM结构，也能够操做CSS，因此执行js脚本时，浏览器会中止DOM和CSSOM的构建。
构建DOM树过程当中，若是遇到 script 标签，那么DOM构建过程会中止而且等待js脚本执行完毕。
当js脚本操做css时，因为须要操做CSSOM，因此这里会等到CSSOM完成构建完成以后，才继续执行js脚本。
重绘 & 重排
页面第一次渲染的时候，会绘制初始化的页面，当页面结构发生改变时，浏览器也会从新对页面进行绘制&渲染，也就是重绘&重排。
- 重排：当盒子位置&大小发生变更时，会触发重排
- 重绘：当盒子内容发生变化时，会触发重绘
重绘不必定会重排，可是重排必定会触发重绘。
写在最后
了解浏览器的渲染机制，咱们在项目优化过程当中，能够针对其机制，进行项目优化，加快页面渲染过程～