Google推荐的JavaScript延迟加载方案：确保页面优先渲染

JavaScript延迟加载的挑战与常规方案局限

在Web开发中，JavaScript的延迟加载往往是一个令人头疼的问题，开发者经常需要花费大量精力去寻找合适的解决方案。

常见的建议包括使用defer或async属性，或者简单地将JavaScript代码放置在HTML文档的底部。

然而，上述常规方法并不能彻底解决在页面完全加载后再加载外部JS文件的需求，且仍可能触发Google页面速度测试工具发出的“延迟加载JavaScript”警告。因此，本文介绍一种源自Google官方帮助页面的推荐解决方案。

Google推荐的JavaScript延迟加载实施指南

如何实施JavaScript延迟加载

以下是Google推荐的代码实现。这段代码应当放置在</body>标签之前，即HTML文件的底部。为了清晰起见，我将外部JS文件名的部分进行了突出显示。

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

这段代码的核心逻辑是：等待整个文档加载完毕后，再动态加载名为“defer.js”的外部文件。

具体操作步骤如下

1. 复制上述提供的代码片段。

2. 将代码粘贴到HTML文件的</body>标签之前，确保其位于HTML文件的底部。

3. 将代码中的“defer.js”替换为你实际的外部JS文件名。

4. 确保文件路径正确。例如，如果仅指定“defer.js”，则该JS文件必须与HTML文件位于同一目录下。

适用场景分析与非关键资源处理策略

适用场景与限制

该方案仅在文档完全加载后才会执行指定外部JS文件的加载。因此，任何页面正常渲染所依赖的关键JavaScript代码都不应使用此方法。建议将JavaScript代码分为两类：一类是页面加载初期必须立即执行的代码；另一类是页面加载完成后执行的操作代码（如绑定click事件等）。后者应放入外部文件，并通过上述方式引入。

例如，我在页面中使用此方法延迟加载了Google Analytics、Viglink（用于盈利的链接服务）以及底部的Google+徽章（社交媒体组件）。对于我来说，这些内容在初始页面加载阶段并非必需，如果强制用户等待这些无关紧要的文件加载完毕，会严重影响体验。如果你的页面中也有类似性质的文件，是否愿意让用户在查看内容前等待这些脚本加载呢？

为何传统方法无法实现真正的延迟加载

为何不采用其他方法

直接插入脚本、将脚本置于页面底部或使用defer/async属性，均无法实现“先加载页面主体，后加载JS”的效果，且这些方法在不同浏览器间的表现存在不一致性。

延迟加载对页面速度与SEO的重要性

延迟加载的重要性

其重要性体现在Google将页面速度作为排名因素之一，同时用户也期望页面能快速加载。此外，这对移动搜索引擎优化（SEO）至关重要。Google依据页面初始加载时间来评估速度，这意味着必须尽快触发页面的load事件。初始加载时间是Google评价网页质量的关键指标，同时也关乎用户的等待体验。Google积极倡导并推荐将非关键资源（JS、CSS、图片等）从关键渲染路径中移除，按重要性排序加载。这种做法值得投入，因为它既能取悦用户，又能提升搜索引擎评分。

延迟加载示例与测试对比

用法示例

我已创建一个演示页面，展示该代码的具体应用。

供测试的示例文件

为了说明效果，我制作了几个示例页面供测试。每个页面执行相同的操作：一个普通HTML页面包含一个等待2秒后输出“hello world”的JavaScript脚本。你可以测试这些文件，会发现只有一种方法（即本文推荐的延迟加载法）的加载时间不包含那2秒的等待时间。

直接插入脚本的页面 – 点击这里

使用defer属性的外部脚本页面 – 点击这里 使用本文推荐代码的页面 – 点击这里

核心原则：优先交付用户内容

关键点总结

首要任务是以最快的速度向用户交付内容。我们往往忽视了JavaScript代码的处理方式，但用户不应为了无关紧要的脚本而被迫等待核心内容。无论页脚功能多么炫酷，都没有理由让一个可能根本不滚动到页脚的用户去加载那些让页脚变酷的JavaScript文件。

以上即为本文的全部内容，希望对大家有所帮助。