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

Answer 3

是的，他们将一个接一个地加载并执行。你无法改变它。

但如果您对演出感到担忧，您可能会很高兴地了解到下载过程不同，并且可能会被浏览器并行化。

您可以通过打开the network tab of the Chrome Developer Tools在Chrome中看到它。

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

Answer 4

您可以使用this等工具连接和缩小它们。如果你有一台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-blocking/

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

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

如何减少javascripts的加载时间？

10 个答案: