深入浏览器的渲染原理

1 网页的解析过程

2 浏览器渲染流程

3 回流和重绘解析

4 合成和性能优化

5 defer和async属性

1. 用户在浏览器中输入页面的网址或点击链接，浏览器会解析出网址的主机名和资源路径。

2. 浏览器会向 DNS 服务器发起请求，查询网址的 IP 地址。找到该网址的 IP 地址，然后返回给浏览器。

3. 浏览器会向该 IP 地址的服务器发起 TCP 连接请求，建立连接。

4. 服务器接收到连接请求后，会向浏览器返回一个 index.html页面

5. 在解析http页面的时候发现还需要link和script时就去下载对应的css和js文件，其他类型的文件也是这样子获取。

修改字体颜色是不会触发回流，只会触发重绘，具体看下图。

 

 具体哪些标签或者css能进行合并可以看文章下面ppt

做keyframe动画的时候，hover的标签发生动画并不会使标签所在图层发生改变。当给hover标签的属性里面添加了transition：1s esse。的时候，hover动画会在新的图层里面进行，动画结束之后新图层消失。性能很高。

做hover动画的移动的时候，最好使用transform来做，配合transition可以避免发生回流。如果在hover里面直接使用margin等属性来位移，就算加了transition也一样不会在新的图层里进行，所以会发生回流，性能会很差。

如何判断有没有新图层出现，打开浏览器的开发人员工具。

 

 

在这种情况下，js拿不到标签

为什么遇到script时要先下载js然后在继续进行dom操作：

 如何解决这种问题

 

 对于很多script标签需要引入的时候，由于js没引入完成之前不会渲染东西出来给人看到，所以我们想要让全部dom先显示出来给人看到，js自己在一边下载。做法如下，

（不阻塞dom树继续渲染和显示）

 在defer的js文件里面可以直接操作dom，因为dom树已经完成了，不会出现找不到的情况。

 然后有defer的script标签可以放到head标签里面，

也不要在没有src的script标签使用defer，原因是defer是适用外部脚本。

多个defer的script标签，执行顺序是一定的，从上到下；不会像async的script标签哪个先执行是没有固定的，

 

有async属性的script标签，虽然不会阻塞dom渲染，但是多个async的情况下不一定那个script先加载完成，并且加载完成之后也是立即执行，要是dom树没有渲染完成，那就会出问题。所以使用async要慎重。