css性能优化总结

整理一下css优化相关的知识，以后看到后会慢慢补充。主要从以下三个方面进行总结：1、减少加载页面时候的数据传输量。2、提高页面渲染速度。3、css代码的可维护性。

一、减少加载页面时候的数据传输量

为了减少数据传输量，主要是减少css代码的体积，主要整理了以下几点：
1、压缩css文件
2、合并属性，样式复用，减少代码量
3、移除空的css规则
4、不声明多余的css样式，使用继承规则减少代码量
5、关于display：
display:inline后不应该再使用width、height、margin、padding以及float
display:inline-block后不应该再使用float
display:block后不应该再使用vertical-align
display:table-*后不应该再使用margin或者float

二、提高渲染速度

1、提高首屏渲染速度：
（1） 可以将首屏渲染的关键css内联到html文件中，这样能让首屏主要样式快速渲染，但是也不能内联太多的css，会影响数据交换的时间。
（2） css会阻塞渲染，由于关键css已经内联处理了，所以其他的css文件阻塞渲染就不是必须的了，可以采取异步加载的方式，防止阻塞页面的渲染速度
2、避免使用复杂的选择器，层级越少越好
3、样式复用，减少渲染花的时间
4、class与id选择符，少用 * 通配符
5、@import影响css文件的加载速度
6、关于渲染后的优化：重排与重绘见文末。

三、可维护性

1、可读性
推荐的书写顺序：　
(1)位置属性(position, top, right, z-index, display, float等)　　
(2)大小(width, height, padding, margin)　　
(3)文字系列(font, line-height, letter-spacing, color- text-align等)　　
(4)背景(background, border等)　　
(5)其他(animation, transition等)
2、可扩展性
OOSS原则：
（1）结构与表现分离的命名方式
例如：.btn-primary{} .btn-delete{} 可改成 .btn{} .primary{} .delete{}
（2）容器与内容分离的命名方式
例如：

#sidebar h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: .8em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}

这些样式将运用到ID为“#sidebar”的子元素“h3”上，但是如果想把字体大小和文本阴影之外的样式运用到脚部具有相同效果的“h3”上，又应该怎么办？然后我们也许需要这样做：

#sidebar h3, #footer h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}

#footer h3 {
  font-size: 1.5em;
  text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;
}

在上面的例子中，用后代选择器声明的样式是不能复用的，因为他们依赖于一个特定的容器（在这里例子里要么是侧栏要么是页脚，即h3的样式依赖于sidebar与footer，应该将其分开）。
BEM命名法： BEM是Block，Element，Modifier的缩写。
例如：.button-left_success

.button-left_success {
  float:left;
  color:#67C23A
}

3、尽量将样式写在单独的css文件里面,在head元素中引用
好处：内容和样式分离，易于管理和维护，减少页面体积，css文件可以被缓存、重用，维护成本降低。
4、一些命名
头：header　　内容：content/container　　尾：footer　　导航：nav　　侧栏：sidebar　　栏目：column　　页面外围控制整体佈局宽度：wrapper　　左右中：left right center　　登录条：loginbar　　标志：logo　　广告：banner　　页面主体：main　　热点：hot　　新闻：news　　下载：download　　子导航：subnav　　菜单：menu　　子菜单：submenu　　搜索：search　　友情链接：friendlink　　页脚：footer　　版权：copyright　　滚动：scroll　　内容：content　　标签：tags　　文章列表：list　　提示信息：msg　　小技巧：tips　　栏目标题：title　　加入：joinus　　指南：guide　　服务：service　　注册：regsiter　　状态：status　　投票：vote　　合作伙伴：partner　　导航：nav　　主导航：mainnav　　子导航：subnav　　顶导航：topnav　　边导航：sidebar　　左导航：leftsidebar　　右导航：rightsidebar　　菜单：menu　　子菜单：submenu　　标题: title　　摘要: summary

关于重排与重绘

1、重绘：当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。
2、重排：当DOM的变化影响了元素的几何信息(DOM对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。
例如：添加或者删除可见的DOM元素；元素尺寸改变——边距、填充、边框、宽度和高度内容变化，比如用户在input框中输入文字浏览器窗口尺寸改变——resize事件发生时计算 offsetWidth 和 offsetHeight 属性设置 style 属性的值。
优化重排：
1、避免以下样式请求，为了给我们最精确的值，浏览器会立即重排+重绘。
offsetTop, offsetLeft, offsetWidth, offsetHeight scrollTop, scrollLeft, scrollWidth, scrollHeight clientTop, clientLeft, clientWidth, clientHeight getComputedStyle(), 或者 IE的 currentStyle
2、分离读与写

div.style.left = '10px';
div.style.top = '10px';
div.style.width = '20px';
div.style.height = '20px';
console.log(div.offsetLeft);
console.log(div.offsetTop);
console.log(div.offsetWidth);
console.log(div.offsetHeight);

只触发了一次重排
3、样式集中改变

// bad
var left = 10;
var top = 10;
el.style.left = left + "px";
el.style.top  = top  + "px";
// good 
el.className += " theclassname";
// good
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

4、缓存布局信息

// bad 强制刷新 触发两次重排
div.style.left = div.offsetLeft + 1 + 'px';
div.style.top = div.offsetTop + 1 + 'px';
// good 缓存布局信息 相当于读写分离
var curLeft = div.offsetLeft;
var curTop = div.offsetTop;
div.style.left = curLeft + 1 + 'px';
div.style.top = curTop + 1 + 'px';

5、离线改变dom
在要多次操作dom引发重排之前，通过display隐藏dom，当操作完成之后，才将元素的display属性为可见，因为不可见的元素不会触发重排和重绘
6、 position属性为absolute或fixed
7、可以把动画效果应用到position属性为absolute或fixed的元素上，这样对其他元素影响较小
最后：这些都是一些平常搜集整理和自己用到的一些知识总结，以后看到其他的会逐步补充。