HTML面试题五：什么是渲染阻塞，如何处理渲染阻塞

一. 什么会造成渲染阻塞？

1. 等待所有CSS下载并解析完——阻塞渲染

• CSSOM是完备的，这种完备是指所有的CSS（内联、内部和外部）都已经下载完，并解析完，只有CSSOM和DOM的解析完全结束，浏览器才会进入下一步的渲染

2. 中途Script脚本——阻塞解析

• 当浏览器遇到一个 script 标签时，DOM 构建将暂停，直至脚本完成执行，然后继续构建DOM
• 如果JS脚本还操作了CSSOM，而正好这个CSSOM还没有下载和构建，浏览器甚至会延迟脚本执行和构建DOM，直至完成其CSSOM的下载和构建 ，因此每次去执行JavaScript脚本都会严重地阻塞DOM树的构建

二. 如何处理渲染阻塞

处理script 标签的位置很重要。实际使用时，可以遵循下面两个原则：

• CSS尽量放在head部分：我认为CSS的处理是从异步线程来处理，浏览器的渲染时从上到下的，当然是越早异步处理CSS越好，如果将CSS放在底部，那么会优先渲染DOM，而浏览器为了更好的用户体验，渲染引擎会尝试尽快在屏幕上显示内容，也就是说渲染引擎会边解析、边渲染、边布局显示，已尽快减少白屏时间，所以随着CSS规则树的构建，还需要对之前渲染树重新渲染，可能会导致回流和页面跳动。；
• JS放在body标签结束之前&