如何减少javascripts的加载时间？

Question

我的页面上有以下代码：

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

所有脚本将一个接一个地加载是否正确？ 如果有的话，我可以一次制作多个负载吗？

只是为了澄清一下这个问题。 我可以缩小这些并且连接，也许它们已经被模仿和连接:-)我有兴趣找出的是给定这些确切文件的加载过程。 它是一个接一个的文件。 浏览器是否对并行负载做了任何事情。 谢谢

Answer 1

好吧，第一个问题是脚本是一个接一个地加载的。 第二个问题是请求的数量。 请求越多，所需的时间越长。

最简单的方法是将文件服务器端连接成一个.js文件，这样你只剩下一个请求。 这样可以加快速度。

如果你另外缩小脚本，这也会加快速度。

根据您使用服务器端的框架，有各种解决方案可以执行此操作。 例如，对于Node.js，您可以使用Piler在运行时执行此操作。

或者，当然，您始终可以通过构建作业分别手动执行此操作。

PS：当然，您可以使用其他机制来加载脚本文件，例如动态添加脚本标记，这将允许您并行加载。 有关详细信息，请参阅http://blogs.msdn.com/b/kristoffer/archive/2006/12/22/loading-javascript-files-in-parallel.aspx 。

Answer 2

您可以使用async命令（HTML5）：

<script async src="slow.js"></script>

动态脚本加载：

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

HTML5异步脚本

Answer 3

是的，它们将被一个接一个地加载和执行 。 你无法改变这一点。

但是如果你担心表演，你可能会很高兴得知下载过程不同，可能会被浏览器并行化。

您可以通过打开Chrome开发者工具的网络标签在Chrome中看到它。

如果要减少总时间，最好的解决方案是将所有文件连接在一起（如果可能，将其缩小，但重要的操作是连接）。

Answer 4

您可以连接和使用一样的工具它们最小此 。 如果你有一台Mac，那么甚至还有一个很棒的应用程序可以自动执行这个名为CodeKit的过程

Answer 5

这是脚本阻止。 它是一个浏览器功能。 不同的浏览器并行下载不同数量的文件。 脚本将相互加载并执行。 您可以阅读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-阻断/

Answer 6

根据浏览器和正在下载的其他文件的数量（例如图像），您可能会按照您下载的顺序同时下载多个JavaScript文件。

您可以使用Firebug或Chrome的开发人员工具来了解这种情况。 您会注意到您的浏览器将始终加载多个文件，但同时下载的最大数量因浏览器和正在使用的版本而异。

Answer 7

如果你的问题与标题有关（ 如何减少我的javascripts的加载时间？ ），一个好的方法是

• 检查代码，删除并在必要时进行优化
• 连接所有文件（按加载顺序）
• 缩小代码
• 使用gzip压缩服务单个文件
• 利用缓存来避免不必要的请求

Answer 8

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

如果通过减少服务器往返而不更改文件，则连接文件将会缩短加载时间。 您还可以尝试使用缓存清单或使用AJAX懒惰地加载三级脚本。

Answer 9

您可以尝试使用这种技术，以适合您现有代码的方式...

1. Use minify version of JS code
2. Add only one external JS file (copy all content to one)
3. Use cookie less domain

Answer 10

您可以在将文件推送到生产时合并文件以获取单个文件[并最小化它们] ...这样您将保存请求手动检查以及介于两者之间的所有步骤...