前端css性能优化
1. 减少样式表数量和压缩文件大小:
通过合并多个样式表、删除未使用的样式、压缩样式表等方式来减少样式表数量和大小,从而减少网络请求和提高加载速度。
-
通常来说,样式文件会被浏览器缓存,进入到其他页面样式文件不用再去下载。一般是样式表数量越少越好,但是如果样式文件偏大,也会影响加载速度,所以需要取舍。如果是大项目,应该合并成不同的样式文件,如果是简单的项目,建议合并成一个文件即可。如果无法确认项目规模,建议分开成不同的样式文件,日后要合并也比较方便。
-
浏览器想要渲染出网页必须要先将CSS等文件下载下来,所有文件越小,那么就能够更快的下载和渲染,特别是在一些网络速度比较慢的场景下效果尤为明显。我们可以借助一些打包工具进行压缩,比如webpack、gulp/grunt、rollup等。
2. 不要嵌套过多复杂的选择器:
使用尽可能简洁的选择器来匹配元素,避免使用过于复杂的选择器,可以减少匹配时间和提高渲染速度。
如下:
法2的写法,性能更高,因为css选择器是从右到左解析的,法2可以直接获取child,而法1需要先获取所有的child,再获取family下的所有child
/* 法1 */
.family .child {
font-size: 14xp;
}
/* 法2 */
.child {
font-size: 14xp;
}
3. 避免使用通配符*选择器:
通配符选择器(*)会匹配所有元素,会消耗大量计算资源。尽可能避免使用通配符选择器,或者将其限制在具体的元素或类别上。
4. 使用ID选择器代替类选择器:
ID选择器比类选择器更具体,匹配速度更快。在需要使用样式的地方,尽可能使用ID选择器代替类选择器。
5. 避免使用@import:
@import会阻塞页面的加载,影响浏览器的并行下载,并且会增加页面的请求次数。使用@import引用的CSS文件只有在引用它的那个css文件被下载、解析之后,浏览器才会知道还有另外一个css需要下载,这时才去下载,然后下载后开始解析、构建render tree等一系列操作,这就导致浏览器无法并行下载所需的样式文件。尽量避免使用@import,或者将其放在样式表的开头。
6. 避免使用过多的浮动:
浮动元素会影响其他元素的布局和渲染,如果使用过多的浮动,会导致页面的渲染速度变慢。尽量避免使用过多的浮动,或者使用其他布局方式代替。
7. 使用雪碧图:
将多个小图标合并成一个大图,并使用CSS来控制显示区域,可以减少网络请求和提高加载速度。
8. 避免使用!important:
!important会覆盖其他所有样式,会增加计算时间和降低渲染速度。尽量避免使用!important,或者将其限制在必要的地方。
9. 使用缩写属性:
使用缩写属性可以减少样式表的大小,从而提高加载速度。例如,使用margin代替margin-top、margin-right、margin-bottom、margin-left。
10. 慎用一些需要浏览器计算的CSS属性:
如果某些CSS属性需要浏览器计算,那都是需要耗费一些性能的,比如box-shadow、border-radius、filter、透明度、:nth-child、calc等等,而且除了计算,这些属性也容易造成重绘和重排
如果非必要情况下可以不必使用这些属性,当然,大多数都是必要情况。
11. 利用继承减少代码量:
我们都知道CSS有一些属性是可以继承的,比如color,font-size,font-family等等,但是很多开发人员不注意这种细节,编写很多重复性代码,从而使得CSS文件变得比较大,影响加载速度。
12. 首屏关键css使用内联样式:
网站性能是留住用户的关键,那么网站首屏的加载速度更是关键的关键。
通常我们不会去写内联样式,因为这会造成代码维护困难,而且内联样式浏览器不会缓存的,每次刷新都会重新加载css。
但是,凡事都有两面性,内联CSS能够使页面渲染的开始时间提前,因为在HTML下载完成之后就能渲染了,不像link那样引用样式需要耗费更多时间。
那么,我们是否可以全部使用内联样式呢?答案是否定的,刚刚说了内联样式还是存在许多问题的,所以最好的解决办法就是:首屏关键CSS可以使用内联的形式。
13. 异步加载CSS:
CSS会阻塞渲染,在CSS文件请求、下载、解析完成之前,浏览器将不会渲染任何已处理的内容。
但是,有些CSS文件可能不是我们渲染必须的CSS文件,我们可以让它异步加载,从而提升渲染速度,比如下面两种异步加载CSS的方式:
-
使用JavaScript动态创建样式表link元素,并插入到DOM中
// 创建link标签 const myCSS = document.createElement( "link" ); myCSS.rel = "stylesheet"; myCSS.href = "mystyles.css"; // 插入到header的最后位置 document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );
-
修改link标签(有兼容性问题)
<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">
或者
<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">
14. 不要为了速度而放弃了可维护性和可读性:
渲染速度很重要,但是我们在编码过程中,也需要注意代码的可维护性和可读性,比如,不能盲目的为了压缩样式文件的大小,写一些很简单的类名,如a,b,c,d等
15. 减少页面重排、重绘:
页面的重排重绘都会耗费浏览器性能,我们在非必要情况下应该避免,比如下面这些情况。
改变元素的内外边距
CSS伪类激活
能使用background-color,就尽量不要使用background
改变font-size和font-family
当然有些情况我们是不能避免重绘和回流的,我们视情况而定
16.其它优化小点:
慎重使用高性能属性:浮动、定位
去除空规则:{}
属性值为0时,不加单位
将css文件放在页面最上面
尽量少的去对标签进行选择,而是用class
尽量少的去使用后代选择器,降低选择器的权重值。后代选择器的开销是最高的,尽量将选择器的深度降到最低,最高不要超过三层,更多的使用类来关联每一个标签元素
属性值为浮动小数0.**,可以省略小数点之前的0
标准化各种浏览器前缀:带浏览器前缀的在前。标准属性在后
选择器优化嵌套,尽量避免层级过深