高性能网站建设指南(五)将样式表放在顶部
in Blog
关心性能的前端工程师都希望页面能逐步地加载，也就是说，希望浏览器能够尽快显示内容。为用户提供可视化回馈的重要性已经有了很好的研究和记载。将样式表放在文档底部会导致在浏览器中阻止内容逐步呈现。为避免当样式变化时重绘页面中的元素，浏览器会阻塞内容逐步呈现。而将样式表放在文档顶部对于加载页面所需的实际时间没有太多的影响，更多影响的是浏览器对这些组件顺序的反应。实际上，用户感觉缓慢的页面而是可视化组件加载得更快的页面。
从进度指示器的角度强调可视化回馈的重要性。进度指示器有三个主要的优势：
- 它让用户知道系统没有奔溃，只是正在为他们解决问题
- 它指出了用户还需要等待多久，以便用户能够在漫长的等待中做些其他事情
- 最后，它能给用户提供一些可以看的东西，使得等待不再是那么的无聊。这点优势不可低估，这也是为什么推荐使用图形进度条而不是仅仅以数字形式显示预期的剩余时间。
白屏（Blank White Screen）
将CSS放在底部会导致白屏问题情形有在新窗口的打开时、重新加载时、作为主业时。为了避免白屏，将样式表放在文档顶部的HEAD中。
无样式内容的闪烁（Flash of Unstyled Content）
样式表在页面中的位置并不影响下载时间，但会影响页面的呈现。
如果样式表仍在加载，构建呈现树就是一种浪费，因为在所有样式表加载并解析完毕之前无需绘制任何东西。否则，在其准备好之前显示内容会遇到FOUC（无样式内容的闪烁）问题。
浏览器可以延迟呈现，知道所有的样式表都下载成功之后，这就导致了白屏。反之，浏览器可以逐步呈现，但要承担闪烁的风险。这里没有完美的选择，只能根据自身项目来权衡。
