如何提升 CSS 性能的小知识

前言
大家都知道，对于网站来说，性能至关重要，CSS作为页面渲染和内容展现的重要环节，影响着用户对整个网站的第一体验。因此，与其相关的性能优化是不容忽视的。

对于性能优化我们常常在项目完成时才去考虑，经常在项目的末期，性能问题才会暴露出来，此时才进行一些相关的性能优化。

其实，如果我们从一开始编码，就注意一些细节问题，后面的工作量会小很多，下面我们来看看在书写CSS时，我们可以注意哪些细节，从而来提升CSS处理性能。

先来看看这段代码：

<style>
</style>
...
<div class="red blue">这是什么颜色</div>
<div class="blue red">这是什么颜色</div>

你觉得这两块内容文字各是什么颜色呢？？？

答案,文章最后看图。

回到主题：如何提升 CSS 性能？

一、减少后代选择器的使用

先来了解一下后代选择器

div p { color: red; font-size: 14px;
}

样式选择器中间的空格是什么？它的名字是 —— 后代选择器。如果项目很大，后代选择器非常多，这时候就很耗性能。所以不建议使用没有意义的后代选择器，如：

.div p { // ...
}

后代选择器为什么会更消耗性能呢?

因为浏览器首先会找到所有 p 标签，然后再向上查找包含 class 为 div 标签。这样一来如果代码中有很多 p 标签，无疑是会做很多重复工作的。

二、减少使用 HTML 标签来定义 CSS 的方式，换成使用具体的 class

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

.box div p a { // ...
}

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

1、首先找到页面所有的元素

2、然后向上找到被

元素包裹的元素

3、再向上查找到一直到 .box 的元素

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

所以一定换成使用具体的 class 编写 CSS 代码，可以有效的提升性能。

三、避免 reflow 风险

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

重绘的速度远快于重排，所以避免重排更重要

重排会导致浏览器重新计算整个文档，重新构建渲染树，这一过程会降低浏览器的渲染速度。如下所示，有很多操作会触发重排，我们应该避免频繁触发这些操作。

1、改变font-size和font-family

2、改变元素的内外边距

3、通过JS改变CSS类

4、通过JS获取DOM元素的位置相关属性（如width/height/left等）

5、CSS伪类激活

6、滚动滚动条或者改变窗口大小

此外，我们还可以通过CSS Trigger15查询哪些属性会触发重排与重绘。值得一提的是，某些CSS属性具有更好的重排性能。如使用Flex时，比使用inline-block和float时重排更快，所以在布局时可以优先考虑Flex。

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

四、减少某些消耗性能的 CSS 属性

有一些 CSS 属性会比其他属性消耗能多的性能，即浏览器解析这些属性需要花费更多的时间。如：border-radius、box-shadow、filter、:nth-child等。当然这些属性我们经常使用，有些无法避免。要做出适当的取舍。

比如:nth-child，第一个元素你可以换成:first-child，最后一个可以换成:last-child。

文章最开始代码实例图：

点此链接领取：自己是一名从事了多年开发的web前端老程序员，今年年初我花了一个月整理了一份最适合2020年学习的前端学习干货，想分享给每一位喜欢前端的小伙伴
喜欢小编或者觉得小编文章对你有帮助的，可以点击一波关注哦！

如何提升 CSS 性能的小知识相关推荐

10个提升MySQL性能的小技巧
从工作量分析到索引的三条规则,这些专家见解肯定会让您的MySQL服务器尖叫. 在所有的关系数据库中,MySQL已经被证明了完全是一头野兽,只要通知停止运行就绝对不会让你多等一秒钟,使你的应用置于困境之 ...
mysql性能模块uptime_MySQL性能监控小知识 (转)
引用http://hi.baidu.com/mygf/blog/item/b9f55d60049a2ed58cb10d64.html 2009-10-24 00:23 一,获取mysql用户下的进程总 ...
聊聊前端的冷门小知识 - 李游Leo公开课（2020-4-8 和 2020-4-10）笔记
冷门小知识 01 div 的伪类后面用一个 : 和用两个:: 效果相同. <style type="text/css">div{width: 100px;height ...
如何提升 CSS 选择器的性能？
CSS选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间,所以优化选择器的原则是应尽量避免使用消耗更多匹配时间的选择器.而在这之前我们需要了解CSS选择器匹配的机制, 如子选择器规则: # ...
jquery/css需要记录的小知识（持续补充）
一.前言 2020年的第一篇了,奥利给! 这部分主要是汇总一些平时遇到的jquery和css小知识,作为笔记使用. 二.正文 1.jquery模拟select下拉框的选择事件,并传参数: self.s ...
html a text decoration,你未必知道的CSS小知识：text-decoration属性变成了属性简写
我相信有些小知识会让你大吃一惊. 跟着最新的CSS规范,text-decoration现在的写法是这样的: a { text-decoration: overline aqua wavy; } tex ...
CSS的基本概念———每天一遍小知识
前言这是我学习了这个网站整理的笔记,接下来还会持续更新. 这是我的博客首页:https://blog.csdn.net/weixin_46654114?t=1 博客名:RodmaChen 如果写的不 ...
css 中的 content-visitly 提升渲染性能
content-visibility 新的css属性,可显著提升渲染性能译文:原文链接:https://web.dev/content-visibility/ 本文介绍CSS的新属性 content ...
win10小课堂：如何提升电脑性能？
win10小课堂:如何提升电脑性能? 1.进入「控制面板」(win10进入控制面板可以直接在小娜处搜索). 2.查看方式处选择「大图标」. 3.找到并点击进入「电源选项」. 4.点击「∨」展开隐藏选项 ...

如何提升 CSS 性能的小知识

如何提升 CSS 性能的小知识相关推荐

最新文章

热门文章