行内脚本布置
简述:行内脚本不会产生额外的HTTP请求,但会阻塞页面上资源的并行下载,还会阻塞逐步渲染。
1 行内脚本阻塞并行下载
当行内脚本执行时,将阻塞其他所有资源的下载,直到行内脚本执行结束时。除了阻塞并行下载,行内脚本还阻塞渲染。
解决方案:(1)把行内脚本移至页面上所有资源的后面来实现并行下载和逐步渲染。
(2)适用异步回调启动javascript的执行(让浏览器异步执行行内脚本,使其有可能实现并行下载和逐步渲染)。
例:
function code(){
var start = Number( new Date());
while ( (start + 3000) > Number(new Date()) ){};
}
setTimeout(code, 0);
如果我们想异步执行函数而不阻塞浏览器渲染,更好的做法是适用onload事件来触发代码运行:
function code(){
var start = Number( new Date());
while ( (start + 3000) > Number(new Date()) ){};
}
window.onload = code;
如果行内脚本执行时间很短,那么适用延迟值为0毫秒的setTimeout是一个兼顾快速渲染和javascrip快速执行的好方案。如果时间长,可用onload
(3)适用script的defer属性
它允许浏览器在继续解析和渲染页面的同时延迟执行行内脚本。在支持defer的浏览器中,该属性允许两张图片并行下载;defer是比较简单的并行下载解决方案,但是
它仅支持IE与FireFox3.1中的行内脚本;而且阻塞逐步渲染。
(4)保持css和javaScript的执行顺序
浏览器是按照样式表在页面中列出的顺序应用它们的,而与下载的css的应用规则同时适用于样式表和行内样式。为了确保浏览器的正确执行顺序,每次只下载一个脚本。
行内脚本会阻塞浏览器的其他行为(下载和渲染)。而当行内脚本放置在样式表之后时,该行为会明显延迟资源的下载。
(5)样式表阻塞行内脚本
当行内脚本在样式表后面的时候,浏览器要在样式表完全下载之后才能开始执行行内脚本。 在样式表后面的行内脚本会阻塞所有后续资源的下载。行内脚本位于样式表之后,
引起样式表后面资源的下载时间多余必须的下载时间,从而导致页面变慢。
解决方案:调整行内脚本的位置,使其不出现在样式表和任何其它资源之间。行内脚本应该放在样式表之前下载,如果其他资源是脚本,行内脚本和外部脚本之间可能会代码依赖。
通常建议把行内脚本放在样式表之前,可避免所有的代码依赖。如果你确认没有代码依赖,那么把行内脚本移到可见资源之后可以让他们更快地加载,从而获得更好的逐步渲染结果。