把样式表放在前面(Put Stylesheets at the Top)
tag:css
在研究Yahoo!的性能时,我们发现把样式表挪到文档的头部可以让页面的加载显得更快。因为把样式表放在头部可以让页面逐步呈现。
关心网站性能的前台工程师通常希望页面能够逐步加载;即,我们希望浏览器能够把已经获得的内
容尽快展现。这对于内容很多的页面以及网络连接较慢的用户尤为重要。给予用户视觉上的反馈(比如进度提示)的重要性,已经经过了很详尽的论证。而对于我们来说,Html 页面本身就可以作为进度提示!当浏览器逐步加载页面时,头部、导航条、顶部的logo等等这些都可以作为对正在等待页面的用户的可视的反馈。而这会从整体上提高用户体验。
把样式表放在文档的最后,会导致包括IE在内的大部分浏览器不进行逐步呈现。浏览器为了避免当样式改变时重绘元素而中止呈现。用户会十分无聊的看到一个空白的页面。
Html规范明确规定样式表应该被包含在页面的HEAD中:“和A不同,LINK只能在文档的HEAD部位出现,但它可以出现多次。”空白的屏幕或者由于没有应用样式而引起的内容的闪现都不值得去尝试。最好的方法是遵循HTML规范,把样式表放在文档的HEAD部位。