性能优化----防抖、节流、重绘与回流

最新推荐文章于 2023-08-03 15:18:44 发布
转载 最新推荐文章于 2023-08-03 15:18:44 发布 · 462 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://blog.youkuaiyun.com/u010494101/article/details/105343377

本文深入探讨了前端开发中的防抖与节流技术，详细解释了这两种技术的工作原理及应用场景，通过实例展示了如何有效避免事件处理过程中的资源浪费。

下面来介绍一下什么是防抖！

   防抖：任务频繁触发的情况下，只有任务触发的间隔超过制定的时间间隔的时候，任务才会被执行。

下面引用一下知乎上的一个例子：

防抖 点我防抖！ 这是知乎上的一个例子，创建一个定时器，如果在规定时间内重复触发该事件，就会调用clearTimeout清除掉上一个定时器，重置定时器。也就是说，这件事本来就是需要等待的，并非立即执行的，如果用户反复点击，那只好重新等待了。所以，fn.call(this, arguments) 其实是将不确定变量替换到函数中了。 
   在上面的这个例子中是非立即执行版。当然，我把知乎的例子修改一下它，将它变成立即执行版。
防抖 点我防抖！ 其原理和立即执行版本一样，只是点击执行的先后顺序不同。

下面 我们来聊一下什么是节流吧！

节流：指定时间间隔内只会执行一次任务。

这有点像我们刷抢购一样，当我们在某段时间间隔内触发了多次事件，其实，它只执行一次请求！

下面 我们再来引用知乎的一个例子就会明白了！

节流

点我节流！

从这个例子可以看出，节流可以防止在某时间间隔内重复发送请求！其和防抖有点相似，但其有本质的区别，虽然都是防止重复触发事件！

防抖是需要等待多久时间才能再触发一次事件！

节流是多久时间内只能触发一次事件！

重绘与回流

在介绍重绘和回流之前，最好先了解一下浏览器是如何解析解析URL的，或者看一下《浏览器渲染页面过程剖析》

好！现在我们进入正题 ！什么是重绘和回流！

重绘(repaint)：当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要 UI 层面的重新像素绘制，因此损耗较少。

回流(reflow)：又叫重排（layout）。当元素的尺寸、结构或者触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。

或许这概念比较抽象，讲起来很难理解！简单点说，就比如我们页面中的某些颜色会发生动态改变，而木有影响到尺寸，布局、位置、结构这些改变的，就叫做重绘，而例如动态添加结点、改变尺寸、位置这些的，就叫做回流！

回流的损耗是比较大的！所以尽量不要产生太多的回流！就比如，样式的动态修改不要多步而尽量应一步到位！

为了避免大量的重绘和回流！

避免频繁操作样式，可汇总后统一一次修改
尽量使用 class 进行样式修改，而不是直接操作样式
减少 DOM 的操作，可使用字符串一次性插入

回流必定会触发重绘，重绘不一定会触发回流。重绘的开销较小，回流的代价较高。
————————————————

原文链接：https://blog.youkuaiyun.com/u010494101/article/details/105343377

