如何减少页面加载时间？

Question

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

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

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

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

1）有没有办法在第一次加载页面后我们可以在HTML中注入.js文件？ （因为只有在页面上点击链接后，JavaScript内容才会显示在图片中）

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

提前致谢。

更新1：

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

Answer 1

（注意：下面的大部分内容都是在您打算告诉我们您在移动浏览器中本地运行HTML文件而不使用Web服务器之前编写的。其中大部分仍然适用，其中一些不适用，但我'我把它留给其他人实际做网页。）

1）有没有办法在第一次加载页面后我们可以在HTML中注入.js文件？

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

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 ）; 你可以测试它是否正在使用各种 工具

同样非常值得一读： 加速你的网站的最佳实践 ，这使得上面的要点和更多。

Answer 2

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

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

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

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

最后我不是100％肯定是帮助，但尝试懒惰的JavaScript加载。

---

为Lazy Laod编辑

<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

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

Answer 3

在27MB的情况下，由于您将遇到设备的内存限制，因此总是会很慢。

大多数手机都没有大量的内存，一旦你加载并解析JSON，它就会使用更多的27MB

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

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

Answer 4

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

Answer 5

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

Answer 6

作为最佳实践，您应该始终在底部的html文件中加载javascript。 将css置于顶部，底部的js将极大地帮助。

27MB太大了。 你为什么在js中使用硬编码。 你可以使用ajax。 从专家那里获得帮助，可能是他可以最小化你的js