Javascript 如何减少页面加载时间？

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

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

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

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

1） 有没有一种方法可以在页面首次加载后将.js文件插入HTML中？（因为JavaScript内容只有在点击页面上的链接后才会进入图片）

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

提前谢谢

更新1:

该页面在本地运行，不涉及WEB服务器。最后，它将在移动浏览器中运行，因此所有问题都是这样产生的，即移动浏览器中的加载时间非常长，因此希望减少初始加载时间。

（注意：以下大部分内容都是在您费心告诉我们您在移动浏览器中本地运行HTML文件而不使用web服务器之前编写的。其中大部分内容仍然适用，有些不适用，但我将其留给了其他实际使用web页的人。）

1） 有没有一种方法可以在页面首次加载后将.js文件插入HTML中

是的，其实很简单（例如：/）：

请注意，脚本将异步加载（不能假定它是在

appendChild

调用之后加载的）

但是，如果您的目标只是在27MB文件下载时显示页面，您可以将

脚本
标记放在页面末尾，就在关闭
标记之前更新：如果您运行的是本地HTML文件，而不是网页，我想这就是您所需要的：在页面末尾加载27MB.js文件的单个脚本标记

2） 在网页中包含如此大的JavaScript内容的最佳解决方案是什么

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

关于您的27 1MB.js文件：如果您为它们硬编码
脚本
标记，那么做一个27MB文件比27 1MB文件要好得多。最小化对服务器的HTTP请求（理想情况下最多一个.js文件和一个.css文件）是提高页面加载时间的关键方法之一。不过，在您的例子中，您已经说过，在单击各种内容之前，不需要各个部分，因此您可能会得到一个主文件（希望是小于27MB的文件），然后根据需要加载一堆其他内容（如上所述）

您可以做的其他事情：


，或您的.js文件（这意味着您将有单独的“源”文件和“生产”文件，因为这通常是一个删除注释等的单向过程）
确保您的服务器使用gzip压缩（例如，使用Apache）提供.js文件；你可以测试它的工作原理

也非常值得一读：，这使得上面的要点和一大堆内容更加丰富。
我会在使用ajax加载页面之后加载数据。也就是说，在加载页面后，会对27MB的数据发出异步请求。这还允许您在传输数据时最终添加加载动画。您可以看看jquery来实现这一点。
您必须再次将*.js文件合并为一个文件。这将减少服务器请求的时间开销

使用该工具压缩JavaScript内容：或者

您还必须将这些文件放在页面页脚，以便在将js文件下载到客户端浏览器时呈现页面

另一个有用的方法是文件的长时间缓存。这将允许您的JavaScript“保存”到客户端web浏览器缓存中，下次重新下载并不重要

最后，我不是100%确定这是否有帮助，但请尝试惰性JavaScript加载


为Laod编辑

(
函数（）
{
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）；
}
)();


另一个有用的来源

测试您的网站速度。这将帮助您找到网站速度优化的方法：）
作为最佳实践，您应该始终在html文件中加载javascript。将css放在顶部，将js放在底部将大有帮助

27MB太大了。为什么在js中使用硬代码。您可以使用ajax。寻求专家的帮助，也许他可以将你的js最小化为27MB，但速度总是很慢，因为你会遇到设备上的内存限制

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

缩小会对您有所帮助，但gzip不会，因为浏览器仍需对其进行解压缩）

如果您只是为了响应用户操作而呈现HTML，为什么不创建HTML片段而不是JSON，然后获取这些片段，并在出现错误时将其插入DOM中
var script = document.createElement('script');
script.src = "path/to/the/file.js";
document.body.appendChild(script);

<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>