如何减少页面加载时间？

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

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

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

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

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