类别：htmlcss / 日期：2023-02-07 / 浏览：286 / 评论：0
加载性能：
（1）css 压缩：将写好的 css 进行打包压缩，可以减小文件体积。
（2）css 单一样式：当需要下边距和左边距的时候，很多时候会选 择 使 用 margin:top 0 bottom 0 ； 但 margin-bottom:bottom;margin-left:left;执行效率会更高。 -性能
（3）减少使用@import，建议使用 link，因为后者在页面加载时一 起加载，前者是等待页面加载完成之后再进行加载。
选择器性能：
（1）关键选择器（key selector）。选择器的最后面的部分为关键 选择器（即用来匹配目标元素的部分）。CSS 选择符是从右到左进行 匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定 是否是指定的元素等等；-优化
（2）如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加 标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们 了）。
（3）避免使用通配规则，如*{}计算次数惊人，只对需要用到的元素 进行选择。
（4）尽量少的去对标签进行选择，而是用 class。
（5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择 器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三 层，更多的使用类来关联每一个标签元素。
（6）了解哪些属性是可以通过继承而来的，然后避免对这些属性重 复指定规则。
渲染性能：
（1）慎重使用高性能属性：浮动、定位。
（2）尽量减少页面重排、重绘。
（3）去除空规则：｛｝。空规则的产生原因一般来说是为了预留样 式。去除这些空规则无疑能减少 css 文档体积。
（4）属性值为 0 时，不加单位。
（5）属性值为浮动小数 0.**，可以省略小数点之前的 0。
（6）标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。
（7）不使用@import 前缀，它会影响 css 的加载速度。
（8）选择器优化嵌套，尽量避免层级过深。
（9）css 雪碧图，同一页面相近部分的小图标，方便使用，减少页 面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚， 再使用。
（10）正确使用 display 的属性，由于 display 的作用，某些样式组 合会无效，徒增样式体积的同时也影响解析性能。
（11）不滥用 web 字体。对于中文网站来说 WebFonts 可能很陌生， 国外却很流行。web fonts 通常体积庞大，而且一些浏览器在下载 web fonts 时会阻塞页面渲染损伤性能。
可维护性、健壮性：
（1）将具有相同属性的样式抽离出来，整合并通过 class 在页面中 进行使用，提高 css 的可维护性。
（2）样式与内容分离：将 css 代码定义到外部 css 中。
发表评论 / 取消回复