css作为页面渲染和内容展现的重要环节，影响着用户对整个网站的第一体验。
1、内联首屏关键css
首次有效绘制即指页面的首要内容出现在屏幕上的时间，影响用户看到页面前需要等待的时间。
内联css能够使浏览器开始页面渲染的时间提前，但是有一定大小限制，内联css后的文件大小控制在14.6kb之内。如果内联css后的文件大小超过了这个限制，就需要在浏览器和服务器之间进行更多次的往返，这样并不能提前页面的渲染时间。
但是内联样式不能进行缓存，每次都得重新下载，所以文件大小不宜过大。
2、异步加载css
css会阻塞渲染，在css请求，下载，解析完成之前，浏览器将不会渲染任何已处理的内容。因为我们并不需要在所需的css加载之前，浏览器就开始渲染页面，所以首屏关键css内联后，剩余的css异步就在就可以。
3、文件压缩
文件的大小会直接影响浏览器的加载速度，利用webpack/gulp等构建工具对css文件进行压缩。
4、去除无用的css
有些css写了，但却没有应用到dom上，可以删除这些无用的css。
5、有选择的使用选择器
我们都知道css选择器的匹配是从右向左匹配。所以不要嵌套过于复杂的的选择器，尽量避免通配符和属性选择器的使用，不要使用类选择器和ID选择器修饰元素标签，这样多此一举，还会降低效率。
6、减少使用昂贵的属性
所有需要浏览器进行操作或计算的属性，当页面发生重绘时，会降低浏览器的渲染性能。如box-shadow/border-radius/filter/透明度/:nth-child等。
7、减少重排
网页的使用过程中，进行一些操作会导致样式的改变，这时浏览器需要检测这些改变，并重新渲染。所以我们要尽量减少消耗性能更多的操作。
重排会导致浏览器重新计算整个文档，重新构建渲染树，这一过程会降低浏览器的渲染速度。
常见的重排元素：
width、height、padding、margin、display、border-width、position、top、left、right、bottom、font-size、float、text-align、overflow-y、font-weight、overflow、font-family、line-height、vertical-align、clear、white-space、min-height
Display 属性会影响页面的渲染。
display: inline后不应该再使用 width、height、margin、padding 以及 float；
display: inline-block 后不应该再使用 float；
display: block 后不应该再使用 vertical-align；
display: table-* 后不应该再使用 margin 或者 float；
Float在渲染时计算量比较大，尽量减少使用。
