前端css优化

原创 J_web 随笔 前端性能优化 265阅读 2018-06-22 19:32:46 举报

一、CSS选择器优化
之前很流行的一种去除浏览器默认样式的写法* {margin: 0; padding: 0},不推荐这样用,应该具体指明哪些元素,所以1.避免使用通配符

想一想#box a { color: #f00} 浏览器会怎么匹配?
先找到id为box的元素,再查找子元素为a的元素???too young,too simple!
其实,浏览器时从右向左匹配选择符的!!!那么上面的写法效率就低了:先查找页面中的所有a标签,在看它的父元素是不是id为box,知道了浏览器的匹配规则我们在写css样式的时候应该注意:2.尽可能的给末尾的元素起个类名,像这样:#box .btn {color:#f00};

选择器的层级越多,浏览器匹配就要花更多的时间,所以 3.选择器的层级最好不好超过3层,并且少用权重高的选择器

4.页面有多个样式表的时候(框架要引入的样式表除外),可以考虑将其合并,减少页面加载的时候下载的css文件数量

5.样式文件里不要用@import引入其他的样式表,样式并行下载会影响页面的性能

6.尽量不在页面style标签中书写样式,尽量避免使用内联样式

7.避免使用css表达式

8.如果页面较少,可以使用雪碧图来减少请求的次数

9.注重代码的重用性,合理利用继承,减少不必要的样式

10.css压缩

评论 ( 4 )
最新评论
lawrence 2018-07-12 21:46:34 4F

CSS选择器优化,有测试工具么?

lawrence 2F 2018-07-12 16:41:49 3F

你说的表达式是css函数么?

J_web 1F 2018-07-12 10:05:04 2F

表达式会动态计算样式啊,计算了页面就要渲染

lawrence 2018-07-11 22:09:13 1F

避免使用css表达式?为什么?