80%前端程序员还不知道？【HTML渲染顺序】简单解析

CSS 和 JS 都会造成渲染阻塞

FOUC 或者 白屏 两种渲染结果只能二选一 取决于使用chrome or IE浏览器读取css的渲染方式

CSS有可能影响它之前的元素的渲染，

JS不会影响它之前的元素的渲染。

CSS尽量放在最前面，避免FOUC情况出现，防止页面闪烁，虽然会阻塞页面；

JS尽量放在最后面，一是可以利用用户交互时间充分下载页面，一是放在前面会阻塞页面渲染；

浏览器解析、渲染顺序

1. 解析：浏览器理解下载到的文件里的字符串
2. 渲染：将节点描绘在屏幕上（DOM树里）

结论

1. CSS 和 JS 都会阻塞页面渲染，但不会阻塞解析
2. CSS 有时候会阻塞它前面标签的渲染，有时候不会
   1. Chrome 要等所有 CSS 下载完了，才开始渲染页面（除了动态加载的 CSS）
   2. IE 看到标签就渲染，不等后面的 CSS 下载
3. JS 不会阻塞它前面的标签的渲染

技巧

1. 使用 Chrome 开发者工具模拟低网速
2. 将文件变大，使得下载速度变长，便于观察实验结果