1. 尽量减少选择器嵌套层级，多用类选择器，少用标签选择器
渲染过程大概是：首先找到所有的 a，沿着 a 的父元素查找 h3，然后再沿着 h3，查找.nav。中途找到了符合匹配规则的节点就加入结果集。如果找到根元素 html 都没有匹配，则不再遍历这条路径，从下一个 a 开始重复这个查找匹配（只要页面上有多个最右节点为a）。
过度的嵌套会导致代码变得臃肿，沉余，复杂。导致css文件体积变大，造成性能浪费，影响渲染的速度！而且过于依赖HTML文档结构。这样的css样式，维护起来，极度麻烦，如果以后要修改样式，可能要使用
!important覆盖。尽量保持简单，不要使用嵌套过多过于复杂的选择器。
2. 删除无用CSS代码
一般情况下，会存在这两种无用的CSS代码：一种是不同元素或者其他情况下的重复代码，一种是整个页面内没有生效的CSS代码。
对于前者，在编写的代码时候，我们应该尽可能地提取公共类，减少重复。对于后者，在不同开发者进行代码维护的过程中，总会产生不再使用的CSS的代码，当然一个人编写时也有可能出现这一问题。而这些无用的CSS代码不仅会增加浏览器的下载量，还会增加浏览器的解析时间，这对性能来说是很大的消耗。所以我们需要找到并去除这些无用代码。
如何知道哪些CSS代码是无用代码呢？
谷歌的Chrome浏览器就有这种开箱即用的功能。只需转到查看>开发人员>开发人员工具，并在最近的版本中打开 Sources 选项卡，然后打开命令菜单。然后，点击 Coverage(覆盖率)，在Coverage analysis 窗口中高亮显示当前页面上未使用的代码。
3. 慎用*通配符
*{ margin：0； padding：0; }
这样虽然代码量少，但它的性能可不是最佳的，我们最好还是写对应的标签选择器：开发时尽量避免使用通配符选择器
body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul{ margin：0； padding：0; }
4. 避免使用@import
不建议使用
@import主要有以下两点原因：
- 使用
@import引入CSS会影响浏览器的并行下载。使用@import引用的CSS文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道还有另外一个css需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作。这就导致浏览器无法并行下载所需的样式文件。- 多个
@import会导致下载顺序紊乱。在IE中，@import会引发资源文件的下载顺序被打乱，即排列在@import后面的js文件先于@import下载，并且打乱甚至破坏@import自身的并行下载。
5. 合并对DOM样式的修改，采用css class来修改
const el = document.querySelector('.box')
el.style.margin = '5px'
el.style.borderRadius = '12px'
el.style.boxShadow = '1px 3px 4px #ccc'
建议使用css class
.update{
margin: 5px;
border-dadius: 12px;
box-shadow: 1px 3px 4px #ccc
}
const el = document.querySelector('.box')
el.classList.add('update')
6. CSS3硬件加速（GPU加速）
使用css3硬件加速，可以让
transform、opacity、filters这些动画不会引起回流重绘 。但是对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能。常见的触发硬件加速的css属性：
- transform
- opacity
- filters
- Will-change
