浏览器的回流、重绘和FOUC

要了解什么是回流和重绘，首先要知道一个页面是如何在浏览器中渲染的。

浏览器渲染页面步骤

1. 浏览器把HTML解析成DOM树；把CSS解析成CSSOM树
2. DOM树和CSSOM树合并成render树
3. 根据renderTree来布局，计算每个节点的大小位置信息
4. 将renderTree各个节点绘制到屏幕上

重绘repaint

当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

重绘不会引起其他dom的重新绘制

回流reflow

当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时（文档流位置改变），浏览器重新渲染部分或全部文档的过程称为回流。

区别

回流一定会引起重绘，重绘不规定触发回流

什么是FOUC（Flash of unstyled content）

fouc简称无样式内容闪烁。浏览器表现就是页面出现无样式dom，或者部分样式dom。突然又恢复正常样式

原因：

1. 使用import方法导入样式表。
2. 将样式表放在页面底部
3. 有几个样式表，放在html结构的不同位置。

css和js都会阻塞渲染

js使用defer和async改变阻塞

defer

有序，不改变script中代码执行顺序。

defer 与相比普通 script，有两点区别：

1. 载入 JavaScript 文件时不阻塞 HTML 的解析
2. 执行阶段被放到 HTML 标签解析完成之后。

async

异步，无序（加载好就执行）

与 defer 的区别在于，如果已经加载好，就会开始执行——无论此刻是 HTML 解析阶段还是 DOMContentLoaded 触发之后；一定在load之前