节流指的都是某个函数在一定时间间隔内只执行第一次回调。举个常见的节流案例：我们把某个表单的提交按钮——button 设成每三秒内最多执行一次 click 响应；当你首次点击后，函数会无视之后三秒的所有响应；三秒结束后，button 又恢复正常 click 响应功能，以此类推。
在写JS时，这两个函数比较常见，有时候傻傻分不清用哪个，或者说知道代码要怎么写，但要说出它究竟是节流函数还是防抖函数时一脸楞逼。今天有一个同学分享了这两个的区分，我也来回顾一下，加深一下印象，以便日后用到时心里有底。PS：百度和谷歌搜索前几个介绍都是相反介绍，本文为原创，如有雷同纯属抄袭我的。
https://www.lodashjs.com/docs/lodash.throttle
b.输入框事件：验证手机号或者邮箱，用户输入时不断触发键盘事件，应该等用户结束输入之后，以最后一次输入为准
偶然看到一个前端小伙伴写了篇“防抖与节流”，我就想啊，咱后端不也有些喜欢抖来抖去的嘛，我就总结一下吧。 想到几个写几个啊，如果还想看别的抖，可以在评论区留言哦，虽然评论不少，但是我每条都会去看，看到我就加。
对象的深度克隆是很困难的。 JSON.parse(JSON.stringify(obj)) 可以实现对象的深度克隆。但有如下缺点:
一、HTML、CSS基础、JavaScript语法基础。 二、JavaScript语法进阶。包括：作用域和闭包、this和对象原型等。 三、ES6语法。这部分属于JS新增的语法， promise、async 等内容要尤其关注。 四、HTML5和CSS3。要熟悉其中的新特性。 五、canvas。加分项。 六、移动Web开发、Bootstrap等。要注意移动开发中的适配和兼容性问题。 七、前端框架：Vue.js和React。这两个框架至少要会一个。入门时，建议先学Vue.js，上手相对容易。但无论如何，同时掌握 Vue 和 React 才是合格的前端同学。 八、Node.js。属于加分项。 九、自动化工具：构建工具 Webpack、构建工具 gulp、CSS 预处理器 Sass 等。注意，Sass 比 Less 用得多，gulp 比 grunt 用得多。 十、前端综合：HTTP协议、跨域通信、安全问题（CSRF、XSS）、浏览器渲染机制、异步和单线程、页面性能优化、防抖动（Debouncing）和节流阀（Throtting）、lazyload、前端错误监控、虚拟DOM等。 十一、编辑器相关。Sublime Text 是每个学前端的人都要用到的编辑器。另外，前端常见的IDE有两个：WebStorm 和 Visual Studio Code。WebStorm 什么都好，可就是太卡顿；VS Code就相对轻量很多。 十二、TypeScript（简称TS）。ES 是 JS 的标准，TS 是 JS 的超集。TS属于进阶内容，建议把上面的基础掌握之后，再学TS。
用JS操作DOM，是比较慢的。为什么呢？首先，补充一下浏览器相关的知识。下图为浏览器结构：
记录工作和学习中的一些可能会被面试问到的JS内部实现基础，由于笔者水平有限，提供出的答案不一定准确，但是原理尽可能会讲清楚，以后会进行逐步添加。 bind实现 bind实现其实是内部调用apply或者call来实现对象的this绑定，具体实现可以参考如下： var o = { a: 1, b: 2, print: function() { console.log(this.a); console.log(arguments); } }; va
本文实现方法都是看效果倒推实现方法，并进行一些拓展和思考，和源码无关。lodash这个库的文档更像一个题库，给出了题目让我们刷题的
最近在node中使用?.可选链运算符， 报错了，(Obj层级深时，避免多层if判断) 查了了一下是因为node的版本号太低了（12.18.2），需要升级到14以上才能使用可选链运算符 那如果不想升级n
防止一个事件频繁触发回调函数的方式： 防抖动：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。 节流：使得一定时间内只触发一次函数。 它和防抖动最大的区别就是，节流函数不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而防抖动只是在最后一次事件后才触发一次函数。 原理是通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。
本文实现方法都是看效果倒推实现方法，并进行一些拓展和思考，和源码无关。lodash这个库在这里更像一个题库，给我们刷题的
节流字面意思就是节省流动，这里的流动映射到js优化中可以简单的理解为操作，节流就是减少操作的进行，比如我们滚动页面的时候，如果不做节流的操作，假设我们滚动一次就请求一次函数，函数单一的还好， 如果函数本身就执行的比较麻烦的函数，这个时候我们的页面可能会出现卡死的情况，cpu也吃不消，这个时候我们需要的是，滚动的时候我们加个时间控制，不管你滚动的多快只要不超过我们设置的时间间隔，我都不给你执行即可，这个过程就是节流，那么代码实现就是通过一个闭包加上时间延迟进行实现。
吸顶元素的初始位置一般靠近页面顶部，但与顶部有一定距离，这块区域放的是最醒目的元素，比如Banner图。页面向下滚动超过吸顶元素初始位置时，把吸顶元素固定在顶部
最近在研究页面渲染及web动画的性能问题，以及拜读《CSS SECRET》（CSS揭秘）这本大作。 本文主要想谈谈页面优化之滚动优化。 主要内容包括了为何需要优化滚动事件，滚动与页面渲染的关系，节流与防抖，pointer-events:none 优化滚动。因为本文涉及了很多很多基础，可以对照上面的知识点，选择性跳到相应地方阅读。 滚动优化的由来 滚动优化其实也不仅仅指滚动（scroll 事件），还包括了例如 resize 这类会频繁触发的事件。简单的看看： var i = 0; window.addEv
原理：为传入的 obj 添加临时方法，然后去调用这个临时方法，这样子，这个方法的this就会指向调用它的对象了，最后还需要把临时方法删除掉。
在移动端如果使用局部滚动，意思就是我们的滚动在一个固定宽高的div内触发，将该div设置成overflow:scroll/auto;来形成div内部的滚动，这时我们监听div的onscroll发现触发的时机区分android和ios两种情况，具体可以看下面表格:
我入职第二家公司接到的第一个需求就是修复之前外包做的滚动吸顶效果。我当时很纳闷为何一个滚动吸顶会有 bug，后来我查看代码才发现直接用的是 offsetTop 这个属性，而且并没有做兼容性处理。
防抖(debounce)：触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间
调节器是浏览器中通过限制代码要处理的事件数量来提高性能的常用技术。当你想以受控的速率执行回调时，应该使用调节器，它允许你在每个固定的时间间隔内重复处理过渡状态。
以点击按钮实现1s后盒子宽度增大的效果为例，当我们不停点击按钮时，只会执行最后一次请求：
DOM 是表述 HTML 的内部数据结构，它会将 Web 页面和 JavaScript 脚本连接起来，并过滤一些不安全的内容。HTML 解析器 (HTMLParser) 模块负责将 HTML 字节流转换为 DOM 结构。网络进程接收到响应头后会根据响应头中的 content-type 字段来判断文件的类型，若为 text/html，则为该请求创建一个渲染进程。渲染进程准备好后，网络进程和渲染进程之间会建立一个共享数据的管道，HTML 解析器并不是等整个文档加载完成之后再解析，而是网络进程加载了多少数据，HTML 解析器便解析多少数据。
对用户来说，生鲜电商类的搜索功能通常是用来解决“快速找到满意的商品”的问题。“快速找到满意的商品”中的“快速”和“满意”是关键词，但二者其实在很大程度上是矛盾的。一方面“快速”意味着用户的搜索操作应尽量方便、快捷，也就是要求平台应当尽量少的让用户交互提供信息；但另一方面，“满意”通常又意味着平台需要尽量多的与用户交互。毕竟，平台上的商品数以万计，只有更多的获取用户信息才能更好的明白客户到底想买什么。
当收集浏览器端每个用户核心性能指标时，可通过 web-vitals 收集并通过 sendBeacon 上报到打点系统。
我们在谈及一个页面性能如何时，说的是页面的加载速度快不快，页面交互是否顺畅不卡顿。
当用户频繁的与UI界面操作交互时,例如:窗口调整(触发resize),页面滚动,上拉加载(触发scroll),表单的按钮提交,商城抢购疯狂的点击(触发mousedown),而实时的搜索(keyup,input),拖拽等
1. 防抖(debounce)：触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间 举例：就好像在百度搜索时，每次输入之后都有联想词弹出，这个控制联想词的方法就不可能是输入框内容一改变就触发的，他一定是当你结束输入一段时间之后才会触发。 2.节流(throttle)：高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率 举例：预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。就好像你在淘宝抢购某一件限量热卖商品时，你不断点刷新点购买，可是总有一段时间你点上是没有效果，这里就用到了节流，就是怕点的太快导致系统出现bug。
区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。
如果我们监听这些事件，并按浏览器的触发频率响应，极可能造成页面卡顿、抖动，甚至浏览器崩溃。
# 思路 防抖函数原理：在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时 防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。 # 场景 按钮提交 分支多次提交，只执行最后一次提交 表单验证 需要服务端验证表单的情况，只执行一段连续输入事件的最后一次 搜索联想词 # 实现 /** * @param {Function} fn * @param {Number} delay */ function debounce (fn, delay = 50) {
作者：matrix 被围观: 2,203 次 发布时间：2013-08-13 分类：Wordpress 兼容并蓄 | 无评论 »
防抖和节流函数是我们经常用到的函数，在实际的开发过程中，如 scroll、resize、click、键盘等事件很容易被多次触发，频繁的触发回调会导致页面卡顿和抖动，为了避免这种情况，需要使用节流和防抖的方法来减少无用的操作和网络请求，也是面试中经常遇到的问题，需要牢牢掌握。
21 | Chrome开发者工具：利用网络面板做性能分析 页面是浏览器的核心，浏览器中的所有功能都是服务于页面的，Chrome开发者工具又是调试页面的核心工具。 网络面板 控制器 开始或停止抓包 全局搜索 禁止从cache中加载资源 模拟网络 过滤器 抓图信息：Capture screenshots 详细列表：重点内容 下载信息概要 DOMContentLoaded:页面已经构建好DOM，所需要的HTML、CSS和JS文件都已经下载完成 Load:浏览器已经加载了所有的资源(图片、样式表等) 详
最近在研究页面渲染及web动画的性能问题，以及拜读《CSS SECRET》（CSS揭秘）这本大作。
防抖函数，我们需要做的是在一件事触发的时候设置一个定时器使事件延迟发生，在定时器期间事件再次触发的话则清除重置定时器，直到定时器到时仍不被清除，事件才真正发生。
用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。提供可选的reviver函数用以在返回之前对所得到的对象执行变换(操作)。
应用情景 经典使用情景：js的一些事件，比如：onresize、scroll、mousemove、mousehover等； 还比如：手抖、手误、服务器没有响应之前的重复点击； 这些都是没有意义的，重复的无效的操作，设置对整个系统的影响还可能是致命的，所以我们要对重复点击的事件进行相应的处理！ 节流函数 所谓的节流函数顾名思义，就是某个时刻限制函数的重复调用。 同样节流函数也是为了解决函数重复提交的问题，而防止重复提交的方法，不止节流函数一种实现。 方法汇总 本文整理了我在工作实践当中，觉的防止js重复提交，
作者：Lydia Hallie 译者：前端小智 来源： dev JavaScript 很酷，但是 JS 引擎是如何才能理解我们编写的代码呢?作为 JS 开发人员，我们通常不需要自己处理编译器。然而，了
props与state都是用于组件存储数据的一js对象,前者是对外暴露数据接口,后者是对内组件的状态,它们决定了UI界面显示形态,而若想要用户与界面有些交互动作
本专栏主要是一些实用技巧，带大家灵活运用、并理解其思想；另外后续也会开设js核心知识方面的专栏带大家深入理解js这门语言。由于个人刚完成js阶段的学习，却没有什么项目经验，另外感觉自己基础也不是很好；所以梳理了下js学习过程中个人认为必须掌握的一些知识点、技巧等，以此为后期的学习打下坚实的基础。
前端开发中会遇到一些频繁的事件触发，像是resize、scroll、mousedown、mousemove、keyup、keydown等。
防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行
防抖与节流可谓是面试常见，其实很好理解，下面带你分分钟了解防抖与节流的基本思想与写法。
作者：louiszhai，腾讯增值服务项目管理员工 背景 为了满足日益复杂的小程序活动需求，腾讯增值服务项目组开发了一款Ulink活动小程序，该小程序以游戏社交圈为依托，提供游戏玩家基本的社交功能，如发帖、评论、点赞、分享等。 为了支持这些功能，进行了一系列的性能优化改进。Ulink活动小程序共有5个tab，分别提供关注人的feeds信息、所有用户的精品分享，图文发布入口、消息及个人页，如下所示。 开发过程中折腾了各种各样的挑战和难题。其中以性能问题最为棘手，主要有体现在以下几个方面： 小程序首次访问
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
