代码之家 › 专栏 › 技术社区 › Keshav

html页面中包含Javascript文件——浏览器下面会发生什么?

yui performance html javascript

Keshav · 技术社区 · 17 年前

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

我担心的是它可能导致的内存膨胀和性能问题。请就同一问题提出您的建议。。

谢谢, -Keshav

8 回复 | 直到 17 年前

David 17 年前

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

然而,对于像YUI这样精心设计的库,我希望解析时间能最小化。

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

我建议调查一下 Firebug Net panel YSlow extension 获取您网站的具体性能统计数据。

The Disintegrator 17 年前

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

rism 17 年前

如果给定的脚本什么都不做,它就不会影响性能。显然,第一个页面的加载速度很慢,但其余的页面不需要加载所有脚本,因为它们将被缓存。因此,接下来的页面加载速度会更快

提示:

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");

但是找不到源网页:-(

Luke 17 年前

内存消耗:

假设脚本编写良好,那么内存消耗和性能问题应该是微不足道的。一次性包含所有脚本的最大问题将是第一次通过时用户体验的延迟,或者如果你进行了更改,因为他们必须一次性下载所有脚本。我认为你应该只包含每页所需的脚本,而不是一次包含所有脚本。

您可以使用简单的工具(如Windows中的任务管理器/进程)来监控内存/处理器使用情况,或使用插件(如 Firebug for FireFox .

您还可以查看名为 minification 以帮助使脚本文件尽可能小。

依赖关系:

包含脚本的顺序很重要,因为某些脚本可能依赖于其他脚本中的功能。因此,如果一个脚本中的代码试图运行,而它需要另一个尚未下载的脚本中的码,那么它将失败。我的建议是,要真正理解脚本文件中的这些依赖关系,而不是一次下载所有内容,因为这似乎更容易。

austin cheney austin cheney 17 年前

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

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

James Wheare 17 年前

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

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

wtaniguchi 17 年前

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

至于内存膨胀和性能问题。..只要你的JS不泄漏太多(YUI可能不会)内存就不会有太大问题,尽管这会使你的页面加载速度变慢,特别是如果加载在头文件中。

FB FB 17 年前

你可以阅读使用PHP的缓存方法,将多个javascript文件作为一个大的JS文件传递,其中包含你需要的一切。为了获得额外的性能提升,除了发送gzip压缩的文件外,您还可以让浏览器在本地缓存文件(如果浏览器支持使用ob_start(“ob_gzhandler”)等编码方式);).通过使用gzip编码,您可以大大减小您发送的包含所有JS代码的主JS文件的文件大小(因为纯文本压缩得很好)。我最近不得不在自己的网站上做这件事,它对JS和CSS文件都很有吸引力。

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

此外,考虑在谷歌代码上搜索“Minify”。