到底JS文件的引入放置在头部好还是尾部好？

Posted 2020-10-25

统计工具说是将JS文件放置在body标签之后会提升加载速度。不过最终我们还是放置在了head标签里。这里就涉及到一个JS文件位置的选择。到底JS文件的引入放置在头部好还是尾部好？今天小编和大家探讨，JS文件到底该放置最好。

　　具体将引入的JS放在哪里与代码执行的顺序有关。网页文件的读取是从上到下的，如果将javascript文件放置在head当中，会先加载JS文件，之后再继续执行，那么此时，如果JS文件比较大，页面加载就会很慢，导致空白。

　　那么，如果将JavaScript文件放置在底部，如果说，也是比较大型的JS文件的话，是不是就没有问题了呢？

　　其实，如果将JS文件放置在底部的话，可以让JS文件与图片几乎同时下载，使得页面当中的内容能够尽快的下载下来，但是，由于网页基本结构与样式均已经加载完成，那么此时负责交互的JS并没有下载下来，必然也会对用户的体验造成影响。

　　因此，整体来说，如果“交互性优先”，那么我们应当将JS放置在顶部。如果对于交互性要求没那么高的页面，我们将JS放置在底部。

　　阻塞方式加载JS：JavaScript在头部会阻止其他元素并行加载(css,图片,网页)。目前绝大部分的浏览器都是采取阻塞方式(ScriptsBlockDownloads)进行JavaScript文件的加载的。

　　更好的解决方法？

　　一般大型的网站都会采取非阻塞方式加载JavaScript来提高性能（降低页面加载时间），如使用iframe,动态添加script节点等来并行下载JavaScript文件。不过目前用得最多的应该还是动态添加script节点的方法。

　　以上就是小象慢跑在网站建设中所注意到的JavaScript文件放在头部或者尾部的判断准则，如果还有更好的方式，欢迎跟小编一起探讨。