前言

本文主要是针对样式代码优化的角度，提一些切实可行的优化建议。

基本建议如下

减少引起重绘、重排样式的使用

你可以通过这个站点查看哪些样式会引起，https://csstriggers.com/

比较常见的操作比如下面这些：

  1. 改变font-size和font-family
  2. 改变元素的内外边距
  3. 通过JS改变CSS类
  4. 通过JS获取DOM元素的位置相关属性（如width/height/left等）
  5. CSS伪类激活
  6. 滚动滚动条或者改变窗口大小

书写上

1 合并margin\padding\border等书写 2 选择器上尽可能简短，减少嵌套，同时避免全局污染 3 不要选择性能低的选择器，比如标签选择器 属性选择器 4 利用样式继承的原则，尽可能少些重复样式

参考文档：