布置行内脚本布置---性能优化(五)

行内脚本布置

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

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

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

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

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

 

原文地址:https://www.cnblogs.com/yaosusu/p/11349193.html