css 优化篇

加载性能

1. CSS 样式文件链接尽量放在页面头部

CSS 加载不会阻塞 DOM tree 解析，但是会阻塞 DOM Tree 渲染，也会阻塞后面 JS 执行。任何 body 元素之前，可以确保在文档部分中解析了所有 CSS 样式（内联和外联），从而减少了浏览器必须重排文档的次数。如果放置在页面底部，就要等到最后一个 CSS 文件下载完毕，此时会出现‘白屏’，影响用户体验。

2. 尽量避免使用@import

影响浏览器的并行下载

多个@import 导致下载顺序紊乱

3. 压缩、减少文件体积、减少阻塞加载、提高并发方面

选择器性能

可以参考 GitHub 的这个分享 https://speakerdeck.com/jonrohan/githubs-css-performance，

合适的使用 CSS 选择器

1. 尽量避免使用 CSS 表达式

background-color: expression((new Date()).getHours()%2?"#fff":"#000");

2. 尽量避免使用通配选择器(CSS 选择符是从右到左进行匹配的)

/* 不建议使用，浏览器会遍历页面上每个li元素，并且每次都要去确认这个li元素的父元素id是不是myList */
#myList li {
}
body > a {
	font-weight: blod;
}

3. 尽量避免使用类正则的属性选择器

*=, |=, ^=, $=

但 selector 的对整体性能的影响可以忽略不计了，selector 的考察更多是规范化和可维护性、健壮性方面，很少有人在实际工作当中会把选择器性能作为重点关注对象的，但也像 GitHub 这个分享里面说的一样——知道总比不知道好。

渲染性能

渲染性能是 CSS 优化最重要的关注对象。页面渲染 junky 过多？看看是不是大量使用了 text-shadow？是不是开了字体抗锯齿？CSS 动画怎么实现的？合理利用 GPU 加速了吗？什么你用了 Flexible Box Model？有没有测试换个 layout 策略对 render performance 的影响？这个方面搜索一下 CSS render performance 或者 CSS animation performance 也会有一堆一堆的资料可供参考。

1. 谨慎使用 expensive 属性

如：nth-child 伪类；position:fixed 定位

2. 尽量减少样式层级数

如： div ul li span i

3. 尽量避免使用占用过多 CPU 和内存的属性

如：text-indnt:-9999px

4. 尽量避免使用耗电量大的属性

如:CSS3 3D transforms, CSS3 transitions, Opacity

可维护性、健壮性

BEM 思想

EM 的意思就是块（block）、元素（element）、修饰符（modifier）

• block 代表了更高级别的抽象或组件。

• .block__element 代表.block 的后代，用于形成一个完整的.block 的整体。

• .block--modifier 代表.block 的不同状态或不同版本。

CSS 动画优化

• 尽量避免同时动画

• 延迟动画初始化

• 结合 SVG

CSS 动画