javascript - 如何减少页面加载时间？

Question

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

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

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

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

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

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

提前致谢。

更新 1:

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

Answer 1

(注意:以下大部分内容是在您懒得告诉我们您在移动浏览器中本地运行 HTML 文件而不使用网络服务器之前编写的。其中大部分内容仍然适用，但有些内容不适用't，但我把它留给了其他实际制作网页的人。)

1) Is there a way wherein we can inject the .js files inside the HTML after the page loads for the first time?

是的，它实际上非常简单(实例:run/edit ):

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

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

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

2) What would be an optimium solution to includes such a large JavaScript content inside a web page?

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

关于您的 27 个 1MB .js 文件:如果您对 script 进行硬编码对他们来说，处理一个 27MB 的文件比处理 27 个 1MB 的文件要好多。尽量减少对服务器的 HTTP 请求(最好最多一个 .js 文件和一个 .css 文件)是缩短页面加载时间的关键方法之一。但是，在您的情况下，您已经说过在单击各种内容之前不需要各个部分，因此您最终可能会得到一个主文件(希望很多小于 27MB )，然后是您需要加载的一堆其他东西(按照上述)。

您可以做的其他事情:

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

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