• 如何页面减少重绘回流


    主要方法:

    1. 直接改变className,如果动态改变样式,则使用cssText(考虑没有优化的浏览器)
    2. 让要操作的元素进行”离线处理”,处理完后一起更新
    3. 不要经常访问会引起浏览器flush队列的属性,如果你确实要访问,利用缓存
    4. 让元素脱离动画流,减少回流的Render Tree的规模

    具体操作:

    1. 用translate替代top改变
    2. 用opacity替代visibility(在独立图层下优化重绘)
    3. 不要一条一条地修改 DOM 的样式,预先定义好 class,然后修改 DOM 的 className
    4. 把 DOM 离线后修改,比如:先把 DOM 给 display:none (有一次 Reflow),然后你修改100次,然后再把它显示出来
    5. 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
    6. 不要使用 table 布局,可能很小的一个小改动会造成整个 table 的重新布局
    7. 动画实现的速度的选择
    8. 对于动画新建图层
    9. 启用 GPU 硬件加速(translateZ、translate3d);(合成多图层也有代价)
  • 相关阅读:
    观后感
    用户故事排球教练助手
    本周工作量
    本周个人作业
    个人工作量
    个人作业
    产品计划总结
    典型用户和场景总结
    排球比赛计分规则
    PowerShell ISE:Windows Server 2008 R2默认不安装
  • 原文地址:https://www.cnblogs.com/janas-luo/p/9605645.html
Copyright © 2020-2023  润新知