一、防抖和节流是什么?
防抖和节流是前端开发中常用的两种性能优化技术,用于控制事件的触发频率,以提高性能和用户体验。
防抖(Debouncing)是指在事件触发后等待一段时间,如果在这段时间内再次触发了相同的事件,则重新计时。这样可以确保只有在事件触发后的一段时间内没有再次触发时,才执行相应的操作。防抖常用于处理频繁触发的事件,如窗口大小调整、输入框输入等,以减少不必要的操作和网络请求。
节流(Throttling)是指限制事件的触发频率,在一定时间间隔内只执行一次事件处理函数。当事件触发后,首先执行一次事件处理函数,然后在指定的时间间隔内忽略后续的事件触发,直到时间间隔过去后再次触发。节流常用于处理高频率触发的事件,如滚动到底部事件、鼠标移动事件等,以减少函数的执行次数,提高性能。
防抖和节流可以使用 JavaScript 函数来实现,也可以使用相关的库或框架提供的函数来方便地应用于项目中。常用的库包括 Lodash、Underscore 等,它们提供了丰富的工具函数,包括防抖和节流函数。
那么其他常用的技术还有:
- 压缩和合并资源:使用工具压缩和合并 CSS、JavaScript 和图片等静态资源,减少网络请求次数和文件大小。
- 使用缓存:利用浏览器缓存和服务器缓存来减少资源的重复加载,提高页面加载速度。
- 懒加载:延迟加载非关键内容,如图片、视频等,当用户需要时再加载,减少页面的初始加载时间。
- 减少 HTTP 请求:合并 CSS 和 JavaScript 文件,使用 CSS Sprites 或 Icon Fonts 来减少图像请求,减少页面的 HTTP 请求次数。
- 图片优化:使用适当的图片格式和压缩技术,如使用 WebP 格式、使用图片压缩工具等,减小图片文件的大小。
- 前端缓存:使用 localStorage 或 sessionStorage 对频繁使用的数据进行本地缓存,减少对服务器的请求。
- 使用异步加载:将 JavaScript 脚本放置在页面底部,使用 async 或 defer 属性异步加载脚本,避免阻塞页面的渲染。
- 代码优化:减少 DOM 操作、避免过多的重绘和回流,使用节流和防抖等技术来优化事件处理。
- 代码分割和按需加载:将代码分割为多个模块,按需加载,减少初始加载时间。
- 使用 CDN:将静态资源托管到 CDN 上,使用户可以从离其最近的服务器获取资源,加快资源加载速度。
- 响应式设计:使用响应式布局和媒体查询,根据不同设备的屏幕大小和分辨率,提供合适的布局和样式,提高页面的适应性和性能。
这些是常见的前端性能优化技术,根据具体的项目和需求,可以结合使用不同的技术来提升网页的加载速度和性能。
关于防抖和节流,这里还有两篇详解的文章比较完整,学习并记录一下:
二、Lodash
官网:Lodash
中文网:Lodash 简介 | Lodash中文文档 | Lodash中文网
这里有这个库的安装和介绍,这个库还是挺有用的,项目里常用的深拷贝,防抖,节流等,可以在需要的时候学习使用,方便开发。
三、Underscore
Underscore.js 是一个 JavaScript 实用工具库,提供了许多用于简化和增强 JavaScript 编程的函数和方法。它提供了一组函数,用于操作数组、集合、对象、函数等,以及提供了一些常用的实用工具函数。
Underscore.js 的功能包括但不限于:
- 集合操作:包括遍历、过滤、映射、查找、排序等操作。
- 数组操作:提供了一系列操作数组的方法,如过滤、查找、排序等。
- 对象操作:包括对象克隆、合并、扩展等操作。
- 函数操作:提供了一些对函数进行处理的方法,如绑定上下文、延迟执行等。
- 实用工具函数:提供了一些常用的实用工具函数,如类型判断、节流函数、深拷贝等。
Underscore.js 是一个轻量级的库,可以很方便地集成到您的项目中,提供了简洁和强大的函数集,能够提升开发效率和代码可读性。
四、两者区别
如下:
-
大小和性能:Lodash用的人很多,更小且更快,其针对性能进行了优化,并且有更多的功能和扩展。
-
兼容性:Underscore.js 支持更广泛的浏览器和环境,包括一些旧版本的浏览器(因为比较老嘛)。Lodash 则可更好地支持 ES6+ 的功能。
综上,
如果注重性能和现代化特性,并且项目环境支持,推荐使用 Lodash。
如果需要更广泛的兼容性,并且对库的大小和性能要求不高,Underscore.js 也是一个不错的选择。(别人说的)
总结
以上就是关于防抖和节流的记录啦!总算深入的学习了。