首页 > 其他分享 >重绘(repaints)和回流(reflow)

重绘(repaints)和回流(reflow)

时间:2022-10-25 08:22:05浏览次数:59  
标签:reflow dom 节点 repaints 回流 页面 重绘 boder

重绘就是重新绘画,重绘是一个元素外观的改变所触发的浏览器行为,当给一个元素更换颜色、更换背景,虽然不会影响页面布局,但是颜色或背景变了,浏览器就会根据元素的新属性重新绘制,这就是重绘

当增加或删除 dom 节点,或者给元素修改宽高时,会改变页面布局,那么就会重新构造 dom 树然后再次进行渲染,这就是回流

重绘不会引起 dom 结构和页面布局的变化,只是样式的变化,有重绘不一定有回流

回流则是会引起 dom 结构和页面布局的变化,有回流就一定有重绘

重绘和回流都会影响性能,怎么进行优化或减少?

1、多个属性尽量使用简写,例如:boder 可以代替 boder-width、boder-color、boder-style
2、创建多个 dom 节点时,使用 documentfragment 创建
3、避免使用 table 布局
4、避免设置多层内联样式,避免节点层级过多
5、避免使用 css 表达式
6、将频繁重绘或回流的节点设置为图层,图层能够阻止该节点的渲染行为影响到别的节点(例:will-change \ video \ iframe等标签),浏览器会自动将该节点变为图层
7、脱离文档流之后进行的任何操作,都不会造成回流了,复杂操作的地方,不妨使用 position:absolute / fixed定位

标签:reflow,dom,节点,repaints,回流,页面,重绘,boder
From: https://www.cnblogs.com/mengxiaoye/p/16823709.html

相关文章

  • vue 用 input 和 canvas 标签实现前端背景图片的移动 重绘 上传
    前言:    闲得无聊写的,嫌麻烦的直接出门左转搜索vuecropper.js模块直接用就行正文:  首先我们要知道input是自带file方法的,直接可以选这文件上传就行,但为了......
  • 带你认识什么是“回流重绘”
    摘要:要想减少回流和重绘的次数,首先要了解回流和重绘是如何触发的。本文分享自华为云社区《前端页面之“回流重绘”》,作者:CoderBin。“回流重绘”是什么?在HTML中,每个元素......
  • 浏览器的渲染过程、回流、重绘
    一、浏览器的渲染过程1.根据HTML生成DOM树浏览器在接收到服务器发来的HTML文件是字节形式的,首先要将字节形式的HTML组建成字符串,然后将字符串转换成token,再将token组装......
  • 回流(重排)和重绘画
    是什么?浏览器解析的DOM树和CSSOM树,接着对DOM树进行遍历,拿到DOM节点,然后再从CSSDOM树中拿到相应节点的样式,最后生成渲染树。回流:渲染树生成之后,每个节点元素的具体位置、......
  • 减少回流与重绘
    一、前情回顾在讨论回流与重绘之前,我们要知道:浏览器使用流式布局模型(FlowBasedLayout)。浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了Render......
  • 回流和重绘
    回流当我们对dom的修改引发了dom几何尺寸的变化(比如修改元素的宽、高或隐藏元素等),浏览器需要重新计算元素的几何属性,然后将计算的结果绘制出来,这个过程就是回流重绘......
  • 讲讲回流和重绘的区别,如何避免回流和重绘?
    回流:当元素的尺寸,结构属性改变,浏览器需要重新渲染部分或全部文档流的过程浏览器首次加载元素尺寸位置改变元素内容改变字体大小改变添加删除dom元素重绘:元素样......
  • 第 22 题:介绍下重绘和回流(Repaint & Reflow),以及如何进行优化
    1.浏览器渲染机制浏览器采用流式布局模型(FlowBasedLayout)浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了渲染树(RenderTree)。有了RenderTree,我们......
  • 重绘和回流(重排)
    回流(重排)当RenderTree中部分或者全部元素的尺寸、结构、布局等发生改变时,浏览器就会重新渲染部分或全部文档的过程称为回流。重绘由于节点(元素)的样式的改变......
  • 重绘与回流
    重绘和回流(重排)浏览器渲染机制什么是重绘和回流什么时候出发重绘与回流浏览器的优化机制如何避免......