logo标签列表

如何减少JavaScript的加载时间？

javascript
3

我在我的页面上有以下代码：

<script src="/Scripts/common/layout/addAccessControls.js"></script>
<script src="/Scripts/common/layout/addAjaxControls.js"></script>
<script src="/Scripts/common/layout/addBodyControls.js"></script>
<script src="/Scripts/common/layout/addContentControls.js"></script>
<script src="/Scripts/common/layout/addThemeControls.js"></script>
<script src="/Scripts/common/layout/hashClick.js"></script>
<script src="/Scripts/common/layout/setSideBar.js"></script>

所有的脚本都会一个接一个地加载，这样正确吗？如果是这样，有没有办法让多个脚本同时加载？

只是为了澄清一下问题。我可以将它们压缩和连接起来，也许它们已经被压缩和连接了:-) 我感兴趣的是给出这些确切文件的加载过程。它是一个接一个地加载吗？浏览器是否做任何并行加载的事情。谢谢。

你可以使用压缩 JavaScript 的工具来紧凑代码，这样可以节省很多字节的数据，并加快下载、解析和执行时间。 - Pragnesh Chauhan
1
我知道我可以使用压缩，但我猜那不是问题的答案 :-( - Samantha J T Star
我还建议尽可能将加载请求放置在页面末尾，这样页面内容可以在这些请求发生之前加载和显示。 - SubjectCurio
10个回答
3
您可以使用 async 命令（HTML5）：
<script async src="slow.js"></script>

动态脚本加载：

var script = document.createElement("script");
script.async = false;
script.src = url;
document.head.appendChild(script);

HTML5 异步脚本

1
谢谢 - 我会研究一下这个。以前从未听说过这个。 - Samantha J T Star
3
首先的问题是脚本一个接一个地加载。 第二个问题是请求数量。请求越多，所需时间越长。
最简单的方法是在服务器端将文件合并成一个单独的.js文件，这样你只剩下一个请求。这将加快速度。
如果你另外压缩脚本，这也将加快速度。
根据你使用的服务器框架，有各种解决方案。例如，对于Node.js，你可以在运行时使用Piler来完成此操作。
当然，你也可以手动完成此操作，或通过构建作业进行。
PS：当然，你还可以使用其他机制来加载脚本文件，例如动态添加脚本标记，这将允许你并行加载。详情请参见http://blogs.msdn.com/b/kristoffer/archive/2006/12/22/loading-javascript-files-in-parallel.aspx。
嗨Golo，我知道有很多像concat和minify这样的东西，但我的问题只涉及并行或串行加载。谢谢。Sam。 - Samantha J T Star
你好Golo。我会检查链接。那可能是我正在寻找的信息。如果我没有清楚地表达问题，对不起。 - Samantha J T Star
Golo - 快问。如果我在浏览器的网络选项卡中查看，我认为我看到脚本同时被下载。当你说“一个接一个地加载”时，这是如何解释的？ - Samantha J T Star
好的，答案可能会有点长，但之前已经讨论过了 ;-). 所以，不要重写它，让我指向 https://dev59.com/El3Ua4cB1Zd3GeqP_lUT ... 我认为这应该能回答你的问题 :-). - Golo Roden
1

是的，它们将会按顺序加载和执行。而且你无法改变这一点。

但如果你关心性能，你可能会很高兴地了解到下载过程是不同的，并且可以由浏览器并行处理。

你可以在Chrome中通过打开Chrome开发者工具的网络选项卡来查看。

如果你想减少总时间，最好的解决方案是将所有文件合并为一个文件（如果可能的话，还要进行缩小文件大小的操作，但最重要的操作是合并）。

你能再解释一下吗？你说“它们将一个接一个地加载”，然后又说“下载过程是不同的”。我在这里假设这些文件没有被缓存到任何地方。 - Samantha J T Star
浏览器可以并行执行几个请求（通常为4个）。正如您可以使用网络面板及其时间轴看到的那样，您将同时进行多个下载。但是脚本将按照您指定的顺序一个一个地加载和执行。 - Denys Séguret
好的，我想我明白你的意思了。所以即使最后一个脚本先下载，它也不会被执行，直到它之前的脚本被执行？是这样吗？谢谢。 - Samantha J T Star
1

你可以使用像this这样的工具来连接和压缩它们。如果你有一台Mac，甚至还有一个很棒的应用程序可以自动化这个过程，叫做CodeKit。

你好Miha。我知道我可以进行代码压缩，但这不是我的问题。谢谢 :-) Sam - Samantha J T Star
这有点是因为这是如何“减少我的JavaScript加载时间”的 - 将信息连接成一个文件（或者如果您在多个站点上共享其中一些，则可以连接多个文件），然后进行缩小 :) - Miha Rekar
1
这是脚本阻塞。它是浏览器的一个功能。不同的浏览器并行下载不同数量的文件。脚本将按顺序加载和执行。您可以阅读Steve Souders和Nicolas Zakas的文章。这可能会对您有所帮助。

http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/ http://www.nczonline.net/blog/2009/06/23/loading-javascript-without-blocking/

0

根据浏览器和下载的其他文件数量（例如图像），您可能会同时下载多个JavaScript文件，具体顺序取决于您放置它们的顺序。

您可以使用Firebug或Chrome的开发人员工具来查看此过程。您会注意到您的浏览器总是会加载多个文件，但同时下载的最大数量因浏览器和版本而异。

这里有些人说是一个接一个地加载，而你说（我相信我看到过）它们有时是并行加载的。你能澄清一下吗？如果它们是并行加载的，最后一个可能在第一个之前完成吗？ - Samantha J T Star
这实际上取决于文件的大小和它们所托管的服务器的连接速度。下载是按照您在网页中放置它们的顺序并行进行的，但您可以让后面的文件在第一个文件之前完成下载。没有办法百分之百地保证文件加载的确切顺序，尽管您可以做出估计。 - SergioMSCosta
以下是一个假设的场景，您按照以下顺序使用3个JS文件：
  • framework.js（300Kb）
  • core.js（10Kb）
  • something_else.js（30Kb）
现在让我们想象一下，您的浏览器同时下载了2个文件。您将同时获得framework.js和core.js进行下载。core.js可能会非常快地完成，您的浏览器将继续下载framework.js并开始下载something_else.js。由于something_else.js也是一个小文件，您的浏览器很有可能在完成framework.js之前就已经完成了它的下载。 - SergioMSCosta
0
如果您的问题与标题相关（如何减少JavaScript的加载时间？），一个好的方法是：
  • 检查代码，删除和优化必要的部分
  • 按照加载顺序连接所有文件
  • 压缩代码
  • 使用gzip压缩单个文件
  • 利用缓存避免不必要的请求
0

根据浏览器的不同，会并行加载不同数量的文件。它们应该并行执行，但为了获得最佳结果，请在页面上附加一个事件处理程序，例如onload。

如果文件不会改变，则通过连接文件来减少服务器往返次数，可以提高加载时间。您还可以尝试使用缓存清单或使用AJAX懒惰地加载第三方脚本。

“attach an event handler to onload” 是什么意思？它会做什么？谢谢。 - Samantha J T Star
当页面加载完成时，document.addEventListener('onload', functionToCallOnLoad)将会触发需要调用的函数。 - Hugo Scott-Slade
0
你可以尝试这些技术，选择适合您现有代码的方法...
1. Use minify version of JS code
2. Add only one external JS file (copy all content to one)
3. Use cookie less domain
0

在将文件推送到生产环境时，您可以合并它们以获得一个单一的文件[并进行最小化处理]... 这样，您将节省请求和检查以及中间的所有步骤...

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接