gpt4 book ai didi

CSS 优化、提高性能的方法有哪些?

转载 作者:知者 更新时间:2024-03-13 02:11:08 46 4
gpt4 key购买 nike

一、写在前面

css的优化方案,之前没有提及,所以接下来进行总结一下。

二、具体优化方案

2.1、加载性能

1、css压缩:将写好的css进行打包,可以减少很多的体积。
2、css单一样式:在需要下边距和左边距的时候,很多时候选择:margin:top 0 bottom 0,但是margin-bottom:bot tom;margin-left:left;执行效率更高。
3、减少@import,而建议使用link,因为后者在页面加载时一起加载,前者是等待页面加载完成之后再进行加载。

2.2、选择器性能

1、关键选择器:选择器的最后面的部分为关键选择器。css选择器是从右向左进行匹配的。当使用后代选择器的时候,浏览器会遍历所有子元素来确定是否是指定的元素等等。
2、如果规则拥有ID选择器作为其关键选择器,则不要为规则增加标签。过滤掉无关的规则。
3、避免使用通配符规则,如果*{},计算次数惊人,只对需要用到的元素进行选择。
4、尽量少的区队标签进行选择,而使用class。
5、了解哪些属性是可以通过继承而来的,然后避免对这些属性重复指定规则。

2.3、渲染性能

1、慎重使用高性能属性:浮动,定位
2、尽量减少页面的重排和重绘。
3、去除控规则,{}。空规则的产生的原因一般来说是为了预留样式。去除这些空规则则无疑能减少css文档体积。
4、属性值为0时,不加单位。
5、属性值为浮动小数0.***,可以省略小数点之前的0
6、标准化各种浏览器前缀,带浏览器前缀的在前。标准属性在后。
7、不使用@import前缀,它会影响css的加载速度。
8、选择器优先嵌套,尽量避免层级过深
9、css雪碧图:同一页面相近部分的小图标,方便使用,减少页面的请求次数,但是同时图片本身不变大,使用时,优劣考虑清楚使用。
10、正确使用display的属性,由于display的作用,某一些样式组合会无效,徒增样式体积的同时也影响性能。

2.4、可维护性和健壮性

1、将具有相同内容的样式抽离出来,整合并通过class在页面中进行使用,提高css的可维护性。
2、样式和内容分离,将css代码定义到外部css中。

46 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com