性能提升的14条规则(五)(六)(七)

规则5.——把样式表放在头上
 我们发现把样式表移到HEAD部分可以提高界面加载速度,因此这使得页面元素可以顺序显示。 在很多浏览器下,如IE,把样式表放在document的底部的问题在于它禁止了网页内容的顺序显示。浏览器阻止显示以免重画页面元素,那用户只能看到空白页了。Firefox不会阻止显示,但这意味着当样式表下载后,有些页面元素可能需要重画,这导致闪烁问题。 HTML规范明确要求样式表被定义在HEAD中,因此,为避免空白屏幕或闪烁问题,最好的办法是遵循HTML规范,把样式表放在HEAD中。
应用: 这点经常被性能组忽略,这一点与法则6经常一起使用来提高页面的显示正确性和显示速率。
 规则6—— 把脚本文件放在底部
 与样式文件一样,我们需要注意脚本文件的位置。我们需尽量把它们放在页面的底部,这样一方面能顺序显示,另方面可达到最大的并行下载。 浏览器会阻塞显示直到样式表下载完毕,因此我们需要把样式表放在HEAD部分。而对于脚本来说,脚本后面内容的顺序显示将被阻塞,因此把脚本尽量放在底部意味着更多内容能被快速显示。 脚本引起的第二个问题是它阻塞并行下载数量。HTTP/1.1规范建议浏览器每个主机的并行下载数不超过2个。因此如果您把图像文件分布到多台机器的话,您可以达到超过2个的并行下载。但是当脚本文件下载时,浏览器不会启动其他的并行下载,甚至其他主机的下载也不启动。 在某些情况下,不是很容易就能把脚本移到底部的。如,脚本使用document.write方法来插入页面内容。同时可能还存在域的问题。不过在很多情况下,还是有一些方法的。 一个备选方法是使用延迟脚本(deferred  script)。DEFER属性表明脚本未包含document.write,指示浏览器刻继续显示。不幸的是,Firefox不支持DEFER属性。在IE中,脚本可能被延迟执行,但不一定得到需要的长时间延迟。不过从另外角度来说,如果脚本能被延迟执行,那它就可以被放在底部了。
 规则7—— 避免CSS表达式
 CSS表达式是功能强大的(同时也是危险的)用于动态设置CSS属性的方式。IE,从版本5开始支持CSS表达式,如backgourd-color:  expression((new  Date()).getHours()%2?”#B8D4FF”:”#F08A00”),即背景色每个小时切换一次。 CSS表达式的问题是其执行次数超过大部分人的期望。不仅页面显示和resize时计算表达式,而且当页面滚屏,甚至当鼠标在页面上移动时都会重新计算表达式。 一种减少CSS表达式执行次数的方法是一次性表达式,即当第一次执行时就以明确的数值代替表达式。如果必须动态设置的话,可使用事件处理函数代替。如果您必须使用CSS表达式的话,请记住它们可能被执行上千次,从而影响页面性能。
 应用: 主要是对动态设置CSS属性的一些js的检查,尽可能少CSS表达式的执行次数。

posted @ 2015-06-16 14:46  范丁文  阅读(122)  评论(0编辑  收藏  举报