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

​带你了解当你输入一个url后是如何展现出页面的全过程，以及更好理解回流重绘，还有合成图层，defer，async的一些必须知道的概念，让你无压力掌握会被面试问到的概念

一.网页的解析过程

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

1.首先当你输入域名

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

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

4.浏览器解析html文件

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

<img src=“https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/657e3ddd5ca04d649742255279ad2dbe~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3JUH4nyb-1666071431349)(https://juejin.cn/ “点击并拖拽以移动”)]​编” style=“margin: auto” />

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

二.渲染页面的详细过程

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

先上图

<img src=“https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ac124c876ee0412ebce9ed72cf790f2d~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZWXTmQe4-1666071431350)(https://juejin.cn/ “点击并拖拽以移动”)]​编” style=“margin: auto” />

首先先解析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也会单独下载，什么时候下载完什么时候调用

解析，会在dom树构建完成之后，在DOMContentLoaded事件之前先执行defer中的代码

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

​

最后

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

有需要的小伙伴，可以点击下方卡片领取，无偿分享