如何减少页面加载时间

How to reduce the page load time?

本文关键字：加载 时间 何减少      更新时间：2023-09-26

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

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

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

我想知道如何才能减少页面加载时间在这种情况下，js文件是必需的。

1)是否有一种方法，其中我们可以注入。js文件内的HTML页面加载后第一次?(因为JavaScript内容只有在页面上点击链接后才会出现在图片中)

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

提前感谢。

更新1:

页面在本地运行，不涉及WEB服务器。最后，它将在移动浏览器中运行，所以这就是所有问题出现的原因，即移动浏览器的加载时间非常高，所以我们希望减少初始加载时间。

(注意:下面的大部分内容都是在你告诉我们你在没有使用web服务器的情况下在移动浏览器中本地运行HTML文件之前写的。其中大部分仍然适用，有些不适用，但我把它留给了其他真正做网页的人。

1)是否有一种方法，其中我们可以注入。js文件内的HTML页面加载后第一次?

是的，这实际上很容易(实例: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)，那么就这样做吧。Update:如果你运行一个本地文件，而不是一个网页，你基本上不能可靠地使用ajax。但是，当您需要时，您可以通过如上所述添加script元素来按需加载所需的内容。

关于你的27个1MB .js文件:如果你硬编码的script标签，它是多做一个27MB的文件比27个1MB的文件更好。尽量减少对服务器的HTTP请求(理想情况下，在最多一个.js文件和一个。css文件)是改善页面加载时间的关键方法之一。但是，在您的情况下，您已经说过，在单击各种内容之前不需要各种部分，因此您可能最终得到一个主文件(希望是批次小于27MB)，然后根据需要加载一堆其他内容(根据上述内容)。

你可以做的其他事情:

  • 缩小、压缩或"编译"你的。js文件(这意味着你将有单独的"源"answers"生产"文件，因为通常这是一个单向的过程，删除注释等)
  • 确保你的服务器是用gzip压缩服务。js文件(例如，与Apache你会使用mod_deflate);你可以用各种工具测试它的工作

也非常值得一读:加速你的网站的最佳实践，它使上述观点和一大堆更多。

在27MB的情况下，它总是很慢，因为你将会达到设备的内存限制。

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

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

如果你只是渲染HTML响应用户的操作，为什么不创建HTML片段，而不是JSON和获取这些，并插入到DOM当有人点击链接?

您必须再次将*.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>

另一个有用的来源

http://gtmetrix.com/dashboard.html

测试您的网站速度。这将帮助你找到你的方式在速度优化你的网站:)

我会加载数据后页面加载与ajax。这是在加载页面之后，对27MB的数据发出异步请求。这也允许你在数据传输时添加加载动画。您可以看看jquery来实现这一点。

作为最佳实践，您应该始终在底部加载javascript html文件。把css放在上面，js放在下面会很有帮助。

27MB太大。为什么你在js中使用硬代码。您可以使用ajax。向专家寻求帮助，也许他可以最小化你的js

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

相关文章：