首先，我们需要了解加载网页时浏览器都做了哪些工作：
1.浏览器从服务器接收到html代码，然后开始解析html；
2.构建DOM树（根据html代码自顶向下进行构建），并且在同时构建渲染树；
3.遇到js文件加载执行，将阻塞DOM树的构建；遇到css文件，将阻塞渲染树的构建。
（script标签中的defer属性：构建DOM树的过程和js文件的加载异步（并行）进行，但是js文件执行需要在DOM树构建完成之后
script标签中的async属性：构建DOM树、渲染树的过程和js文件的加载和执行异步（并行）进行）
为什么说CSS、JS放置的位置会影响前端性能呢？
从以上过程可以知道，当js文件放在head中时，浏览器构建DOM树的进程遇到js文件加载会阻塞，也就是说，浏览器不会加载body中的标签，一旦这个js文件的数量和内容都比较大，就可能会出现页面一片空白，几秒钟后才一下子加载出来的情况。这对用户来说无疑是一种非常糟糕的体验。
关于JS代码和CSS代码的位置，有三个值得注意的点：
1.JS 有可能会修改 DOM。例如可能会有document.write。这意味着，在当前 JS 加载和执行完成前，后续所有资源的下载有可能是没必要的。这是 JS 阻塞后续资源下载的根本原因。
2.JS 的执行有可能依赖最新样式。比如，可能会有var width = $('#id').width()。这意味着，JS 代码在执行前，浏览器必须保证在此 JS 之前的所有 css（无论外链还是内嵌）都已下载和解析完成。这是 CSS 阻塞后续 JS 执行的根本原因。
3.现代浏览器很聪明，会进行 prefetch优化。性能是如此重要，现代浏览器在竞争中，在 UI update 线程之外，还会开启另一个线程，对后续JS和CSS提前下载（注意，仅提前下载，并不执行）。有了prefetch优化，这意味着，在不存在任何阻塞的情况下，理论上JS和CSS的下载时机都非常优先，和位置无关。（更多关于前端性能优化的知识，点击这里）
那应该放在哪里？
1. script标签最好放在body结束标签</body>的前面，这样就不会出现加载网页时出现空白的情况，同时还会降低代码的出错率。
2. css标签应该放在head标签<head></head>之间，因为如果放在body中，那么当DOM树构建完成了，渲染树才构建，那么当渲染树构建完成，浏览器不得不再重新渲染整个页面。如果放在<head></head>之间，浏览器边构建边渲染，效率要高的多。
网友评论