解读Yahoo!网站性能优化组定义的34条准则 - 把样式表放在开头

把样式表放在开头

在Yahoo！研究网站性能过程中我们发现，将样式放在文件头部使得网页看上去载入更快。这是因为把样式放在头部可以使网页逐步渲染出来。

 

关心性能的前端的工程师想要网页逐步加载，也就是说，我们要浏览器有什么内容时就尽快显示什么内容。这在网页包含大量的内容或用户的互联网连接速度较慢时显得尤为重要。给用户视觉反馈的重要性，如进度指标，已得到很好的研究和记载。在我们的实际情况中， HTML网页就是进展的指标！当浏览器逐步加载网页页眉，导航栏，上方的logo等都担任给正在等待页面的用户的良好视觉反馈。这提高了整体的用户体验。

 

把样式表放在文件的底部附近带来的问题是，在许多浏览器，包括Internet Explorer中它禁止逐步呈现 。如果他们的样式变化了，这些浏览器为了避免重绘网页元素而一开始就阻塞了渲染。在全部加载之前，用户只能看到一个空白页。

HTML规范明确指出，样式应该在页面的HEAD部分：“不像A标签， [LINK]可能只出现在页面的HEAD部分，虽然它可能会出现任何次数”。最佳解决办法是按照HTML规范，在页面的头部加载你的样式表。