CSS编写时的高性能以及高维护性代码优化建议总结

2020-05-03 11:29:13易采站长站整理

(2)合并相同定义

网页中总会有一些模块有较高相似度,则可把同样的部分共用一次定义,不同的部分再单独定义。而且在css中,很多属性是可以继承的,则只需要在合适的地方定义一次即可。

(3)删除无效的定义

无效的定义,并不会影响页面功能显示,但会影响页面展示的性能,增加代码量的同时,也增加了浏览器解析代码的时间。无效的定义包括无效的规则及无效的样式属性,一般是开发过程中引入的,而从直观上无法判断,这情况,可以用工具,chrome自带的工具就可以查找css中的无效样式。。

其他css高性能实践

(1)避免使用@import

@import导入的新样式文件会阻止页面的并行下载,这样增加了文件的整体加载时间。

(2)避免使用IE浏览器独有样式:图片滤镜和css表达式

图片滤镜的使用会在图片加载时阻塞浏览器的加载和渲染,并会增加额外的内存开销。 Css表达式的作用是动态设置css属性,表达式不只是有兼容性问题,还有性能问题,例如浏览器大小改动、窗口改动时,会使得浏览器频繁计算,性能消耗极大。同样的效果可以用javascript来实现。

css3最佳实践

查看浏览器支持情况

在我们使用css3的过程中,问的最多的一个问题可能就是:兼容性如何?没办法,随着css的发展,它可以为我们之前遇到的很多不好解决的问题提供一个更好的方案,让我们忍不住去想能不能那样去做。PC端有饱受诟病的IE系列,到了移动端会好很多,但有些还是不太好。所以,查看浏览器支持情况几乎成了必备动作。 如果使用的特性仅仅是装饰点缀性的效果,不影响大局,则不需要考虑太多兼容问题,如果是出于设计要求,必须支持所有浏览器,则要特别的关注一下了。 开发者可以选择比如:caniuse.com、css3 Click Chart、css contents and browser compatibility这些在线工具来查看兼容性。

添加必要的浏览器前缀

对于刚使用css不久的朋友来说,如果偶尔在某网站源码当中看到诸如:“-webkit-、-moz-”等,可能会觉得很奇怪,这是什么?它们是对应不同的浏览器厂商所加上的前缀。

因为浏览器在支持css3时,可能仅仅实现了标准定义的一个早期版本,所以,尚不支持标准写法,给代码添加浏览器前缀也是无奈之举,会使得代码更多,更难维护。

但也不是为了“完美”而一定要去兼容所有的浏览器,一般可以按照浏览器或者系统的版本的市场占有率和目标用户使用浏览器的比例,来决定加不加前缀以及加几种前缀。而且相信随着逐步的发展,系统、浏览器的不断升级、更新,需要使用前缀的情况会减少。