CSS 和 JS 都会造成渲染阻塞
FOUC 或者 白屏 两种渲染结果只能二选一 取决于使用chrome or IE浏览器读取css的渲染方式
CSS有可能影响它之前的元素的渲染,
JS不会影响它之前的元素的渲染。
CSS尽量放在最前面,避免FOUC情况出现,防止页面闪烁,虽然会阻塞页面;
JS尽量放在最后面,一是可以利用用户交互时间充分下载页面,一是放在前面会阻塞页面渲染;
浏览器解析、渲染顺序
- 解析:浏览器理解下载到的文件里的字符串
- 渲染:将节点描绘在屏幕上(DOM树里)
结论
- CSS 和 JS 都会阻塞页面渲染,但不会阻塞解析
- CSS 有时候会阻塞它前面标签的渲染,有时候不会
- Chrome 要等所有 CSS 下载完了,才开始渲染页面(除了动态加载的 CSS)
- IE 看到标签就渲染,不等后面的 CSS 下载
- JS 不会阻塞它前面的标签的渲染
技巧
- 使用 Chrome 开发者工具模拟低网速
- 将文件变大,使得下载速度变长,便于观察实验结果