javascript - 如何减少页面加载时间？

我有一个网页，我在本地的 WebKit 移动浏览器上运行（不是在网络服务器上），它大约有 27 MB 的 JavaScript 文件，没错，27 MB 的 JavaScript 文件。这是因为我在 .js 文件中硬编码了自定义的 JSON 对象和数组。

我已经把完整的 JS 内容拆分成了大约 1 MB 的 27 个小 .js 文件。

问题是，当我在头部包含这些 .js 文件时，页面加载时间增加很多。

我想知道在需要使用 JS 文件的情况下，我如何能够减少页面加载时间。

1) 有没有一种方法可以在页面首次加载后将 .js 文件注入到 HTML 中？（因为 JavaScript 内容只有在页面上的链接被点击后才会出现）

2) 在网页中包含如此大量的 JavaScript 内容的最佳解决方案是什么？我已经压缩了所有的 js 文件，以尽可能减小文件大小！

提前谢谢你。

更新 1：

该页面在本地运行，不涉及任何WEB服务器。最后，它会在移动浏览器中运行，所以问题就由此产生，即在移动浏览器中加载时间非常长，因此想要减少初始加载时间。

答案＃1

（注意：下面的大部分内容是在你告诉我们你是在移动浏览器本地运行 HTML 文件而没有使用 Web 服务器之前写的。大部分内容仍然适用，有些则不适用，但我保留它是为了真正制作网页的其他人。）

1) 有没有一种方法可以在页面首次加载后将 .js 文件注入到 HTML 中？

是的，这实际上非常简单（实时示例：运行/编辑）：

var script = document.createElement('script');
script.src = "path/to/the/file.js";
document.body.appendChild(script);

请注意，脚本将异步加载（你不能仅仅假设在 appendChild 调用之后它就已经加载完成）。

但是如果你的目标只是为了在 27MB 文件下载时显示页面，你可以将你的 script 标签放在页面的末尾，就在关闭的 </body> 标签之前。更新：如果你运行的是本地 HTML 文件，而不是网页，我认为这就是你所需要的：在页面末尾放一个脚本标签来加载你的 27MB .js 文件。

2) 在网页中包含如此大量的 JavaScript 内容的最优解决方案是什么？

理想情况下，应尽量减小大小。如果你可以按需加载资源（使用上面提到的技术或 Ajax），则应改为这样做。更新：如果你运行的是本地文件，而不是网页，你基本上无法可靠地使用 Ajax。但你可以通过按照上面的方法添加 script 元素，在需要时按需加载所需内容。

关于你的 27 个 1MB 的 .js 文件：如果你将 script 标签硬编码到它们中，做成一个 27MB 的文件要比 27 个 1MB 的文件 好得多。减少对服务器的 HTTP 请求（理想情况下最多一个 .js 文件和一个 .css 文件）是提高页面加载速度的关键方式之一。然而，在你的情况下，你说过各种部分在点击不同内容之前是不需要的，所以你可能最终会得到一个主文件（希望它能比 27MB 小很多），然后根据需要按需加载其他你要求的内容（如上所述）。

你还可以做其他事情：

压缩、精简或“编译”你的 .js 文件（这意味着你会有单独的“源文件”和“生产文件”，因为通常这是一个单向过程，会移除注释等内容）
确保您的服务器正在通过 gzip 压缩提供 .js 文件（例如，在 Apache 中您可以使用 mod_deflate）；您可以使用各种工具测试其是否正常工作

同样非常值得一读：《加速网站的最佳实践》，它阐述了上述要点以及更多内容。

答案＃2

它有27MB，所以总会很慢，因为你会遇到设备的内存限制。

大多数手机没有很多内存，一旦你加载并解析 JSON，它将使用超过 27MB 的内存

压缩（Minification）会对你有帮助，但 gzip 不会，因为浏览器仍然需要解压它

如果你只是根据用户操作呈现 HTML，为什么不创建 HTML 片段而不是 JSON，并在有人点击链接时获取这些片段并插入到 DOM 中呢？