如何减少页面加载时间？

Question

如何减少页面加载时间？

javascripthtmlpage-load-time

6

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

我将完整的JS内容分成27个大小约为1MB的小.js文件。

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

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

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

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

提前致谢。

UPDATE 1：

页面在本地运行，没有涉及WEB服务器。最终，它将在移动浏览器内运行，所以所有问题都出现了，即在移动浏览器中，加载时间非常长，因此希望减少初始加载时间。

- Mahendra Liya

1

你是否一定需要用JS编写这些代码？为什么不将数据存储在数据库中，并在需要时（例如通过AJAX）检索它呢？27 Mb的硬编码数据在JS中是完全错误的。 - nico

这实际上是我将所有静态数据转换为JSON格式，而且我不需要任何网络连接。此外，使用JavaScript可以非常轻松地处理JSON...所以我采用了这种方法... - Mahendra Liya

你说的“我不想要网络连接”是什么意思？这是在本地运行吗？否则，你仍然需要下载27MB的数据（当然，如果它是静态数据，你可以缓存js文件）。 - nico

是的，它在本地运行，没有涉及到 WEB 服务器... 加载时间是在 WebKit 移动浏览器中。 - Mahendra Liya

2

@mahi：哇，这些信息应该在问题中提供的。我已经添加了它。拜托，如果你说“网页”，人们会认为你是在谈论一个网络上的页面，例如，一个网页。而不是一个本地的HTML文件。没有提到这一点只会浪费大家的时间。 - T.J. Crowder

显示剩余2条评论

6个回答

1

你需要将*.js文件再次合并成一个文件。这样可以减少服务器请求的时间成本！

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

此外，您还需要将这些文件放在页面底部，以便在下载js文件到客户端浏览器时允许页面呈现。

另一件有用的事情是长时间缓存文件。这将使您的JavaScript“保存”在客户端Web浏览器缓存中，下次不必重新下载。

最后，我不能百分之百确定这是否有帮助，但请尝试延迟加载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

测试您的网站速度。这将帮助您了解有关网站速度优化的方法 :)

- KodeFor.Me

是的，我已经压缩了所有JavaScript内容（更新了我的问题）。您是否有任何关于延迟加载JavaScript的链接或示例。我对这种方法感到很担心！ - Mahendra Liya

+1 鼓励压缩 JS 文件并建议在页面底部加载 JS 文件。 - Mahendra Liya

对我来说最好的方法是谷歌分析所使用的方法 ;) 我将使用懒加载的源代码编辑上面的代码 - KodeFor.Me

s.parentNode.insertBefore(ga,s); - 从谷歌广告复制粘贴不错 :p 但你可能想要 s.parentNode.insertBefore(sc,s); - ThiefMaster

我只是在上面的评论中说了一句：“xaxaaxaxa”。我喜欢Google Analytics的懒加载。:P 我现在会更正它。 - KodeFor.Me

1

由于设备的内存限制，27MB 的数据量总是会导致速度变慢。

大多数移动设备的 RAM 容量都不大，一旦加载和解析 JSON 数据，它将使用超过 27MB 的内存。

代码压缩可以帮助你，但 gzip 无法做到这一点（因为浏览器仍然需要解压缩）。

如果你只是响应用户操作而呈现 HTML，为什么不创建 HTML 片段而不是 JSON，并在用户单击链接时获取并将其插入到 DOM 中？

- Andy Davies

0

我最终通过创建本机应用程序，而不是使用混合（HTML5）技术来解决了我的问题。也就是说，我将包含实际应用程序数据的27 MB JS文件移动到sqlite文件中，并在我的Android应用程序中直接使用它。

- Mahendra Liya

0

我会在页面加载后使用ajax加载数据。也就是说，在加载页面后，您可以异步请求27MB的数据。这样做还允许您在数据传输时添加加载动画。您可以查看jquery来实现此功能。

- decden

0

作为最佳实践，你应该总是将 JavaScript 加载在 HTML 文件的底部。将 CSS 放在顶部，将 JavaScript 放在底部会极大地帮助。

27MB 太大了。为什么你在 JavaScript 中使用硬编码？你可以使用 AJAX。寻求专家的帮助，也许他能帮你减小 JavaScript 的体积。

- Gorav

1

请勿在您的答案中添加签名，特别是包含指向您网站的链接的签名。SO会自动使用您的昵称和gravatar/identicon签署您的答案。 - ThiefMaster

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- T.J. Crowder · Accepted Answer

(Note: 大部分以下内容是在你告诉我们你在移动浏览器中本地运行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文件的页面末尾添加一个单独的脚本标签。

最理想的情况是尽可能减小大小。如果您可以按需加载资产（使用上述技术或ajax），请使用该方法。更新：如果您运行的是本地文件而不是网页，则基本上无法可靠地进行ajax。但是，您可以通过添加script元素来按需加载所需内容，就像上面所述的那样。

关于你的27个1MB的.js文件：如果你为它们硬编码script标签，那么一个27MB的文件比27个1MB的文件要好得多。减少向服务器发出HTTP请求（理想情况下只有一个.js文件和一个.css文件）是提高页面加载时间的关键方法之一。但在你的情况下，你已经说了各种部分在点击不同的东西之前都不需要，所以你可能最终会得到一个主文件（希望它比27MB小得多），然后再根据需要加载一堆其他的东西（如上所述）。

其他你可以做的事情：

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

另外非常值得一读的内容：加速网站的最佳实践，其中包括上述要点和许多其他要点。