专业柳州网站建设推荐,做网站有意思吗?,WordPress个性页面,网站支付功能怎么做如何提高CSS性能#xff0c;根据页面的加载性能和CSS代码性能#xff0c;主要总结有下面几点#xff1a; 1、尽量将样式写在单独的css文件里面#xff0c;在head元素中引用 有时候为了图方便或者快速搞定功能#xff0c;我们可能会直接将样式写在页面的style标签或者直接内… 如何提高CSS性能根据页面的加载性能和CSS代码性能主要总结有下面几点 1、尽量将样式写在单独的css文件里面在head元素中引用 有时候为了图方便或者快速搞定功能我们可能会直接将样式写在页面的style标签或者直接内联在元素上这样虽然简单方便但是非常不利于日后的维护。将代码写成单独的css文件有几点好处 (1)内容和样式分离易于管理和维护 (2)减少页面体积 (3)css文件可以被缓存、重用维护成本降低 2、不使用import 这条手段已经是众所周知这里简单提一下import影响css文件的加载速度 3、避免使用复杂的选择器层级越少越好 有时候项目的模块越来越多功能越来越复杂我们写的CSS选择器会内套多层越来越复杂。 建议选择器的嵌套最好不要超过三层比如 .header .logo .text{} 可以优化成 .haeder .logo-text{} 简洁的选择器不仅可以减少css文件大小提高页面的加载性能浏览器解析时也会更加高效也会提高开发人员的开发效率降低了维护成本。 4、精简页面的样式文件去掉不用的样式 很多时候我们会把所有的样式文件合并成一个文件但是这样有一个问题很多其他页面的CSS同时引用到当前页面中而当前页面并没有用到它们这种情况会造成两个问题 (1)样式文件偏大影响加载速度 (2)浏览器会进行多余的样式匹配影响渲染时间。 正确的处理方法是根据当前页面需要的css去合并那些当前页面用到的CSS文件。 PS合并成一个文件有一个优点样式文件会被浏览器缓存进入到其他页面样式文件不用再去下载。这条规则应根据场景来区别对待如果是大项目应该合并成不同的样式文件如果是简单的项目建议合并成一个文件即可。如果无法确认项目规模建议分开成不同的样式文件日后要合并也比较方便。 5、利用CSS继承减少代码量 我们知道有一部分CSS代码是可以继承的如果父元素已经设置了该样式子元素就不需要去设置该样式这个也是提高性能的行之有效的方法。 常见的可以继承的属性比如 colorfont-sizefont-family等等 不可继承的比如 positiondisplayfloat等 6、慎重使用高性能属性浮动、定位 转载于:https://www.cnblogs.com/mysun-shine/p/6434377.html
