什么情况下会阻塞DOM渲染

浏览器 渲染流程

graph LR

浏览器解析html-->dom树

浏览器解析html-->css规则树

css规则树-->render树

dom树-->render树

render树-->布局render树

概念

dom 树

浏览器将HTML解析成树形的数据结构

css 规则 树

浏览器将CSS解析成树形的数据结构。

render树

DOM和CSSOM合并后生成Render Tree。

layout（布局render树）

有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。

painting（绘制render树）

按照算出来的规则，通过显卡，把内容画到屏幕上。

reflow（回流）

DOM结构中的各个元素都有自己的盒子模型，这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow

触发Reflow情况

• 增加，删除，修改Dom节点时会导致Reflow或Repaint
• 移动DOM的位置，或是搞个动画的时候
• Resize窗口的时候，或是滚动的时候
• 修改网页的默认字体时

repaint（重绘）

重绘的定义，当各种盒子的位置，大小以及其他属性，例如改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称为repaint。

阻塞发生的情况

• 遇到script标签加载js的时候会加载js并且执行完毕才开始渲染
• 遇到alert会阻塞
• css加载不会阻塞DOM树的解析，但css加载会阻塞DOM树（render树）的渲染 同时css加载 也会阻塞后面js语句的执行

总结就是

解析遇到link、script、img标签时，浏览器会向服务器发送请求资源。

script的加载或者执行都会阻塞html解析、其他下载线程以及渲染线程。

link加载完css后会解析为CSSOM(层叠样式表对象模型,一棵仅含有样式信息的树)。css的加载和解析不会阻塞html的解析，但会阻塞渲染。

img的加载不会阻塞html的解析，但img加载后并不渲染，它需要等待Render Tree生成完后才和Render Tree一起渲染出来。未下载完的图片需等下载完后才渲染。

解决办法

1.合理的使用缓存

2.考虑 cdn加速

3.减少http请求数

4.注意 引入 外部 css和js文件的为位置