zoukankan      html  css  js  c++  java
  • 前端优化--重绘&回流

    重绘(Repaint)和回流(Reflow)

    重绘和回流会在我们设置节点样式时频繁出现,同时也会很大程度上影响性能。

    • 重绘是当节点需要更改外观而不会影响布局的,比如改变 color 就叫称为重绘
    • 回流是布局或者几何属性需要改变就称为回流。

    回流必定会发生重绘,重绘不一定会引发回流。回流所需的成本比重绘高的多,改变父节点里的子节点很可能会导致父节点的一系列回流。

    如何减少重绘和回流的次数。

    • 使用 transform 替代 top
    <div class="test"></div>
    <style>
      .test {
        position: absolute;
        top: 10px;
         100px;
        height: 100px;
        background: red;
      }
    </style>
    <script>
      setTimeout(() => {
        // 引起回流
        document.querySelector('.test').style.top = '100px'
      // 不引起回流
      // document.querySelector('.test').style.transform = 'translateY(100px)';
     }, 1000)
    </script>
    • 使用 visibility 替换 display: none ,因为前者只会引起重绘,后者会引发回流(改变了布局)
    • 不要把节点的属性值放在一个循环里当成循环里的变量
    for(let i = 0; i < 1000; i++) {
        // 获取 offsetTop 会导致回流,因为需要去获取正确的值
        console.log(document.querySelector('.test').style.offsetTop)
    }
    • 不要使用 table 布局,可能很小的一个小改动会造成整个 table 的重新布局
    • 动画实现的速度的选择,动画速度越快,回流次数越多,也可以选择使用 requestAnimationFrame
    • CSS 选择符从右往左匹配查找,避免节点层级过多
    • 将频繁重绘或者回流的节点设置为图层,图层能够阻止该节点的渲染行为影响别的节点。比如对于 video 标签来说,浏览器会自动将该节点变为图层。

    大家可以关注一下我的长辈在做的公众号:觅识堂软件开发和测试。都是比较基础的一些IT知识。目前还不是很系统。我们会继续更新改版。感谢支持。

    压力不是有人比你努力,而是比你牛逼的人依然在努力

  • 相关阅读:
    LeetCode OJ 112. Path Sum
    LeetCode OJ 226. Invert Binary Tree
    LeetCode OJ 100. Same Tree
    LeetCode OJ 104. Maximum Depth of Binary Tree
    LeetCode OJ 111. Minimum Depth of Binary Tree
    LeetCode OJ 110. Balanced Binary Tree
    apache-jmeter-3.1的简单压力测试使用方法(下载和安装)
    JMeter入门教程
    CentOS6(CentOS7)设置静态IP 并且 能够上网
    分享好文:分享我在阿里8年,是如何一步一步走向架构师的
  • 原文地址:https://www.cnblogs.com/-wch/p/10489506.html
Copyright © 2011-2022 走看看