前端css性能优化

1. 避免使用@important

外部的css文件中使用@important会使得页面在加载时增加额外的延迟。最好使用link

 

2. 避免使用css表达式（表达式可能会造成极大的计算量）

 

3. 避免通配选择器

在初期使用*{margin:0;padding:0},以此来消除标签的默认布局和不同浏览器的对同一个标签的不同的渲染。

同时 #app a比#app>a渲染消耗的时间多些

 

4. 移除无匹配的样式

a. 删除无用的样式后可以缩减样式文件的体积，加快资源的下载速度

b. 对于浏览器而言，所有的样式规则都会被解析后索引起来，即使当前页面无匹配的规则时。移除无匹配的规则，减少索引项，加快浏览器的查找速度

 

5. 避免单规则的属性选择器

浏览器匹配所有的元素--->检查是否有href属性并且href='#index'---->分别逐级向上匹配class为selected的元素，直到文档的根节点

 

6. 避免类正则的属性选择器

正则表达式匹配会比基于类别的匹配会慢很多。大部分情况下我们应尽量避免使用*=,|=,^=,$=,合~=语法的属性选择器

 

本文摘抄自：https://www.cnblogs.com/CloverH/p/5033475.html