高性能网站建设-5将样式表放在顶部

1.逐步呈现

1.1可视化回馈的重要性

- 以进度指示器为例（为什么用图形进度条而不仅仅是数字形式显示剩余时间）
- 优势1：让用户知道系统没有崩溃
- 优势2：给出用户大概还需要多久
- 优势3：给用户提供一些可以看的东西，使等待不再那么无聊

1.2 将样式表放在文档底部会导致在浏览器中阻止内容逐步呈现。

2.白屏

2.1是什么？

- 页面加载缓慢，页面会完全空白，找到页面所有的内容同时涌上屏幕。

2.2 IE中，将样式表放在文档底部会导致白屏问题的情形：

2.2.1在新的窗口中打开时

2.2.2重新加载时（单击刷新按钮）

2.2.3作为主页（将浏览器默认页面设置为主页）

3.将CSS放在顶部

3.1样式表包含在文档中的两种方式：

- 方式1:使用link标签。<link rel="stylesheet" herf="style.css">
    - 性能上比@import好
- 方式2：使用@import规则。<style>@import url("style.css");</style>
   - 一个Style块可以包含多个@import规则，但是@import规则必须放在所有其他规则之前。
   - 使用@import规则会导致组件下载时的无序性。--可能会导致白屏

3.2时间对比

- 将样式表放在底部 ，总时间6.3s
- 将样式表放在顶部，总时间7.3s
- 对比：bottom<top,尽管花了更多时间来下载组件，但用户感觉top显示的更快，因为页面是逐步呈现的。

3.3无样式内容的闪烁

- 样式表在页面中的位置并不影响下载时间，但它会影响页面的呈现。
- 浏览器在所有样式表加载并解析完毕之前，无需绘制任何东西。否则，会遇到FOUC（无样式内容的闪烁）。→样式重绘

3.4总结：要不承担白屏、要不承担闪烁的风险，这里没有完美的选择。

4.注意：如果你的样式表不是呈现页面所必需的，可以想办法在文档加载完毕后，动态加载进来。