学习防抖和节流

目录

一、防抖和节流是什么？

二、Lodash

三、Underscore

四、两者区别

总结

---

一、防抖和节流是什么？

        防抖和节流是前端开发中常用的两种性能优化技术，用于控制事件的触发频率，以提高性能和用户体验。

        防抖（Debouncing）是指在事件触发后等待一段时间，如果在这段时间内再次触发了相同的事件，则重新计时。这样可以确保只有在事件触发后的一段时间内没有再次触发时，才执行相应的操作。防抖常用于处理频繁触发的事件，如窗口大小调整、输入框输入等，以减少不必要的操作和网络请求。

        节流（Throttling）是指限制事件的触发频率，在一定时间间隔内只执行一次事件处理函数。当事件触发后，首先执行一次事件处理函数，然后在指定的时间间隔内忽略后续的事件触发，直到时间间隔过去后再次触发。节流常用于处理高频率触发的事件，如滚动到底部事件、鼠标移动事件等，以减少函数的执行次数，提高性能。

        防抖和节流可以使用 JavaScript 函数来实现，也可以使用相关的库或框架提供的函数来方便地应用于项目中。常用的库包括 Lodash、Underscore 等，它们提供了丰富的工具函数，包括防抖和节流函数。

那么其他常用的技术还有：

1. 压缩和合并资源：使用工具压缩和合并 CSS、JavaScript 和图片等静态资源，减少网络请求次数和文件大小。
2. 使用缓存：利用浏览器缓存和服务器缓存来减少资源的重复加载，提高页面加载速度。
3. 懒加载：延迟加载非关键内容，如图片、视频等，当用户需要时再加载，减少页面的初始加载时间。
4. 减少 HTTP 请求：合并 CSS 和 JavaScript 文件，使用 CSS Sprites 或 Icon Fonts 来减少图像请求，减少页面的 HTTP 请求次数。
5. 图片优化：使用适当的图片格式和压缩技术，如使用 WebP 格式、使用图片压缩工具等，减小图片文件的大小。
6. 前端缓存：使用 localStorage 或 sessionStorage 对频繁使用的数据进行本地缓存，减少对服务器的请求。
7. 使用异步加载：将 JavaScript 脚本放置在页面底部，使用 async 或 defer 属性异步加载脚本，避免阻塞页面的渲染。
8. 代码优化：减少 DOM 操作、避免过多的重绘和回流，使用节流和防抖等技术来优化事件处理。
9. 代码分割和按需加载：将代码分割为多个模块，按需加载，减少初始加载时间。
10. 使用 CDN：将静态资源托管到 CDN 上，使用户可以从离其最近的服务器获取资源，加快资源加载速度。
11. 响应式设计：使用响应式布局和媒体查询，根据不同设备的屏幕大小和分辨率，提供合适的布局和样式，提高页面的适应性和性能。

这些是常见的前端性能优化技术，根据具体的项目和需求，可以结合使用不同的技术来提升网页的加载速度和性能。

关于防抖和节流，这里还有两篇详解的文章比较完整，学习并记录一下：

什么是防抖和节流?

防抖和节流

二、Lodash

官网：Lodash 

中文网：Lodash 简介 | Lodash中文文档 | Lodash中文网

        这里有这个库的安装和介绍，这个库还是挺有用的，项目里常用的深拷贝，防抖，节流等，可以在需要的时候学习使用，方便开发。

​

三、Underscore

地址：Underscore · GitHub

        Underscore.js 是一个 JavaScript 实用工具库，提供了许多用于简化和增强 JavaScript 编程的函数和方法。它提供了一组函数，用于操作数组、集合、对象、函数等，以及提供了一些常用的实用工具函数。

Underscore.js 的功能包括但不限于：

1. 集合操作：包括遍历、过滤、映射、查找、排序等操作。
2. 数组操作：提供了一系列操作数组的方法，如过滤、查找、排序等。
3. 对象操作：包括对象克隆、合并、扩展等操作。
4. 函数操作：提供了一些对函数进行处理的方法，如绑定上下文、延迟执行等。
5. 实用工具函数：提供了一些常用的实用工具函数，如类型判断、节流函数、深拷贝等。

Underscore.js 是一个轻量级的库，可以很方便地集成到您的项目中，提供了简洁和强大的函数集，能够提升开发效率和代码可读性。

---

四、两者区别

如下：

1. 大小和性能：Lodash用的人很多，更小且更快，其针对性能进行了优化，并且有更多的功能和扩展。

2. 兼容性：Underscore.js 支持更广泛的浏览器和环境，包括一些旧版本的浏览器（因为比较老嘛）。Lodash 则可更好地支持 ES6+ 的功能。

综上，

如果注重性能和现代化特性，并且项目环境支持，推荐使用 Lodash。

如果需要更广泛的兼容性，并且对库的大小和性能要求不高，Underscore.js 也是一个不错的选择。(别人说的）

总结

以上就是关于防抖和节流的记录啦！总算深入的学习了。