内容简介:今天偷个懒,不长篇大论,分享几个你可能不知道的 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 { // ... } 复制代码
浏览器会对上面的例子做如下的步骤处理:
-
首先找到页面所有的
<a>
元素 -
然后向上找到被
<p>
元素包裹的<a>
元素 -
再向上查找到一直到
.content_box
的元素
从上面的步骤我们可以看出,越靠右的选择器越具有唯一性,浏览器解析 CSS 属性的效率就越高。
所以一定换成使用具体的 class
编写 CSS 代码。
避免 reflow 风险
我们知道修改某些 CSS 属性会导致整个页面布局的重绘( repaint )/重排( reflow )。
repaint 的速度远快于 reflow,所以避免 reflow 更重要
导致 repaint 和 reflow 的原因
- DOM 元素的添加、修改、删除(repaint、reflow)
- 仅仅修改 DOM 元素的字体颜色(repaint,不需要调整布局)
- 应用新的样式或者修改任何影响元素外观的属性(repaint、reflow)
- resize,页面滚动(repaint、reflow)
- 读取元素的某些属性(offsetTop/Left/Width/Height、getComputedStyle、scrollTop/Left/Width/Height、clientTop/Left/Width/Height等)(repaint、reflow)
如果在大量的元素上更改这些属性,那么计算和更新他们的位置/大小需要花费很长的时间。
更加消耗性能的 CSS 属性
有一些 CSS 属性会比其他属性消耗能多的性能,即浏览器解析这些属性需要花费更多的时间。
如: border-radius
、 box-shadow
、 filter
、 :nth-child
等
当然这些属性我们经常使用,有些无法避免。要做出适当的取舍。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 前端词典 —— 滚动穿透
- 【前端词典】4 种滚动吸顶实现方式的比较
- 【前端词典】学习 Vue 源码的必要知识储备
- 【前端词典】Vuex 注入 Vue 生命周期的过程
- 【前端词典】继承(一) - 面试官问的你都会吗?
- 【前端词典】提高幸福感的 9 个 CSS 技巧
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
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》 这本书的介绍吧!