将 CSS 放在页面顶部

未匹配的标注

F2E 前端

我们研究雅虎网页性能时发现把样式表移到 <head> 里会让页面更快。这是因为把样式表移到 <head> 里允许页面逐步渲染。

关注性能的前端工程师希望页面被逐步渲染,这时因为,我们希望浏览器尽早渲染获取到的任何内容。这对大页面和网速慢的用户很重要。给用户视觉反馈,比如进度条的重要性已经被大量研究和记录。在我们的情况中,HTML页面就是进度条。当浏览器逐步加载页面头部,导航条,logo等等,这些都是给等待页面的用户的视觉反馈。这优化了整体用户体验。

把样式表放在文档底部的问题是它阻止了许多浏览器的逐步渲染,包括IE。这些浏览器阻止渲染来避免在样式更改时需要重绘页面元素。所以用户会卡在白屏。

HTML规范 清楚表明样式应该在 <head> 里。

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
Summer
讨论数量: 0
发起讨论 只看当前版本


暂无话题~