将 CSS 放在页面顶部—前端性能优化 5
雅虎前端优化总结的35 条前端性能优化军规第五条:将 CSS 放在页面顶部。我们研究雅虎网页性能时发现把样式表移到 <head>
里会让页面更快。这是因为把样式表移到 <head>
里允许页面逐步渲染。
关注性能的前端工程师希望页面被逐步渲染,这时因为,我们希望浏览器尽早渲染获取到的任何内容。这对大页面和网速慢的用户很重要。给用户视觉反馈,比如进度条的重要性已经被大量研究和记录。在我们的情况中,HTML
页面就是进度条。当浏览器逐步加载页面头部,导航条,logo 等等,这些都是给等待页面的用户的视觉反馈。这优化了整体用户体验。
把样式表放在文档底部的问题是它阻止了许多浏览器的逐步渲染,包括 IE。这些浏览器阻止渲染来避免在样式更改时需要重绘页面元素。所以用户会卡在白屏。
HTML 规范 清楚表明样式应该在 <head>
里。
加微信交流