浏览器渲染过程

浏览器渲染过程（Chrome）

1.浏览器获得HTML构建DOM Tree, 获得CSS构建CSSOM （当遇到JS／script时，DOM构建过程会被吊起，需要等待JS执行完毕，当JS全部执行完后，触发DOMContentLoaded)
2.通过DOM Tree和CSSOM构建Render Tree
3.计算layout (size, position)
4.绘制
5.渲染层合并(transform opacity只触发这个阶段因此速度快)

为了更好的用户体验渲染引擎会尽快的展示出页面内容，它不会等到所有HTML都被解析再来构建渲染树, 当main thread(而不是Speculative)遇到Script标签时(只要遇到并不需要等待其网络返回和执行)Chrome会执行绘制和渲染层合并操作

重新渲染，就需要重新生成布局和重新绘制。前者叫做"重排"或回流（reflow），后者叫做"重绘"（repaint）

当没有script标签时，如果link在\body前，firefox会重绘制导致FOUC，而Chrome会等待css加载完毕（和放在head中行为相同）

标签位置
最佳实践是将link标签置于script标签前（否则有FOUC）。script最佳实践是放在/body前（放在head会导致白屏现象）
引用：网页性能管理详解