• 怎样理解重流和重绘


    下面是一些相关概念: 

    1. 重流: reflow, 重绘: repaint

    2. 重流必定导致重绘, 重绘不一定重流

    3. 布局改变会发生重流, 元素颜色等改变只会发生重绘

    下面是通过减少重流/重绘次数而优化页面性能的一些手段: 

    1. 减少js中的dom操作, 若必须, 则尽量将读取dom和写入dom的操作放在一起, 便于浏览器累积dom变动, 一次执行, 减少重绘.

    2. 缓存dom信息, 多次使用, 不要重复读取dom节点.

    3. 不要一项一项地改变样式, 尽量用 css class一次性改变样式.

    4. 使用documentFragment操作DOM

    5. 动画使用absolute或fixed定位. 不然重流会很严重.

    6. 只有在必要时才显示或隐藏元素, 这个操作必定会导致重流

    7. 使用window.requestAnimationFrame()可以把代码推迟到下一次重流时执行.

    8. 使用Virtual DOM(如 React / Vue)

  • 相关阅读:
    js的解构
    Go函数
    文件 & IO 操作
    并发编程 & 网络编程
    结构体 & 方法
    Go基础
    go 包
    接口
    JAVA周报4
    JAVA周报6
  • 原文地址:https://www.cnblogs.com/aisowe/p/11699920.html
Copyright © 2020-2023  润新知