重绘回流个人理解版本

2024-06-01 18:34:59

夏天的早晨昏昏沉沉，刚写了一个个人理解的防抖节流，也自己手写一下。
然后就是重绘回流。
有关很基础的性能。
为什么要再看一遍
作为前端
这种基础，
怎么能不掌握呢
而且主要也是自己提高自己（面试问，至少自己理解或者说的好占一个吧）
然后就是自己的的理解，不喜勿喷，有错误请指点，十分感谢

重绘回流
说白了就是渲染dom和css，我是这样理解的

重绘(Painting)

看这俩个字就像css，画画，上色。那什么时候重绘，color，background，只是外观发生变化，但是尺寸大小没变，就不会影响自己的的布局（layout），那就会重绘

回流

看了重绘就肯定知道回流就是布局（layout发生变化了），怎么发生变化，肯定就是尺寸大小变啦。dom增加删除啦，padding变啦，margin变啦，border变啦，等等，变则动，动则回流，哦弥陀佛。
那除了这种直观的还有什么呢？
读写 offset 家族、scroll 家族和 client 家族属性的时候，浏览器为了获取这些值，需要进行回流操作。

那重绘回流会影响性能怎么避免？

你能怎么避免，什么避免dom直接修改样式呀

//这种代码就少些一些
let dom1 = document.getElementsByName('haha')
dom1.style.color = 'red'
dom1.style.marign = '1px'
dom1.style.boxshadow= '1px 1px 2px #ccc'
//直接加类名
dom1.classList.add('boom')
.boom{color:'red',heignt:'20px'
}

类似这种，其他的这里不不在多赘述（其实是举不出来栗子）

ok ，其实比如react的虚拟dom，diff算法，就是为了避免重绘回流，提高性能，其实自己的项目里自己优化重绘回流还是比较少的，但是自己确实也得了解重绘回流的概念，一级它的对性能的影响，以及我们在现在的开发中用的的优化重绘和回流的方法。周五了，下了班改上号了。

重绘回流个人理解版本相关推荐

解剖课-回流与重绘篇
浏览器的渲染过程一. 首先我们要知道什么是HTML? HTML:是文本也是一个字符串,它很多的根标签比如:html,head,body,都是手写的字符串些字符串最后都会转换为DOM树二.DOM树如 ...
浏览器：重绘（repaint）与回流/重排（reflow）
一.从上面这个图上,我们可以看到,浏览器渲染过程如下: 1.解析HTML,生成DOM树,解析CSS,生成CSSOM树 2.将DOM树和CSSOM树结合,生成渲染树(Render Tree) 3.Lay ...
提高网站的性能----回流与重绘
2019独角兽企业重金招聘Python工程师标准>>> 以前在写网页的时候很少关注到网站的性能,时间进入今天,一个网站不在是单纯几张图片或者几段文字,组成一个网站,今天的用户更加注重 ...
【转】高性能WEB开发系列之重绘与回流
原文转载:http://www.cnblogs.com/wangzhichao/archive/2011/05/16/2047633.html 页面呈现流程在讨论页面重绘.回流之前.需要对页面的呈现 ...
读书笔记 --- 再次阅读回流与重绘
参考 - 强烈推荐看看,这个作者写了很多特别好的文章. 浏览器渲染过程解析HTML,生成DOM树; 解析CSS生成CSSOM树将DOM树和CSSOM树合并,生成渲染(Render)树 Layout ...
dev 中 gridcontrol1 滚动条重绘_浏览器的重绘和回流（Repaint amp; Reflow）
参考文献: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree ...
回流和重绘的介绍以及优化方法
文章目录一.浏览器的渲染机制 1.生成渲染树的过程二.回流和重绘 1.回流(reflow) 2.重绘(repaint) 3.何时发生回流.重绘三.减少回流和重绘 1.浏览器的优化机制 2.使用浏 ...
CSS什么情况引起回流,css的回流和重绘
1.当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建.这就称为回流(其实我觉得叫重新布局更简单明了些).每个页面至少需要一次回流,就是在页面第一次加载的时 ...
Stable Diffusion系列课程上：安装、提示词入门、常用模型（checkpoint、embedding、LORA）、放大算法、局部重绘、常用插件
文章目录一.Stable Diffusion简介与安装二.文生图(提示词解析) 2.1 提示词入门 2.2 权重 2.3 负面提示词( Negative prompt) 2.4 出图参数设置 2. ...
自定义字体样式引入使用方法、文本阴影、边框阴影、（边框）圆角、渐变、理解重绘与回流、渐进增强和优雅降级的区别
目录 1.文本阴影 text-shadow 2.边框阴影 box-shadow 3.自定义字体样式方法引入与使用方法举例: 4.(边框)圆角 5.渐变 6.过渡 transition 7.理论知识 ...

最新文章

热门文章