【前端词典】几个有益的 CSS 小知识

栏目: CSS · 发布时间: 5年前

内容简介:今天偷个懒,不长篇大论,分享几个你可能不知道的 CSS 小知识。记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上)答案你们应该是知道的。

今天偷个懒,不长篇大论,分享几个你可能不知道的 CSS 小知识。

样式的顺序

CSS 代码:

.red {
    color: red;
}
.blue {
    color: blue;
}
复制代码

HTML 代码:

<div class="red blue">这是什么颜色</div>
<div class="blue red">这是什么颜色</div>
复制代码

记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上)

答案你们应该是知道的。

可以这样提升 CSS 性能

后代选择器

样式选择器中间的空格是什么?它的名字是 —— 后代选择器

div p {
    color: #3388ff;
    font-size: 14px;
}
复制代码

后代选择器或许会很耗性能

耗能与否取决于项目的体积,但不建议使用没有意义的后代选择器。例如:

div p {
    // ...
}
复制代码

为什么会更消耗性能呢?

因为浏览器首先会找到所有 a 标签,然后再向上查找包含 id#nav 的元素。这样一来如果 代码中有很多 a 标签,无疑是会做很多重复工作的。

所以可以减少使用 HTML 标签来定义 CSS 的方式,换成使用具体的 class

浏览器会从右到左解析 CSS 选择器

.content_box div p a {
    // ...
}
复制代码

浏览器会对上面的例子做如下的步骤处理:

  1. 首先找到页面所有的 <a> 元素
  2. 然后向上找到被 <p> 元素包裹的 <a> 元素
  3. 再向上查找到一直到 .content_box 的元素

从上面的步骤我们可以看出,越靠右的选择器越具有唯一性,浏览器解析 CSS 属性的效率就越高。

所以一定换成使用具体的 class 编写 CSS 代码。

避免 reflow 风险

我们知道修改某些 CSS 属性会导致整个页面布局的重绘( repaint )/重排( reflow )。

repaint 的速度远快于 reflow,所以避免 reflow 更重要

导致 repaint 和 reflow 的原因

  1. DOM 元素的添加、修改、删除(repaint、reflow)
  2. 仅仅修改 DOM 元素的字体颜色(repaint,不需要调整布局)
  3. 应用新的样式或者修改任何影响元素外观的属性(repaint、reflow)
  4. resize,页面滚动(repaint、reflow)
  5. 读取元素的某些属性(offsetTop/Left/Width/Height、getComputedStyle、scrollTop/Left/Width/Height、clientTop/Left/Width/Height等)(repaint、reflow)

如果在大量的元素上更改这些属性,那么计算和更新他们的位置/大小需要花费很长的时间。

更加消耗性能的 CSS 属性

有一些 CSS 属性会比其他属性消耗能多的性能,即浏览器解析这些属性需要花费更多的时间。

如: border-radiusbox-shadowfilter:nth-child

当然这些属性我们经常使用,有些无法避免。要做出适当的取舍。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Open Data Structures

Open Data Structures

Pat Morin / AU Press / 2013-6 / USD 29.66

Offered as an introduction to the field of data structures and algorithms, Open Data Structures covers the implementation and analysis of data structures for sequences (lists), queues, priority queues......一起来看看 《Open Data Structures》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

SHA 加密
SHA 加密

SHA 加密工具