一.网页的解析过程
当你输入一个域名的时候,浏览器是如何给你呈现出你想要的页面的呢?
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也会单独下载,什么时候下载完什么时候调用