今天读到Steve Souders的一篇关于如何放置内联脚本的文章-Positioning Inline Scripts,现总结在文本。 之前译的一篇文章《无阻塞加载脚本》谈到的是外部脚本对于页面性能的影响,例如阻塞资源下载、阻塞页面渲染等。而对于inline的脚本,同样存在类似的问题,有的甚至是有过之而无不及。

一、阻塞页面渲染

外链脚本对于页面的渲染阻塞效果仅仅局限于脚本后面的内容,而对于inline脚本而言则是整个页面,而且不论你把脚本放置在什么位置(即使是body之后)均会阻塞整个页面的渲染,可以点击这里查看。在该例子中,在head里引用了一个外部脚本和样式表,而在页面的最后添加了一段inline脚本,脚本的作用是等待2秒钟。打开页面的最初几秒时间内,你将看不到任何内容,直到最后的内联脚本执行完毕页面才渲染出来。即使改变inline脚本的位置,渲染依旧要等到脚本执行完毕才能进行,也就是说,无论inline脚本放在什么地方都会阻塞整个页面的渲染! 代码

 
  
  
  
 
		
		Baidu 1 - BET188亚洲体育
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		


		
		
	

 




 
 		
	

登录

新 闻 网 页 贴 吧 知 道 MP3 图 片 视 频 地 图

空间 百科 hao123 | 更多>>

把百度设为主页

加入百度推广 | 搜索风云榜 | 关于百度 | About Baidu

©2010 Baidu 使用百度前必读 京ICP证030173号

时间瀑布图

inline-script-block-render

从图中可以看出,当脚本位于资源之后时,并未阻塞资源的下载。

二、阻塞资源下载

修改一下上个例子中的脚本位置,将脚本从body之后挪到外部脚本之前,点击这里查看。从下图中可以清晰的看到,在页面加载完成后到开始下载资源之间有大概2s左右的间隔时间,这个时间恰好是inline脚本执行的时间,这充分表明了inline脚本对资源的阻塞作用。 代码

 
  inline脚本阻塞渲染测试
  
  
  
  
 
  

这是一段测试文字,最初你是看不到的,页面打开几秒后将会出现

时间瀑布图

inline-script-block-download

三、解决方案

既然inline脚本如此可怕,那如何解决这个问题呢,文中主要提到了以下三点建议:
  1. 将inline脚本移到页面最底部,也就是上面第一个例子中的做法,该方法虽然必能不能避免阻塞页面的渲染,但至少不会影响资源的下载。而从第一个例子的时间瀑布图中可以非常明显的看出,脚本和样式的下载是在页面加载完成后立即执行的,并没有受inline脚本的影响,反过来,从第二个例子的时间图则可以清晰的看出inline脚本的执行阻塞了资源的下载,因此将inline脚本尽可能的后移对于资源下载来说确实是有好处的。
  2. 对于执行时间较长的代码可以考虑使用setTimeout来执行,使用这种方法不仅可以解决资源下载阻塞问题,还可以解决执行脚本对页面渲染的阻塞问题。
  3. 对于IE或Firefox3.1及以上版本中的脚本使用defer属性。
以下分别测试下第二和第三种解决方式。
setTimeout
先看例子 再看代码

 
  inline脚本阻塞渲染测试
  
  
  
  
 
  

这是一段测试文字,最初你是看不到的,页面打开几秒后将会出现

时间瀑布图

inline-script-block-settimeout

与例2相比,在该例子中,给等待代码加了个setTimeout,效果可以从上图中看出。inline脚本的长时间执行并未阻塞资源的下载和页面的渲染,效果非常好。
defer
先看例子 再看代码

 
  inline脚本阻塞渲染测试
  
  
  
  
 
  

这是一段测试文字,最初你是看不到的,页面打开几秒后将会出现

时间瀑布图

inline-script-block-defer

从上面的时间图中可以看出,给inline脚本添加defer属性后,长时间执行的脚本并未阻塞资源的下载和页面的渲染。 以上三种方式在解决资源阻塞方面的效果都差不多,能够解决的比较好。而在页面渲染方面,个人觉得效果从大到小应该是setTimeout > defer > bottom。setTimout对于脚本执行的时机能够比较灵活的把握,通过调整执行的时机可以获得比较理想的效果;defer依赖于浏览器的行为,可控性差,假如延长的时间小于其他资源的下载时间仍然会阻塞页面的渲染;将脚本放置在页面底部对于解决渲染阻塞无影响。从兼容性考虑,setTimeout和bottom则是最好的,而defer仅适用于IE和FF3.1及以上版本。 此外,需要注意的是尽量不要将inline脚本放在外部样式后面,因为主流的浏览器为了确保执行顺序,都会在样式下载、解析以及应用完成后才会执行其后的脚本,因此,会造成更严重的阻塞,查看例子。 时间瀑布图

inline-script-block-after-css1

从图中可以看出,浏览器是在样式下载完毕后才开始执行脚本的,从而导致样式和外部脚本不能并行下载,所以即使是将inline脚本放在外部样式文件之前也不要放在后面。