Tip. 为什么我们推荐style放在head中，而script放在body尾?

经常看到网上关于性能优化提到应该把样式^style放到head中，把脚本^script放到body中。

反正也不知道为什么，当别人问起，也就这么回答。

今天让我们看看背后的原理是什么呢?

让我偷一张来自大神小册的图。

• 解析 DOM 和解析 CSSOM 的过程是并行的
• 浏览器处理的是布局渲染树，也就是 DOM 和 CSSOM 结合后的。
• 浏览器在构建 CSSOM 的过程中，不会渲染任何已处理的内容，所以我们需要尽早的加载样式，以便缩短首次渲染时间。
• 当解析到 JS 时，浏览器渲染会把控制权交给 JS 引擎，这个时候会阻塞 DOM 渲染。所以应该尽晚的加载脚本。
• 😳