a. 不要用 @import ，阻塞DOM的解析，和script的加载一样
b. 合并压缩（主要是从减少文件体积、减少阻塞加载、提高并发方面入手的）
c. 雪碧图（css sprites），减少http请求
d. DNS预解析提升页面速度
1). 用meta信息来告知浏览器, 当前页面要做DNS预解析:<meta http-equiv=”x-dns-prefetch-control” content=”on” />
2). 在页面header中使用link标签来强制对DNS预解析: <link rel=”dns-prefetch” href=”http://bdimg.share.baidu.com” />
注：dns-prefetch需慎用，多页面重复DNS预解析会增加重复DNS查询次数。
DNS 作为互联网的基础协议，其解析的速度似乎容易被网站优化人员忽视。现在大多数新浏览器已经针对DNS解析进行了优化，典型的一次DNS解析耗费20-120 毫秒，减少DNS解析时间和次数是个很好的优化方式。DNS Prefetching是具有此属性的域名不需要用户点击链接就在后台解析，而域名解析和内容载入是串行的网络操作，所以这个方式能减少用户的等待时间，提升用户体验。
浏览器对网站第一次的域名DNS解析查找流程依次为：
浏览器缓存 – 系统缓存 – 路由器缓存 – ISP DNS缓存 – 递归搜索
a. 避免在css中使用ID选择器；
b. 避免过多嵌套选择器；
1). 是不是开了字体抗锯齿？
-webkit-font-smoothing主要有一下三个属性：
none: 无抗锯齿
subpixel-antialiased (default): 次像素平滑 常见于Mac OS和MacType For Windows
antialiased: 灰度平滑 常用于Android和iOS等移动设备的
2). CSS 动画怎么实现的？合理利用 GPU 加速了吗？
为动画DOM元素添加CSS3样式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);
这两个属性都会开启GPU硬件加速模式，从而让浏览器在渲染动画时从CPU转向GPU。
开启GPU硬件加速可能触发的问题：
通过-webkit-transform:transition3d/translateZ开启GPU硬件加速之后，有些时候可能会导致浏览器频繁闪烁或抖动，可以尝试以下办法解决之：
-webkit-backface-visibility:hidden;
-webkit-perspective:1000;
a. 命名是否足够强壮合理
b. 结构层次设计是否足够健壮
c. 对样式进行抽象复用
d. 了解过OOCSS
优雅的 CSS 不仅仅会影响后期的维护成本，也会对加载性能等方面产生影响。
原文链接：https://www.cnblogs.com/yanmuxiao/p/8735551.html
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/15948
