CSS性能优化

CSS性能优化

 

 

1、避免使用@import

在CSS模块化的时候有说到可以通过 @import来实现CSS模块化,但是这种方式是不建议使用的。因为我们使用@import来引入css文件,会使得页面在加载的时候增加延迟。

所以我们在引入外部CSS文件的时候一般都是通过头部的link标签。

2、避免过分重排

修改某些css样式会使得部分或整个页面重新渲染,我们应该尽量减少重新渲染。

(1). 不要一条条的修改dom的样式,预先定义好class,然后修改domclassname

(2). 不要修改影响范围较大的dom

(3). 为动画元素使用绝对定位

(4). 尽量不要使用table布局,因为一个很小的改动会造成整个table重新布局

(5). 避免设置大量的style属性,通过设置style属性改变节点样式的话,每一次设置都会触发一次reflow,所以最好使用class属性

(6). 如果css里面有计算表达式,每次都会重新计算一遍,触发一次reflow

3、删除无用的css代码

我们在页面开发过程中经常会出现很多无用的css代码,

它们或许是调试的时候设置的background,或许是被后面的样式覆盖的样式,或许是设置了之后没有生效的样式。

这些CSS代码都是可以删除的。

4、选择合适的选择器

CSS的选择器有很多很多种,也许同一个元素对象可以使用不同的选择器,我们的原则应该是精确而简单的选择器。 不要嵌套很多复杂的选择器,不利于渲染也不利于我们阅读。

另外,通配符和属性选择器效率最低,需要匹配的元素最多,尽量避免使用。

5、慎重选择高消耗的样式

有一些样式在绘制前需要进行大量计算。

比如border-radiusbox-shadowtransform,我们应该根据业务需求选择合适的属性。

6、尽量少用CSS表达式

表达式会让你的代码显得更加酷炫,但是对性能的浪费可能是超乎你想象的。

7、合成icon图片

利用cssSprite合成icon图片,用宽高加上background-position的背景图方式显现icon图,这样很实用,减少了http请求。

8、减少css嵌套

我们在书写css代码的时候很容易就嵌套起来,但这对性能也会产生浪费,最好不要嵌套三层以上。

9、合并公共样式

拆分出公共css文件,对于比较大的项目可以将大部分页面的公共结构样式提取出来放到单独css文件里,这样一次下载 后就放到缓存里,

10、CSS文件压缩

是最容易想到的一个性能优化方式了,文件的大小会直接影响浏览器的加载速度,这一点在网络较差时表现地尤为明显。 webpackgulp/gruntrollup等也都支持CSS压缩功能。压缩后的文件能够明显减小,可以大大降低了浏览器的加载时间。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!innuc@foxmail.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!

i精品主题 前端教程 CSS性能优化 https://www.ijpzt.com/1561.html

IJPZT

有个性 不签名

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整, 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘
查看详情

相关文章

CSS性能优化-海报

分享本文封面