6

我有一个网页，我在 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。最后，它将在移动浏览器中运行，这就是所有问题出现的原因，即移动浏览器中的加载时间非常高，因此希望减少初始加载时间。

4

6 回答 6

6

（注意：下面的大部分内容是在您费心告诉我们您在移动浏览器中本地运行 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）；您可以测试它是否可以使用各种 工具

也非常值得一读：加快网站速度的最佳实践，这使得上面的观点和一大堆更多。

于 2011-11-10T10:29:05.977 回答
1

您必须再次将 *.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

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

于 2011-11-10T10:32:51.357 回答
1

在 27MB 时，它总是会很慢，因为您将遇到设备的内存限制。

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

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

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

于 2011-11-10T15:44:14.420 回答
0

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

于 2011-11-10T10:32:19.607 回答
0

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

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

于 2011-11-10T10:35:14.857 回答
0

我终于通过为移动设备创建本机应用程序而不是使用混合（HTML5）技术解决了我的这个问题，即我将包含实际应用程序数据的 27 MB JS 文件移动到一个 sqlite 文件并直接使用它我的安卓应用。

于 2012-09-26T04:59:22.230 回答