浏览器渲染页面流程

浏览器步骤：

1. 解析HTML文本，构建dom tree， 同时进行第3步。
2. 歇息CSS样式表，构建CSSOM tree
3. 根据DOM tree和 CSSOM tree 构建Render tree
4. 根据Render tree来进行布局处理（Layout）
5. 将页面元素进行绘制（Painting）

• 浏览器从服务端拿到html文件后，首先开始解析html文件，构建DOM tree，并且同时构建Render Tree；
• 遇到js文件的话，阻塞DOM tree的构建；因为js可能会改变dom和css，因此浏览器会先解析script，避免浪费。
• 遇到css文件的话，先加载css然后构建CSSOM Tree，与此同时构建DOM Tree， 但是 将阻塞Render Tree的构建。

如果将css文件放在底部，render tree在之前就已经构建完了，因此用户可能会看到无样式的页面，或者闪屏。

谈谈阻塞：

css： css被视为阻塞渲染的资源，也很好理解，要不然怎么构建render tree， 怎么进行布局处理呀~~ 因此浏览器会等待CSSOM tree构建完毕，当浏览器遇到<link>标签时候，会有限处理这些CSS资源。直至CSSOM构建完毕。

js： script标签会阻塞html解析，因为js可能会改变dom和css，因此浏览器会先解析script，避免浪费。 要想避免阻塞的话，可使用defer 和 async。

谈谈Repaint和Reflow

Repaint： 发生在屏幕的一部分要重新画，比如背景颜色，布局没有改变！，浏览器只需要走第五步。

Reflow： 布局发生了改变！浏览器需要重新从Layout这一步开始，因为Render tree已经变了。多走一步，显然更加耗费性能啦~~

所以呢重点关注会引起Reflow的操作：

• 当你增加、删除、修改DOM结点时，会导致Reflow或Repaint
• 当你移动DOM的位置，或是搞个动画的时候。
• 当你修改CSS样式的时候。
• 当你Resize窗口的时候（移动端没有这个问题），或是滚动的时候。
• 注：display:none会触发reflow，而visibility:hidden只会触发repaint，因为没有发现位置变化。