如何减少页面加载时间？

Posted 2021-05-07

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何减少页面加载时间？相关的知识，希望对你有一定的参考价值。

我有一个网页，我在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。最后，它将在移动浏览器中运行，因此所有问题都出现了，即移动浏览器中的加载时间非常高，因此希望减少初始加载时间。

答案

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

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

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

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

另一答案

（注意：下面的大部分内容都是在您打算告诉我们您在移动浏览器中本地运行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，它使得上面的点和更多的一点。

另一答案

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

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

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

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

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

编辑Lazy Load

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