CSS样式优化（2019-02-18）

对于CSS优化可以从网络性能和css语法优化两方面来考虑。

1.css压缩

压缩css代码的工具：
A、YUI compressor，可以在线压缩css和js代码。
B、gulp自动化构建工具，中的gulp-minify-css。

2.合写css

margin:5px 10px 20px 15px;
padding:5px;
border:2px 5px 10px 3px;
border-top:2px 5px 10px 3px;

3.利用继承

Css的继承机制可以帮我们在一定程度上缩减字节数，我们知道css很多属性可以继承，即在父容器设置了默认属性，子容器会默认也使用这些属性。

可继承的属性举例：
所有元素都可以继承的属性：visibility 、cursor
内联元素和块元素可以继承的属性：
Letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
块状元素可以继承的属性：
Text-indent、text-align；
列表元素可以继承的属性：
List-style、list-style-type、list-style-position、list-style-image
表格元素可以继承的属性：
Border-collapse
不可以继承的属性：
Display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-break-before、unicode-bidi

4.抽离、拆分css，不加载所有css

webpack的功能

5.减少回流和重绘

css放在head中：
当浏览器从上到下一遍下载html生成dom tree，一边根据浏览器默认以及现有css生成render tree来渲染页面。当遇到新的css的时候下载并结合现有css重新生成render tree。则刚才的渲染功能就全废了。当我们把所有css放在页面的顶部，就没有重新渲染的过程了。

脚本中应该尽量少用repaint和reflow：
Reflow：当dom元素出现隐藏/显示，尺寸变化。位置变化的时候，逗号让浏览器重新渲染页面，以前的渲染工作白费了。

Repaint：当元素的背景颜色，边框颜色变化的时候，不会引起reflow的变化，是会让浏览器重新渲染该元素。