如何减少页面加载时间？答案

【问题标题】：How to reduce the page load time?如何减少页面加载时间？
【发布时间】：2019-02-26 18:30:54
【问题描述】：

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

我已将完整的 JS 包含拆分为 27 个大约 1 MB 的小 .js 文件。

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

我想知道在需要 js 文件的情况下如何减少页面加载时间。

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

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

提前致谢。

更新 1：

页面在本地运行，不涉及 WEB SERVER。最后，它将在移动浏览器中运行，这就是所有问题的产生方式，即移动浏览器中的加载时间非常高，因此希望减少初始加载时间。

【问题讨论】：

你绝对需要用 JS 编写这些代码吗？为什么不将数据存储在数据库中并仅在需要时检索它（例如通过 AJAX）？ JS 中 27 Mb 的硬编码数据是完全错误的。
它实际上是我转换成 JSON 的所有静态数据，我不想要任何网络连接。此外，使用 JavaScript 可以很容易地处理 JSON...所以我采用了这种方法...
“我不想要网络连接”是什么意思？这是在本地运行吗？否则你仍然需要下载 27 Mb 的数据（当然，除非你缓存了 js，我猜如果它是静态数据可能会适用）。
是的，它在本地运行，不涉及 WEB SERVER.. 加载时间需要在 webkit 移动浏览器中
@mahi：哇是问题中应该包含的信息。我已经添加了它。对于大声喊叫，如果您说“网页”，人们会假设您在谈论网页，例如，网络上的页面。不是本地 HTML 文件。不提这只会浪费大家的时间。

标签： javascript html page-load-time

【解决方案1】：

（注意：以下大部分内容是在您懒得告诉我们您在移动浏览器中本地运行 HTML 文件而不使用 Web 服务器之前编写的。其中大部分仍然适用，有些则不适用't, 但我已经把它留给其他真正做网页的人了。）

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

是的，实际上非常简单（现场示例：run / edit）：

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

请注意，脚本将异步加载（您不能只假设它是在 appendChild 调用之后加载的）。

但是，如果您的目标只是在下载 27MB 文件时显示页面，您可以将 script 标签放在页面末尾，就在结束 </body> 标签之前。更新：如果您运行的是本地 HTML 文件，而不是网页，我想这就是您所需要的：end 处的单个脚本标记加载 27MB .js 文件的页面。

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

理想情况下，尽可能减小尺寸。如果您可以按需加载资产（使用上述技术或ajax），请改为这样做。更新：如果您运行的是本地文件，而不是网页，则基本上无法可靠地执行 ajax。但是您可以在需要时按需加载所需内容，方法是按照上述添加 script 元素。

关于 27 个 1MB 的 .js 文件：如果您为它们硬编码 script 标签，则制作一个 27MB 的文件比制作 27 个 1MB 的文件要好得多。最小化对服务器的 HTTP 请求（理想情况下最多一个 .js 文件和一个 .css 文件）是提高页面加载时间的关键方法之一。但是，在您的情况下，您已经说过在单击各种内容之前不需要各个部分，因此您最终可能会得到一个主文件（希望是小于 27MB 的 lot )，然后根据需要加载一些您要求加载的其他内容（如上文所述）。

你可以做的其他事情：

Minify、compress 或 "compile" 您的 .js 文件（这意味着您将拥有单独的“源”和“生产”文件，因为通常这是删除 cmets 等的单向过程）李>
确保您的服务器使用 gzip 压缩提供 .js 文件（例如，对于 Apache，您将使用 mod_deflate）；您可以测试它是否与 various tools 一起使用

也非常值得一读：Best Practices for Speeding Up your Website，这使得上面的观点和一大堆更多。

【讨论】：

您好，感谢您的回复。我的疑问是：我是否必须像您为我的所有 27 个小 js 文件显示的那样创建一个 script 对象，还是有它的快捷方式？
@mahi: ("question", not "doubt") 如果你的目标只是在页面加载后加载它，只需做一个 27MB 的大文件。但是，根据需要按需加载东西会好得多。大概您会将脚本创建内容放在一个函数中，并根据需要使用相关脚本的 URL 调用它。
@mahi：哇是应该出现在问题中的信息（我现在已经把它放在那里了）。您仍然可以按需加载资产（通过script 元素，如上面#1 所示；使用file:// URL 运行时ajax 很棘手），但如果它在本地运行，我希望只有一个script 标签在底部，就在结束 </body> 标记的上方就足够了。
是的，我的错误，可能是我应该添加该页面仅在本地运行，而不是在网络服务器上运行... :-(

【解决方案2】：

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

大多数手机没有很多 RAM，一旦您加载并解析 JSON，它将使用更多的 27MB

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

如果您只是为了响应用户操作而呈现 HTML，为什么不创建 HTML 片段而不是 JSON，并在有人点击链接时获取这些片段并将它们插入到 DOM 中？

【讨论】：

【解决方案3】：

您必须再次将 *.js 文件合并为一个。这将减少花费时间的服务器请求！

使用该工具压缩您的 JavaScript 内容：http://www.refresh-sf.com/yui/ 或 http://closure-compiler.appspot.com/home

您还必须将该文件放在页面页脚，以便在您将 js 文件下载到客户端浏览器时呈现页面。

另一件有帮助的事情是文件的长时间缓存。这将允许您的 JavaScript 被“保存”到客户端 Web 浏览器缓存中，下次重新下载并不重要。

最后我不能 100% 确定这是否有帮助，但请尝试延迟 JavaScript 加载。

为懒惰的老头编辑

<script type="text/javascript">

    (
        function()
        {
            var sc = document.createElement('script');
            sc.type = 'text/javascript';
            sc.async = true;
            sc.src = 'http://www.url-to-your-javascript.file/my-javascript.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(sc,s);
        }
    )();

</script>

另一个有用的来源

http://gtmetrix.com/dashboard.html

测试您的网站速度。这将帮助您找到优化网站速度的方法:)

【讨论】：

是的，我已经压缩了我所有的 JavaScript 内容（更新了我的问题）。你有延迟加载 JavaScript 的链接或示例吗？我很担心这种方法！
+1 用于压缩js文件的链接，并建议在底部加载js文件
对我来说最好的方法是谷歌分析使用的方法；）我将使用延迟加载的源代码编辑上面的代码
s.parentNode.insertBefore(ga,s); - 来自谷歌广告的不错的复制和粘贴：p 但你可能想要s.parentNode.insertBefore(sc,s);
xaxaaxaxa。我只是在上面的评论中这么说。我喜欢谷歌分析延迟加载。 :P 我现在改正它

【解决方案4】：

我会在页面加载后使用 ajax 加载数据。那是在您加载页面之后，您对 27MB 数据发出异步请求。这还允许您最终在数据传输时添加加载动画。你可以看看 jquery 来实现这个。

【讨论】：

【解决方案5】：

作为最佳实践，您应该始终在底部的 html 文件中加载 javascript。把css放在最上面，js放在最下面会有很大帮助。

27MB 太大。你为什么在js中使用硬代码。你可以使用ajax。向专家求助，也许他可以最小化你的js

【讨论】：

请不要在您的答案中添加签名 - 特别是包含指向您网站的链接的答案。 SO 会自动使用您的昵称和您的头像/身份在您的答案上签名。

【解决方案6】：

我终于解决了我的这个问题，方法是为移动设备创建一个本机应用程序，而不是使用混合 (HTML5) 技术，即我将包含实际应用程序数据的 27 MB JS 文件移动到一个 sqlite 文件并使用直接在我的 Android 应用中。

【讨论】：