【web前端】带你深入了解浏览器的渲染原理

一.网页的解析过程

当你输入一个域名的时候，浏览器是如何给你呈现出你想要的页面的呢？

1.首先当你输入域名

2.后浏览器会通过DNS解析（damain name system）将域名转化成对应的ip地址

3.找到相对应的ip地址后，服务器会给你返回相对应的index.html文件

4.浏览器解析html文件

这个时候你就会问怎么不把js文件和css一起下载，我们来看一张图

 这张图就体现的很明显了，当浏览器解析html文件的时候，如果遇到link，src这种时，就会去服务器吧对应的css文件和js文件下载下来，不过css的下载不会阻塞html 的解析，但是js会，我们后面在解释。

二.渲染页面的详细过程

那么找到相对应的资源后是怎么展示到页面上的呢

先上图

 首先先解析html文件，当遇到css文件时候会将它单独下载解析，所以是不会阻塞html的解析的，此时解析html会形成一个DOM树，当遇到js文件时会进行下载，此时html解析会停止，等待js下载操作后修改dom树上的节点，css也会形成一个CSSOM树，htmlcss两者都完成后会形成渲染树（也就是图中的Render Tree），渲染树中不会有影响元素位置，大小的样式，例如magin，width等，此时会进行Layout布局，将各个节点加上位置，大小等信息排版好，再经过painting绘制，最后Display展示。

dom树和Render Tree树的节点可能会不同，例如元素样式中有display：none；

css解析不会影响Dom树的形成，但是会影响Render Tree的形成

布局其实是将每个frame转化为屏幕上实际的像素点

三.回流与重绘

上面图理解后回流和重绘就很容易理解了

回流又称之为为重排，我们知道第一次又layout布局，之后我们可能会对DOM进行操作，例如有个按钮点击删除一个节点，此时就就会对节点的位置，大小重新计算进行布局，也就叫做回流。

引起回流的一些情况

1.DOM树结构改变，删除或者添加节点

2.改变了布局，width，padding，height，font-size像span元素的大小是会根据字体大小改变的

3.窗口尺寸

4.调用了getComputedStyle方法

重绘：第一次painting叫做绘制，后面的painting又叫做重绘，很明显当你改变某些像颜色的样式时不会改变节点位置尺寸，不会引起回流，只会渲染过一次。也就是重绘（painting过程）

布局显然是在painting之前，所以回流一定会引起重绘，重绘不会影响回流

此时我们就需要尽量去避免回流

1.样式最好一次性修改

2.尽量不要频繁的操作DOM

3.尽量避免通过getComputedStyle获取尺寸位置等信息

4.对某些元素尽量使用position的fixed（会形成一个新的合成图层）

四.composite合成

1.绘制的过程中可以将布局后的元素绘制到多个合成图层中（浏览器的优化手段）

2.标准流中的元素是在一个合成图层中

3.一些特殊属性会创建出一个新的合成图层，可以通过cpu渲染加速（因为每个合成图层都是单独渲染的）

3D transfroms，video canvas iframe ，opacity动画，fixed，will-change 都会有新的合成图层

五.Script和页面解析的关系

碰到js代码html会停止解析，此时可以添加两个属性

defer   js会单独加载，不会阻塞html解析，会在dom树构建完成之后，在DOMContentLoaded事件之前先执行defer中的代码

async  js也会单独下载，什么时候下载完什么时候调用