• 什么是回流(重排 reflow)?什么是重绘(repaint)?如何减少回流、重绘?


    什么是回流(重排 reflow)?

    回流(重排 reflow):对DOM树进行渲染,只要修改DOM或修改元素的形状大小,就会触发reflow,reflow的时候,浏览器会使已渲染好受到影响的部分失效,并重新构造这部分,完成reflow后,浏览器会重新绘制受影响的部分到屏幕中

    (继昨日每日一题:display:none和visibility:hidden 当display显示及隐藏元素时,显示时占据空间,隐藏时不占空间,隐藏前后DOM结构发生变化,所以需要重新渲染 当visibility显示及隐藏元素时,不论是显示还是隐藏,都占据空间,因此隐藏前后DOM结构未发生变化,所以不需要重新渲染。)

    什么是重绘(repaint)?

    重绘(repaint):当我们对DOM的修改导致的样式变化,但未影响几何属性时,浏览器不需要重新计算元素的几何属性,直接可以为该元素绘制新的样式,跳过了回流环节,这个过程就叫重绘。

    结论:回流必定会发生重绘,重绘不一定发生回流

    在页面交互中存在频繁的回流与重绘,这个过程,会很大程度的影响性能,因为回流所需成本比重绘高的多,so,能用重绘就不要用回流了。

    如何减少回流、重绘?

    减少回流、重绘就是减少对DOM的操作

    1.直接改变className,如果动态改变样式,则使用cssText(减少设置多项内联样式)

    2.让要操作的元素进行“离线处理”,处理完后一起更新

    当使用DocumentFragment进行缓存操作,引发一次回流和重绘

    使用display:none 技术,只引发两次回流和重绘

    使用cloneNode(true or false)和replaceChild技术,引发一次回流和重绘

    3.不要经常访问会引起浏览器flush队列的属性,如果你确实要访问,利用缓存

    4.让元素脱离动画流,减少render 树的规模

    5.牺牲平滑度换取速度

    6.避免使用table布局

    7.IE中避免使用javascript表达式

    来源:https://www.cnblogs.com/miluluyo/p/11116173.html

    本文仅提供参考,是本人闲时所写笔记,如有错误,还请赐教,作者:阿蒙不萌,大家可以随意转载

  • 相关阅读:
    二维码生成代码
    部署javaweb项目到阿里云ecs(centos7)
    mysql基础知识
    IDEA快捷键快速补齐类和对象名
    Redis和elasticsearch
    在asp.net 项目的bin目录中使用子目录
    MVC项目引用备注
    OAuth相关备注
    手动安装windows的磁盘清理工具
    在CentOS上安装 MongoDB
  • 原文地址:https://www.cnblogs.com/huchong-bk/p/11613211.html
Copyright © 2020-2023  润新知