图片[1]-前端性能优化-CSS部分-www.131417.net

加载层面

为了避免让用户看到长时间的白屏时间，我们应该尽可能的提高css加载速度，比如可以使用以下几种方法:

使用CDN(因为CDN会根据你的网络状况，替你挑选最近的一个具有缓存内容的节点为你提供资源，因此可以减少加载时间)
对css进行压缩(可以用很多打包工具，比如webpack,gulp等，也可以通过开启gzip压缩)
合理的使用缓存(设置cache-control,expires,以及E-tag都是不错的，不过要注意一个问题，就是文件更新后，你要避免缓存而带来的影响。其中一个解决防范是在文件名字后面加一个版本号)
减少http请求数，将多个css文件合并，或者是干脆直接写成内联样式(内联样式的一个缺点就是不能缓存)

代码层面

DOM层级避免嵌套太多，浏览器遇到标签，就去找它的结束标签，知道匹配上才会显示内容。
img标签的alt一定要写。
【使用Reset但并非全局Reset】。不同浏览器元素的默认属性有所不同，使用Reset可重置浏览器元素的一些默认属性，以达到浏览器的兼容。但需要注意的是，请不要使用全局Reset， *{margin:0;padding:0;} 这不仅仅因为它是缓慢和低效率的方法，而且还会导致一些不必要的元素也重置了外边距和内边距。

封装前缀，保持统一完整兼容格式。

// 文本截断  使用 demo .ellipsis(2);
.ellipsis(@lines) {
  overflow: hidden;
  text-overflow: ellipsis;
  & when (@lines =1) {
    white-space: nowrap;
  }
  & when (@lines > 1) {
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: @lines;
    -webkit-box-orient: vertical;
  }
}