「轻阅读」如何提升 CSS 性能的小知识

我是小探花 2020-01-19 17:51:20 ⋅ 98 阅读

https://www.toutiao.com/i6714108942533804556

前言

大家都知道,对于网站来说,性能至关重要,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、首先找到页面所有的 <a> 元素

2、然后向上找到被 <p> 元素包裹的 <a> 元素

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。

文章最开始代码实例图:


喜欢小编或者觉得小编文章对你有帮助的,可以点击一波关注哦!



全部评论: 0

    我有话说:

    阅读」推荐系统中信息增强技巧

    实用推荐系统构建经验,如何进行信息增强。

    阅读如何构建可伸缩Web应用?

    可伸缩性已经成为Web应用程序DNA!

    阅读」大众点评是如何分表分库

    原大众点评订单单表早就已经突破两百G,由于查询维度较多,即使加了两个从库,优化索引,仍然存在很多查询不理想

    阅读如何设计移动端屏适配方案

    在众多移动设备中,前端开发人员如何在不同屏幕大小,不同程度高清屏下去百分百还原设计稿,从来都不

    阅读」Dubbo 如何成为连接异构微服务体系最佳服务开发框架

    要实现异构微服务体系间共存或迁移,关键点在打通异构体系间协议与服务发现,得益于 Dubbo 自身对多协议、多注册模型支持

    阅读」轻松理解 Kubernetes 核心概念

    Kubernetes 迅速成为云环境中软件部署和管理新标准。

    阅读」“做完”和“做好”区别

    在工作中,“做完”和“做好”虽然仅一字之差,但前者只是完成了某项工作,而后者则不仅是完成了工作还有一个好

    阅读」移动端事件穿透原理与解决方案

    本文将带你了解事件穿透及如何在实际项目中选择合适方案解决事件穿透问题。

    阅读」分布式事务四种解决方案,成长需要尝试

    分布式事务指事务操作位于不同节点上,需要保证事务 AICD 特性。

    阅读」为什么在做微服务设计时候需要DDD?

    设计蓝图里为什么没有看到DDD影子呢?

    阅读」移动端适配必须掌握基本概念和适配方案

    随着技术发展,移动设备越来越流行,并且不同设备间屏幕尺寸和屏幕像素差异,移动端开发面临着多分辨率适配问题。

    阅读」亿级用户分布式数据存储解决方案

    分布式数据库和分布式存储是分布式系统中难度最大、挑战最大,也是最容易出问题地方。互联网公司只有解决分布式数据存储问题,才能支撑更多次亿级用户涌入。

    阅读】为什么越来越多系统在做服务化?

    脱离业务实际情况架构都是耍流氓,所以不是所有系统都必须服务化,也不要为了服务化而服务化。

    阅读」Mysql调优你不得不知细节

    多数时候数据库会成为整个系统瓶颈

    阅读」图文并茂带你了解分布式架构演进

    初始阶段架构初始阶段 小型系统 应用程序、数据库、文件等所有资源都在一台服务器上通俗称LAMP