likes
comments
collection
share

CSS还能做性能优化？

作者站长头像
站长
· 阅读数 22

关于CSS的性能优化本该放在前面就写的，笔者在昨天写性能优化的懒加载方面时，想到CSS的一些优化方法。这篇算是补写的？那我们就来看看怎么给CSS做性能优化

重要的事情说三遍（每篇都要说）

  1. Web的性能优化无非从两个角度考虑：首屏加载性能、更新性能
  2. Web的性能优化无非从两个角度考虑：首屏加载性能、更新性能
  3. Web的性能优化无非从两个角度考虑：首屏加载性能、更新性能

CSS的性能优化在这两个角度都有涉及。

一些前置知识

CSS被视为阻塞资源

浏览器在解析html时，如果读取到了<link>标签就会去下载和解析CSS内容，完成这两个操作之后再接着去解析其他内容，于此原因，CSS常常被视为阻塞资源

尽可能减少回流和重绘

CSS在web页面中主要承担“画手”的角色，用CSS设置的样式是应该尽可能地减少回流和重排，因为这两个行为的性能消耗可不容小觑。

尽量用CSS来写动画

V8引擎虽然很牛，但是如果写动画，还是要尽量交给CSS来完成。虽然Js也可以写动画，但抽象的比喻就像是让一个数学家去画画，CSS更像是一个专业的画家。

具体优化

减少回流和重绘

contain属性

在MDN解释中：contain属性会让浏览器针对DOM的一部分重新计算布局、样式、绘制、大小或者他们的组合

换句话说就是可以：现实元素影响的范围，从而减少回流重排

contain有以下几个属性值：layout、paint、size、style，但是我们主要来分析最强的一个：content，有兴趣的同学可以去翻看CSS 局限 - CSS：层叠样式表 | MDN

contain: content

  • 结合了 layout、paint 和 size 的效果，是最强的包含上下文。
  • 适用于那些需要完全隔离的元素。

伪代码：

<style>
.container {
  contain: content;
}
</style>
<div class="container">
  <p>Content that changes frequently.</p>
</div>

.container 内部的布局、重排和尺寸变化都不会影响到外部的其他元素，直接的减少了浏览器的回流和重排计算量，从而提升了性能。

尽可能用GPU处理动画

在CSS是存在一些属性的，这些属性可以让浏览器发送这些属性写的动画到GPU，更专业的画手！

  • transform: 包括 translate, rotate, scale, skew 等。
  • opacity: 修改元素的不透明度，也可以在 GPU 上执行。
  • filter: 应用图像处理效果，如模糊、亮度调整、对比度调整等。
  • transform: 三维变换，如 perspective, rotate3d, translate3d, scale3d 等。
  • will-change: 提示浏览器哪些属性即将发生变化，帮助浏览器提前进行优化。
.example {
  will-change: transform, opacity;
}

will-change属性

正如他的名字一样：将会改变。 它会提示浏览器那些元素即将发生变化，从而让浏览器提前进行优化。比如开启硬件加速（GPU 加速），从而减少回流（reflow）和重排（repaint）的影响。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="Will-Change Example">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Will-Change Example</title>
    <style>
        .example {
            width: 100px;
            height: 100px;
            background-color: red;
            transition: all 0.5s;
            will-change: transform, opacity;

            &:hover {
                transform: translateX(100px) rotate(45deg);
                opacity: 0.5;
            }
        }
    </style>
</head>

<body>
    <div class="example"></div>
</body>

</html>
转载自:https://juejin.cn/post/7381375090984140840
评论
请登录