Question

我认为这可能是一个依赖浏览器的问题 - 假设我有10个Javascript文件和几个HTML页面。假设HTML pageA只需要JS1.js和JS3.js，类似HTML pageB需要JS4.js和JS1.js.我想知道在所有HTML页面中包含所有10个javascript文件会有什么影响？它会直接与浏览器的内存消耗有关吗？

我正面临这个问题，尤其是YUI javascript库。有几个组件，如数据表，事件，容器，日历，dom事件等，它们被包含的顺序似乎也很重要 - 例如dom-event js应该包含在其余部分之前才能工作。因此，为了避免所有这些混淆，我想把所有这些js文件都包含在一个包含在所有HTML页面中的头文件中。

我担心的是它可能导致的内存膨胀和性能问题。请提供相同的建议..

谢谢， -Keshav

Answer 1

外部脚本会延迟显示以下html，直到它们已加载并执行。第一页加载后影响要小得多，因为它们已经被缓存，尽管浏览器偶尔会检查新版本，但仍有延迟。我尝试限制脚本数量，并尽可能将脚本标记移动到页面底部。如果页面已经完全显示，用户将不会注意到脚本加载延迟。

Answer 2

如果给定的脚本什么也不做，它不会影响性能。显然第一页将加载缓慢，但其余部分将不需要加载所有脚本，因为它们将被缓存。因此下一页将加载更快

提示：

1）将脚本加载到页面底部（就在关闭BODY标记之前）。

2）使用非阻塞方式加载脚本。这是我正在使用的那个。

<script type="text/javascript">

function AttachScript(src) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    document.getElementsByTagName("body")[0].appendChild(script);
    script.src = src;
}
AttachScript("/js/jquery.min.js");
AttachScript("/js/ndr.js");
AttachScript("/js/shadowbox.js");
AttachScript("/js/libraries/sizzle/sizzle.js");
AttachScript("/js/languages/shadowbox-es.js");
AttachScript("/js/players/shadowbox-img.js");
AttachScript("/js/adapters/shadowbox-jquery.js");

无法找到源网页： - （

Answer 3

内存消耗：

假设脚本写得很好，那么内存消耗和性能问题应该是名义上的。一次性包含所有脚本的最大问题是第一次用户体验的延迟，或者如果进行更改，因为他们必须一次性下载所有脚本。我认为你应该只包括每页所需的脚本，而不是所有脚本。

您可以使用Windows中的任务管理器/进程等简单工具自行评估影响，以监控内存/处理器使用情况，或插入Firebug for FireFox之类的插件。

您还可以查看名为minification的内容，以帮助您的脚本文件尽可能小。

<强>依赖关系：

包含脚本的顺序很重要，因为某些脚本可能依赖于其他脚本中的功能。因此，如果一个脚本中的代码尝试运行，并且它需要另一个尚未下载的脚本中的代码，那么它将失败。我的建议是真正了解脚本文件中的那些依赖项，而不是一次性下载所有内容，因为它看起来更容易。

Answer 4

使用YUI配置器帮助确定所需的文件包含和顺序，以及如何使用Yahoo! CDN组合服务，将所有YUI文件合并为一个脚本标记。

http://developer.yahoo.com/yui/articles/hosting/

Answer 5

HTML页面的外部资源通常由浏览器缓存。外部资产是HTML中请求的任何内容，例如图像，CSS，JavaScript和其他任何内容。因此，如果您预先加载所有10个脚本文件，则会迫使用户进行一次大量下载。在这一次之后，除非文件的修改时间戳改变，否则用户不需要再次下载脚本。

您的页面只会使用它所需的内容。如果某个特定页面请求js4.js和js5.js，则这些文件中的所有函数将按照它们首先从HTML中请求的顺序加载到解释器中，然后按照每个页面中指定它们的顺序加载到解释器中。那些文件。如果存在任何名称空间冲突，那么最后加载到解释器中的是什么。一旦从浏览器中卸载页面，解释器就会清除这些功能。

为了提高效率，我建议使用服务器端包含进程来读取每个js文件，并将每个文件的内容包含到一个新的单个js文件中。这将减少对服务器的HTTP请求数量，并为HTTP用户和GET请求节省大量带宽资源。此外，将此新脚本文件的请求直接放在HTML的结束正文标记之前。下载脚本会阻止IE中的并行下载，因此您希望在页面中的最低点加载脚本。

Answer 6

您加载到页面中的任何脚本，即使下载和缓存，仍必须在页面的其余部分加载之前进行解析。因此，从这个意义上说，存在内存损失，并且脚本中仍有可能显着延迟渲染。

但是，对于像YUI这样认真设计的库，我希望解析时间最小化。

如果您可以在页面末尾加载所有脚本，那么可以大大提高性能，因为整个页面可以在被javascript执行阻止之前呈现，并且您的网站会感觉更加快捷。

我建议调查Firebug Net panel和YSlow extension以获取您网站的具体效果统计数据。

Answer 7

Scriptaculous实现了一种处理js依赖关系的好方法。猜猜你可以检查一下并“重新实施”它。 ; d

至于内存膨胀和性能问题......只要你的JS没有泄漏很多（YUI可能没有）内存不会有太大的问题，虽然它会让你的页面加载速度变慢，特别是如果加载在标题中。

Answer 8

您可以使用PHP阅读缓存方法，将多个javascript文件作为一个包含您需要的所有内容的大型JS文件传递。为了获得额外的性能提升，您可以使浏览器在本地缓存文件，除了发送gzip（如果浏览器支持使用类似ob_start（“ob_gzhandler”）;）的编码。通过使用gzip编码，您可以严重减少您发送的主JS文件的文件大小，其中包括所有JS代码（因为纯文本压缩得很好）。我最近不得不在我自己的网站上这样做，它就像JS和CSS文件的魅力一样。

http://www.ejeliot.com/blog/72

请注意，按照该教程的说明，您的JS文件只会被发送一次，客户端计算机上的浏览器将保存本地副本，这也将提高之后每次访问的性能。

此外，请考虑使用谷歌搜索“Minify”，这应该托管在Google Code上。

包含在html页面中的Javascript文件 - 浏览器下面会发生什么？

8 个答案: