Web性能,内联脚本问题

时间:2010-09-30 10:48:59

标签: javascript performance web-performance

任何人都可以解释网络性能, 加载外部css(组合css) 加载外部javascript(组合javascript) 内联css /内联javascript< - 将阻止其他资源下载,建议将javascript放在外部css之前

当我结合使用javascript时,如何将javascript放在外部css之前?有没有办法不阻止加载图像而不使内联javascript成为外部脚本?

更新
为了澄清,根据网络性能博客/文章,我们应首先加载外部资料,在javascript之前首先加载外部css。然后执行内联样式/ javascript,但内联javascript有一个问题,因为一旦我们在加载外部资源后执行此操作,则会阻止堆栈下面的其他资源(图像)。

在火狐中说你有6个连接(假设),你在外部css /外部javascript上打开2个连接因此你仍然有4个连接,现在你想利用那个打开的连接,但问题是有一个内联javascript会阻止其他资源的下载,只会在内联javascript执行后继续下载。

有人说你需要把内联的javascript放在外部之前,以便利用开放的连接,但问题是你需要一些来自外部的引用,因此无法将它放在外部资源之前。其他博客/文章说我们应该将内联javascript放到外部并将它们组合成一个外部javascript(在后端,缓存),但这似乎是当前网站上的很多工作。

如果你有一个内联的javascript需要/依赖你的外部javascripts,有没有办法利用网络性能?感谢

3 个答案:

答案 0 :(得分:1)

好吧,一般来说你想要:

  • 您的外部javascript将被异步加载(如果可能,在一个文件中,由您的网络服务器缩小和压缩)
  • 您的内联JavaScript是非阻止的

如果您想实现这一目标,您可能需要查看labjs

  

一个通用的按需JavaScript   loader [减少]资源   在页面加载期间阻塞[...]   加载(并执行)所有脚本   和浏览器一样快   允许。您可以轻松指定哪个   脚本有执行顺序   依赖项和LABjs将确保   正确的执行顺序。

我目前正在做一些测试来比较普通页面和多个javascript资源与同一页面,但有labjs,如果你感兴趣我可以让你发布结果。

答案 1 :(得分:1)

使用jquery时,您可以尝试:http://code.google.com/p/rloader/

答案 2 :(得分:0)

例如,当您链接到标题中的javascript文件时,DOM构造和呈现都会延迟,直到脚本文件完成下载并且也会运行。

最有效的方法是将外部JS文件移动到元素的底部,然后添加它直接依赖的内联脚本。

理想情况下,除非您的网站在没有JavaScript的情况下完全无法使用,否则您应该将所有JS资源移动到body元素的末尾,并将样式表保留在任何没有依赖项的关键内联脚本中。

如果您希望将它移到下一级,将它们移动到身体的末尾后,您可以使用外部脚本标记上的defer属性: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer 为了避免任何潜在的依赖性问题,您可以将内联脚本放在从您自己的域加载的单独文件中,并在此外部脚本之后加载它,同时在其上使用相同的延迟属性。

Defer按照它们在源代码中出现的顺序维护JS文件的执行,同时不阻止渲染。