这是我参与11月更文挑战的第19天，活动详情查看：2021最后一次更文挑战
CSS 和 JS 的位置
我们都听过「CSS 放在前，JS 放在后」，那么这么做的原因是什么呢?
CSS在前
「CSS 放在前」就是把 CSS 放在 head 标签里，原因有:
- 可以尽早下载 CSS 且不阻塞 HTML 解析。
- 如果把 CSS 放在 JS 后面，CSS 就要等 JS 下载并执行后才开始下载，浪费时间。
这里引出另一个问题：如果 CSS 下载用了很长时间，那么 HTML 是先渲染出来，还是先不渲染等 CSS 下载完再渲染呢?
- 如果 HTML 先渲染，那么在 CSS 下载完毕之后，HTML 还得渲染一次。第一次渲染无样式， 第二次渲染有样式。用户会看到页面从杂乱无章的样子突然变成了有样式之后的状态，这种现象被称为 FOUC(Flash of Unstyled Content)。
- 如果 HTML 不渲染等 CSS 下载，那么页面就是空白的。这种现象被称为「白屏」。 FOUC 和白屏必然只能二选一，都会影响用户体验。
如果 css 放在底部，那么需要先渲染 dom，然后加载 css 后会重新渲染之前的 dom，这就需要两次渲染，用户体验较差。其实这个跟上述讲的 CSS 下载花费很长时间的效果是一致的。
现在浏览器为了更好的用户体验，渲染引擎会尝试尽快在屏幕上显示内容，它不会等到所有的 HTMl 元素解析之后在构建和布局 dom 树，所以部分内容将被解析并显示。也就是说浏览器能够渲染不完整的 dom 树和 cssom，尽快的减少白屏的时间。
JS在后
「JS 放在后」就是把 JS 放在 body 标签里最靠后的位置，原因有:
- 方便 JS 操作 DOM 节点，如果 JS 放在前面，就无法获取其下方的 DOM 节点了(因为 HTML 解析被 JS 执行阻塞了。)
- 避免阻塞 HTML 解析。
- 省去监听 dom ready 事件的代码，因为 JS 执行前，大部分资源都已经准备好了。
假如我们将 js 放在 header，js 将阻塞解析 dom，dom 的内容会影响到 dom 树的绘制，导致 dom 绘制延后。所以说我们会将 js 放在后面，以减少 dom 绘制的时间，但是不会减少 DOMContentLoaded 被触发的时间。
最后说一句
如果这篇文章对您有所帮助，或者有所启发的话，帮忙关注一下，您的支持是我坚持写作最大的动力，多谢支持。