TTST_HTSN
关注
CSS动画性能优化：避免重绘和回流
weixin_41455464的博客
06-30 204
想象一下，你在一家餐厅当服务员。
11.3 性能优化：懒加载、虚拟列表、浏览器重绘与回流
最新发布
勤奋的码农
09-03 99
本文深入探讨了前端性能优化的三大核心技术：懒加载、虚拟列表以及浏览器重绘与回流。懒加载通过延迟加载非关键资源提升初始加载速度，介绍了图片、组件和路由的懒加载实现方案，并提供了自适应网络条件的优化策略。虚拟列表部分解析了大数据集渲染原理，展示了基础React实现和动态高度支持等高级技巧，包括滚动节流优化。这些技术可显著提升Web应用性能，减少资源消耗，改善用户体验。
防抖、节流与回流、重绘
Vision的博客
02-11 1006
防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。 /** * 防抖函数 * @author vision * @param {执行函数} fn * @param {延迟} delay */ export function debounce(fn, delay) { let timer = null; return function() { ...
防抖与回流
weixin_45346719的博客
06-01 262
防抖与回流 防抖策略： 当事件被触发后，延迟n秒后执行回调，如果在这n秒内事件又被触发，则重新计时 实现输入框防抖： 1.定义防抖的id var timer = null; 2.定义防抖函数 function de (keywords){ timer = setTimeout(function(){ getSuggestList(keywords) },500} } 3.调用函数 $('#ipt').on('keyup',function(){ clearTimeout(ti
节流防抖
apjcui的博客
09-18 489
// js代码 test = () => { if (this.timer) { clearTimeout(this.timer); this.timer = 0 } this.timer = setTimeout(() => { this.timer = 0 // 需要做防抖的操作 console.log(1) }, 500); } // 组件代码 <button on
JavaScript 防抖与节流、重绘与回流(分享)
weixin_60547084的博客
03-22 1892
文章目录防抖节流重绘回流(重排)重绘与回流的关系 防抖 在一个事件被多次触发时，只会执行最后一次，比如表单登录 节流 在规定的时间只会触发一次，比如轮播图 重绘 当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局变化，只需要浏览器 根据元素的新属性重新绘制，使元素呈现新的外观叫做重绘 回流(重排) 当 render 树中的一部分，或者全部因为大小边距等问题，发生改变而需要 DOM 树重 新计算的过程叫做回流 重绘与回流的关系 重绘不一定会回流，回流一定会重绘 ...
防抖节流和重绘回流
weixin_47084275的博客
07-23 540
防抖和节流** 防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。 场景： 有个输入框，输入之后会调用接口，获取联想词。但是，因为频繁调用接口不太好，所以我们在代码中使用防抖功能，只有在用户输入完毕的一段时间后，才会调用接口，出现联想词。 节流：指定时间间隔内只会执行一次任务。 场景: 懒加载要监听计算滚动条的位置，使用节流按一定时间的频率获取。 用户点击提交按钮，假设我们知道接口大致的返回时间的情况下，我们使用节流，只允许一定时间内点击一次。 重绘与回流 重绘(repai
精选资源
前端进阶版本 ，性能优化—-防抖、节流、重绘与回流。
01-20
总的来说，前端性能优化涉及很多方面，包括但不限于防抖、节流、重绘和回流的管理。通过理解和应用这些策略，开发者能够创建更加流畅、响应更快的用户体验，同时减轻浏览器的负担。在实际开发中，应该根据场景选择...
防抖和节流； 回流和重绘； 内存泄漏和溢出的相同和不同点
m0_60970928的博客
11-01 209
防抖和节流; 回流和重绘; 内存泄漏和溢出
前端性能优化与实践.zip
07-23
5. **回流（Reflow）与重绘（Repaint）**："最后一击——回流与重绘"可能讨论了这两者对性能的影响，以及如何通过优化DOM操作来减少不必要的重排和重绘。 6. **事件的节流（throttle）与防抖（debounce）**："事件...
前端进阶版本 ，性能优化—-防抖、节流、重绘与回流
github_37360787的博客
08-03 1281
防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。 /** * 防抖函数 * @author vision * @param {执行函数} fn * @param {延迟} delay */ export function debounce(fn, delay) { let timer = null; return function() { let context = this; let arg = arguments; clear
防抖 与 节流 重绘与回流/重排 内含防抖插件和使用方法
violetta521的博客
11-12 424
对大佬的总结->防抖(debounce) 和 节流(throttling)_独碟的博客-优快云博客_防抖 快速连续触发事件：如鼠标移动事件onmousemove, 滚动滚动条事件onscroll，窗口大小改变事件onresize，瞬间的操作都会导致这些事件会被高频触发。 如果事件的回调函数较为复杂，就会导致响应跟不上触发，出现页面卡顿，假死现象， 不可控的高频触发：在实时检查输入时，如果我们绑定onkeyup事件发请求去服务端检查，用户输入过程中，事件的触发频率也会很高，会导致大量的请...
回流和重绘消耗性能怎么解决？
weixin_61088470的博客
09-04 402
由于回流和重绘消耗性能怎么解决？ 俗话说：操作DOM 非常消耗性能？= 因为操作DOM 会导致页面的：回流 （重排）跟重绘 尽可能减少回流操作 回流（重排）：当某个节点的位置或者大小发生改变（含:新增或者删除节点，调整节点位置以及大小等），再或者浏览器视口大小发生改变，浏览器都需要重新计算每一个节点在视口中的布局位置（或者只调整节点所在文档流中的位置），也就是重新进行Layout，我们把这个操作称之为‘回流（重排）’ 重绘：节点的位置和大小不变，只是修改了节点的背景颜色，文字颜色等样式，此时只需要
页面的重绘和节流
qq_34080355的博客
09-19 408
回流是指当页面的结构或者标签的尺寸发生变化的时候, 浏览器需 要对页面进行重排, 并重新渲染; 重绘是指当页面上的标签的外观(比如字体颜色,或背景颜色)发生改 变的时候, 浏览器需要重新对页面进行渲染. 所以回流一定会引起页面的重绘, 重绘不一定会引起回流. 要提高页面性能, 就要尽可能的减少页面的回流和重绘. ...
自写函数的防抖和节流
weixin_43795084的博客
11-28 277
函数的防抖和节流是个啥，在知乎上看到一篇非常形象的文章，这里挂上链接 https://zhuanlan.zhihu.com/p/72923073（好！！！） 防抖： 为了说明问题，假设一个场景：鼠标滑过一个div，触发onmousemove事件，它内部的文字会显示当前鼠标的坐标。每当我们的鼠标移动，都会触发事件，展示新的坐标。抖的意思其实就是‘执行’，而我们为了防止函数过于频繁的执行，使其只在我们停止移动的时候执行一次，这个时候我们就需要用到函数的防抖了。 ...
防抖、节流、重绘、重排(回流)
weixin_45039579的博客
05-27 360
简单记录下关于这四个东西的笔记 防抖 //触发高频事件后n秒内只执行一次，如果n秒内再次触发就重计算时间 //主要是清除一个计时器再设置新的计时器 var timer = null; function reborn(){ clearTimeout(timer); //如果500ms内多次调用，只执行最后一次 timer = setTimeout(function(){ //触发函数 console.log('防抖'); }, 500) }; 节流 //触发高频事件后n秒内只执行一.
面试题：说一说重排（回流）和重绘以及如何避免重排来提高性能
weixin_50736511的博客
01-14 1205
基本概念 重绘：当页面元素样式改变不影响元素在文档流中的位置时（如background-color，border-color，visibility），浏览器只会将新样式赋予元素并进行重新绘制操作。 回流：当渲染树render tree中的一部分或全部因为元素的规模尺寸、布局、隐藏等改变时，浏览器重新渲染部分DOM或全部DOM的过程 回流必将引起重绘，而重绘不一定会引起回流。 什么时候会触发回流或重绘？ 添加或删除可见的DOM元素 元素的位置发生变化 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽
重温前端之防抖节流/重绘回流
imoo的笔记
08-20 301
这两对没什么关系，只是想写在一起 防抖 定义：一段时间内多次触发时，最后才进行执行 应用举例：图片懒加载时的滚动 写法 function debounce(fn, delay) { let timer = null; return function () { timer ? cleanTimeout(timer) : (timer = setTimeout(fn, delay)); }; } 节流 定义：执行过后，间隔一段时间才能执行（冷却） 应用举例：部分按钮 写法 functi.
重绘 回流 防抖 节流看一遍就懂
swoly2894265391的博客
04-29 543
重绘： 元素样式的改变（但宽高、大小、位置等不变） 讲人话: 只改变自身样式，不会影响到其他元素 回流： 元素的大小或者位置发生改变（当页面布局和几何信息发生改变的时候），导致渲 dom树重新计算布局和渲染 讲人话: 元素的位置发生变化；元素的尺寸发生变化、内容发生变化等等 需重新渲染 注意:回流一定会触发重绘，而重绘不一定会回流 如何避免 避免使用table布局 不要使用css计算calc 动画效果放在position为abso...
JavaScript防抖与节流函数实现详解
`scroll`、窗口尺寸调整 `resize`、鼠标移动 `mousemove`、输入框输入 `input` 等）若不加以控制，会导致回调函数被频繁执行，从而引发性能问题，例如页面卡顿、内存占用过高、重绘与回流过于频繁等。为了解决这一...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值