布置行内脚本布置---性能优化（五）

行内脚本布置

简述：行内脚本不会产生额外的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）样式表阻塞行内脚本

　　　　　　当行内脚本在样式表后面的时候，浏览器要在样式表完全下载之后才能开始执行行内脚本。　在样式表后面的行内脚本会阻塞所有后续资源的下载。行内脚本位于样式表之后，

　　　　　　引起样式表后面资源的下载时间多余必须的下载时间，从而导致页面变慢。

　　　　　　解决方案：调整行内脚本的位置，使其不出现在样式表和任何其它资源之间。行内脚本应该放在样式表之前下载，如果其他资源是脚本，行内脚本和外部脚本之间可能会代码依赖。

　　　　　　通常建议把行内脚本放在样式表之前，可避免所有的代码依赖。如果你确认没有代码依赖，那么把行内脚本移到可见资源之后可以让他们更快地加载，从而获得更好的逐步渲染结果。