加速网站速度的建议之CSS篇
这是我参与更文挑战的第29天，活动详情查看： 更文挑战
继Cookie篇后，继续学习如何加速网站。
CSS
将样式表放在顶部
把样式表放在head部分，可以实现页面的逐步渲染，使得浏览器能够尽快显示部分内容。如同进度条一般，能够提高用户体验。这也是HTML规范的一部分。
当样式表在底部时，部分浏览器，如IE，阻止页面渲染以避免其随着样式加载不得不重新绘制，因此，页面未加载完全时，用户只能看到一个空白的白色页面。
避免使用CSS-expression
什么是CSS-expression呢？
1 | background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" ); |
根据例子可以列举为CSS中嵌入了javascript。大多数翻译为”CSS表达式”，目前已被废弃的一种CSS属性，只在IE5~IE7支持，IE8就已经废弃。
CSS-expression被废弃的主要原因是，不仅在页面渲染和调整大小时被重新执行，在页面滚动时、鼠标移动时，其也会被执行，有严重的性能问题。
这一点了解一下即可，现在一般不会遇到这种情况。
使用<link>代替@import
IE中使用@import与在页面底部使用<link>相同，如本文第一条所言，应避免这种情况。
关于两者更多的区别：
以下内容参考了博客园的一篇博客：https://www.cnblogs.com/my--sunshine/p/6872224.html
@import属于CSS规则，而<link>属于html标签。- 加载顺序：
<link>引入的 CSS 与页面同时加载；@import引入的 CSS 在页面加载完毕后才被加载。 @import是 CSS2.1 +的语法，要求浏览器IE5+；link标签作为 HTML 元素，不存在兼容性问题。- 可通过 JS 插入
link标签来改变样式，而@import不支持。 <link>引入的样式权重大于@import引入的样式。
避免过滤器
似乎也是一个古老的问题。
避免使用IE CSS过滤器：AlphaImageLoader。
了解了一下，这个过滤器是IE8之前版本的，用于设置背景图片的特效样式。
掘金首页CSS
我们通过Chrome查看源代码查看掘金首页的CSS情况。
如图所示：
发起其<Head>中存在link标签。未发现使用@import。
1 | ... |