任何人都可以解释网络性能, 加载外部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,有没有办法利用网络性能?感谢
答案 0 :(得分:1)
好吧,一般来说你想要:
如果您想实现这一目标,您可能需要查看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文件的执行,同时不阻止渲染。