JS基础知识——CSS和JS的放置顺序

相关知识点

• css，js的放置位置
• 浏览器的渲染机制
• 白屏现象
• FOUC
• async和defer

正确的放置姿势是，将css文件放在head中，将js文件放在body内，而且最好把js放在body的底部。

下面我们来探讨一下原因。

首先，我们需要知道浏览器的渲染机制。

1. 解析html标签，构建dom tree。
2. 解析css标签，构建cssom tree。
3. 把dom tree和cssom tree组合成渲染树（render tree）。
4. 在渲染树的基础上进行布局，计算每个节点的几何结构。
5. 把每个节点绘制到屏幕上。

为什么需要把css文件放在前面？

如果我们把样式放在了底部的话，对于ie浏览器，某些场景下（新窗口 ，刷新等情况下），页面会出现白屏现象，而不是内容逐步展现，即使是使用@import标签，将css放入link，并且放在头部依然会出现白屏现象。

为什么需要把js文件放在底部？

如果把js文件放在前面会阻挡后面内容的呈现