web性能优化:将link样式表放在顶部,将script脚本放在底部
将CSS样式表包含在文档中,外部引用CSS的两种方式:使用LINK标签和@import规则。
使用link标签的实例:
<link rel="stylesheet" href="styles1.css">
带有@import规则的style标签实例:
<style>
@import url("styles2.css")
</style>
link标签除了语法简单外,使用link标签能带来性能上的收益,@import规则有可能会导致白屏现象(就是页面加载的时候,页面空白,或者闪烁),因为@import是引用的CSS 会等到页面全部被下载完再被加载,尽管放在head标签里,依然是最后才被下载。有数据表示,@import实际下载的页面所需的组件的时间是最短的,但容易出现白屏,白屏是浏览器可以为了弥补样式比较靠后的加载,为了逐步呈现从而延迟呈现,等待,直到所有样式都完成下载后,才逐步显现。然而,link标签方式是在页面中逐渐显示的,会让人感觉页面显示的更快,因而体验会更好。
两者都是外部引用CSS的方式,但是存在一定的区别:
区别1:老祖宗的差别。@import完全是CSS提供的一种方式,link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
区别2:加载顺序的差别。link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
区别3:兼容性的差别。link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
区别4:使用dom控制样式时的差别。link支持使用Javascript控制DOM去改变样式;而@import不支持。
另外样式放在底部的加载情况是:当页面逐步加载时,文字首先显示,接着是图片。最后,当样式表正确下载了之后,已经呈现的文字和图片就要用新的样式重绘。就好像格子铺里,东西都按顺序摆好了,但是老板说,这个东西得这样、那样摆,又得挨个重新摆了。
综上:最佳的方案是:使用link标签将样式表放在文档head中,且在script标签前。
另外,脚本放在页面顶部同样会引起页面阻塞,阻止页面逐渐呈现。
http协议1.1规范,建议浏览器从每个主机并行下载两个组件,并行下载的数量的优劣取决于带宽和CPU,过多的并行下载也会降低性能。并行下载的优点很明显,组件可以并行下载,但是下载脚本时并行下载是禁用的,是为了保证脚本能够按照正确的顺序执行。因为脚本不能并行下载,为避免组件的下载延迟,最好将脚本放在页面底部。
最佳方案:将script脚本放在底部
但是很多种情况下,例如向页面写入内容时,很难将脚本放在底部,这就要按情况而定了。
把css文件和script直接放在页面内(内联)下载的速度有可能会快很多,因为对于html文档来说,一个文档一个请求,这样相当于一个http请求。而将两者放在html文档外部,能在性能上获益,但是增加了http请求数量,这样的话,内联样式会更快一点。但是,如果考虑浏览器缓存,对于包含动态内容的html文档,通常不会被配置为可以缓存,当html文档没有缓存时,每次请求html文档,都要下载内联的script和css。但是如果是用外部的script和css,浏览器就能缓存它们,html文档的大小减小,也不会增加http请求数量。
想要达到更优的性能优化,就是在部署javascript之前,对javascript源代码,使用工具对脚本进行精简,精简是从代码中移除不必要的字符(空格、换行符、制表符)以减少大小,以改善响应时间效率。