CSS-基础优化策略

CSS特性

1、渲染优先级

!important > 行内样式（权重1000） > ID 选择器（权重 100） > 类选择器（权重 10） > 标签（权重1） > 通配符 > 继承 > 浏览器默认属性

2、继承性

• 继承得到的样式的优先级是最低的，在任何时候，只要元素本身有同属性的样式定义，就可以覆盖掉继承值。

• 在存在多个继承样式时，层级关系距离当前元素最近的父级元素的继承样式，具有相对最高的优先级

3、层叠性

层叠性是指 CSS 样式在针对同一元素配置同一属性时（也就是有多个样式），依据层叠规则（权重）来处理冲突，选择应用权重高的 CSS 选择器所指定的属性，一般也被描述为权重高的覆盖权重低的，因此也称作层叠。

简单讲就是 权重越高，权限越大。

CSS选择器执行顺序

渲染引擎解析 CSS 选择器时是从右往左解析，这样做是为了减少无效匹配次数，从而匹配快、性能更优。(浏览器解析css为什么是从右开始呢？了解原理请自行百度噢！)

我们在书写 CSS Selector 时，从右向左的 Selector Term 匹配节点越少越好。

浏览器 CSS 匹配核心算法的规则是以从右向左方式匹配节点的。

避免：div ui .item{……}
推荐：.item{……}

高效的 ComputedStyle

浏览器还有一个非常棒的策略，在特定情况下，浏览器会共享 Computed Style，网页中能共享的标签非常多，所以能极大的提升执行效率！

如果能共享，那就不需要执行匹配算法了，执行效率自然非常高。

如果两个或多个 Element 的 ComputedStyle 不通过计算可以确认他们相等，那么这些 ComputedStyle 相等的 Elements 只会计算一次样式，其余的仅仅共享该 ComputedStyle。

<section class="one">
    <p class="desc">One</p>
</section>

<section class="one">
    <p class="desc">two</p>
</section>

怎么高效共享？

1.TagName 和 Class 属性必须一样。

2.不能有 Style 属性。哪怕 Style 属性相等，他们也不共享。

3.不能使用 Sibling selector，譬如: first-child、 :last-selector、 + selector。

4.mappedAttribute 必须相等。

不能共享，因为使用了内联样式 style
<p style="color:red">jartto's</p>  
<p style="color:red">blog</p>

可以共享元素以及属性都相同
<p align="middle">jartto's</p>
<p align="middle">blog</p>

CSS 书写顺序

需要注意的是：浏览器并不是一获取到 CSS 样式就立马开始解析，而是根据 CSS 样式的书写顺序将之按照 DOM 树的结构分布渲染样式，然后开始遍历每个树结点的 CSS 样式进行解析，此时的 CSS 样式的遍历顺序完全是按照之前的书写顺序。

在解析过程中，一旦浏览器发现某个元素的定位变化影响布局，则需要倒回去重新渲染。

 比如：

width: 50px;
height: 50px;
font-size: 14px;
position: absolute;

当浏览器解析到 position 的时候突然发现该元素是绝对定位元素需要脱离文档流，而之前却是按照普通元素进行解析的，所以不得不重新渲染。

于是改进一下

position: absolute;
width: 50px;
height: 50px;
font-size: 14px;

这样就能让渲染引擎更高效的工作。

css建议书写顺序

1.定位属性
position  display  float  left  top  right  bottom   overflow  clear   z-index
2.自身属性
width  height  padding  border  margin   background
3.文字样式
font-family   font-size   font-style   font-weight   font-varient   color
4.文本属性
text-align   vertical-align   text-wrap   text-transform   text-indent    text-decoration   letter-spacing    word-spacing    white-space   text-overflow
5.CSS3 中新增属性
content   box-shadow   border-radius  transform

优化策略

1. 使用 id 选择器非常的高效

/* Bad  */
p#id1 {color:red;}

/* Good  */
#id1 {color:red;}

2. 避免深层次的 node

/* Bad  */
div > div > div > p {color:red;}
/* Good  */
p-class{color:red;}

3. 不要使用 attribute selector

如：p[att1=”val1”]，这样的匹配非常慢。更不要这样写：p[id="id1"]，这样将 id selector 退化成 attribute selector。

/* Bad  */
p[id="jartto"]{color:red;}
p[class="blog"]{color:red;}
/* Good  */
#jartto{color:red;}
.blog{color:red;}

4. 将浏览器前缀置于前面，将标准样式属性置于最后

.foo {
  -moz-border-radius: 5px;
  border-radius: 5px;
}

5. 遵守 CSSLint 规则

font-faces        　　　　  　　　不能使用超过5个web字体
import        　　　　　　　 　　  禁止使用@import
regex-selectors        　　　　  禁止使用属性选择器中的正则表达式选择器
universal-selector    　　 　　  禁止使用通用选择器*
unqualified-attributes    　　　禁止使用不规范的属性选择器
zero-units            　　 　　　0后面不要加单位
overqualified-elements    　　　使用相邻选择器时，不要使用不必要的选择器
shorthand        　　　　　　　　 简写样式属性
duplicate-background-images    相同的url在样式表中不超过一次

 

6. 减少 CSS 文档体积

移除空的 CSS 规则（Remove empty rules）。
值为 0 不需要单位。
使用缩写。
属性值为浮动小数 0.xx，可以省略小数点之前的 0。
不给 h1-h6 元素定义过多的样式。

7. CSS Will Change

WillChange 属性，允许作者提前告知浏览器的默认样式，使用一个专用的属性来通知浏览器留意接下来的变化，从而优化和分配内存。

8. 不要使用 @import

使用 @import 引入 CSS 会影响浏览器的并行下载。
使用 @import 引用的 CSS 文件只有在引用它的那个 CSS 文件被下载、解析之后，浏览器才会知道还有另外一个 CSS 需要下载，这时才去下载，然后下载后开始解析、构建 Render Tree 等一系列操作。
多个 @import 会导致下载顺序紊乱。在 IE 中，@import 会引发资源文件的下载顺序被打乱，即排列在 @import 后面的 JS 文件先于 @import 下载，并且打乱甚至破坏 @import 自身的并行下载。

 

9. 避免过分回流/重排（Reflow）

使用这些属性时浏览器会重新计算布局位置与大小。
常见的重排元素：
width
height
padding
margin
display
border-width
border
top
position
font-size
float
text-align
overflow-y
font-weight
overflow
left
font-family
line-height
vertical-align
right
clear
white-space
bottom
min-height

10. 减少昂贵属性

当页面发生重绘时，它们会降低浏览器的渲染性能。所以在编写 CSS 时，我们应该尽量减少使用昂贵属性，如：
box-shadow。
border-radius。
filter。
:nth-child。

11. 依赖继承（如果某些属性可以继承，那么自然没有必要在写一遍。）

12. 高效利用 computedStyle

 

文章摘抄于公众号：前端瓶子君