Question

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

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

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

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

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

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

提前致谢。

更新1：

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

Answer 1

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

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

是的，实际上非常简单（实例：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）在网页中包含如此大的JavaScript内容的优化解决方案是什么？

理想情况下，尽可能减小尺寸。如果您可以根据需要加载资产（使用上述技术或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，这使得上面的点和更多的点。

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

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

Answer 5

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

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

Answer 6

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

如何减少页面加载时间？

6 个答案:

编辑Lazy Laod

另一个有用的来源