在文档底部而不是顶部加载 JS 的好处

IT技术 javascript jquery html
2021-01-12 14:47:01

在文档底部而不是顶部加载 JS 的真正好处(如果有的话)是什么?页面加载和 JS 相关功能似乎有一个短暂的延迟。

我正在使用html5boilerplate来开始我的所有模板,但我不确定在底部加载 JS 有多大好处。

它真的有那么大的不同吗,如果有,为什么?

4个回答
  1. 如果您在页面底部包含外部 js 文件,您会将 HTTP 请求的优先级分配给将呈现给客户端的视觉显示,而不是交互或动态逻辑。我相信,如果您不使用内容交付网络向客户端交付图像,那么您一次最多只能处理 2 个 HTTP 请求。您不想将这些请求浪费在逻辑上,因为我们都知道最终用户是多么不耐烦。

  2. 通过在文件末尾加载 js,您可以访问 DOM(大部分时间)而无需调用 document.ready() 函数。您知道,如果页面渲染最终进入您的 javascript 代码,则通常已经加载了必要的页面元素。

还有其他一些原因,但是当将所有 js 放在底部感觉很尴尬时,我会尽量记住这些重要的原因。

由于正在下载引用的脚本,浏览器通常不会并行下载其他文件,从而减慢页面加载速度。

参考:加速您的网站的最佳实践

Google 搜索将返回大量结果,说明您为什么要这样做以及您会看到哪些改进。查看以下链接中的一些:

基本上,这样做的主要原因是您将改善页面的渲染时间。从第一篇文章:

[我]最好将脚本从页面的顶部移动到尽可能低的位置。一个原因是启用渐进式渲染,但另一个原因是实现更大的下载并行化。

取决于js中的内容。如果只希望它在页面加载时“运行”,要么用 jquery's: 包围您的代码,$(function(){})要么将其放在页面底部

但是$当 jQuery 尚未加载时,您不能在页面中间使用- 正如我刚刚发现的那样。
2021-04-01 14:47:01