把JavaScript文件放在文档的头部还是尾部

最新推荐文章于 2022-09-25 14:26:49 发布

Aurevoi

最新推荐文章于 2022-09-25 14:26:49 发布

阅读量1.8k

点赞数 4

文章标签： javascript web开发文档前端面试

本文链接：https://blog.csdn.net/xuemin963169998/article/details/70229341

版权

本文探讨了JavaScript文件在HTML文档中应该放在头部还是尾部的问题。头部引入可能导致页面渲染延迟，而异步加载或放在底部可以避免阻塞。然而，一些情况下如全局处理、依赖于特定元素的脚本仍需在头部加载。最佳实践包括考虑脚本顺序、使用异步加载属性和确保关键脚本最小化。

摘要由CSDN通过智能技术生成

我们今天来聊一聊关于JavaScript文件的引入位置的问题；大家在平时的Web开发中有没有想过这样一个问题，那就是我应该在文档的头部（也就是<head>标签内部里面）引入所需要的JavaScript文件还是应该在尾部（也就是</body>之前）引入所需要的JavaScript文件呢？今天我们就来深入的探究一下这个问题。

首先我们需要了解的一点就是，在浏览器渲染页面之前，它需要通过解析HTML标记然后构建DOM树。在这个过程中，如果解析器遇到了一个脚本(script)，它就会停下来，并且执行这个脚本，然后才会继续解析HTML。如果遇到了一个引用外部资源的脚本(script)，它就必须停下来等待这个脚本资源的下载，而这个行为会导致一个或者多个的网络往返，并且会延迟页面的首次渲染时间。

还有一点是需要我们注意的，那就是外部引入的脚本(script)会阻塞浏览器的并行下载，HTTP/1.1规范表明，浏览器在每个主机下并行下载的组件不超过两个(也就是说，浏览器一次只能够同时从同一个服务器加载两个脚本)；如果你网站的图片是通过多个服务器提供的，那么按道理来说，你的网站可以一次并行下载多张图片。但是，当我们网站在加载脚本的时候；浏览器不会再启动任何其它的下载，即使这些组件来自不同的服务器。

看到这里，也许很多开发者都会想：既然把脚本(script)资源放在head里面是个不好的主意，并且可能会阻塞浏览器渲染页面；那我们是不是要把所有的JavaScript文件都放置到文档的底部呢？这个当然也是太过极端了，因为还是有一些情况需要我们在头部引用脚本的；到底是哪些情况需要我们这么做呢，下面我们来看看一些大公司的做法：