function debounce(fn, wait) {var timeout = null;//定义一个定时器return function() {if(timeout !== null)clearTimeout(timeout);//清除这个定时器timeout = setTimeout(fn, wait);}}// 处理函数function handle() {console.log(Math.random()); }// 滚动事件window.addEventListener('scroll', debounce(handle, 1000));如上所见，当持续触发scroll函数，handle函数只会在1秒时间内执行一次，在滚动过程中并没有持续执行，有效减少了性能的损耗 。
防抖和节流能有效减少浏览器引擎的损耗，防止出现页面堵塞卡顿现象 。
总结上面我们主要从加载资源优化、渲染优化、浏览器缓存策略、图片优化、节流与防抖这几个方面，讲述了我们平常不易掌握和了解的性能优化知识点，希望大家可以了解学习掌握并加以应用，让我们的产品体验更佳，精益求精，做最好的产品和自己 。
推荐阅读
- 性能出色，纯CSS实现的loading动画——Loaders.css
- 你值得拥有的 11 个前端开发利器
- Web前端学习入门之HTTP协议知识整理
- 新网站上线影响网站优化排名的四个因素
- 10个MySQL使用技巧及30个搜索优化方法
- Linux性能调优，从优化思路说起
- 搜索引擎优化之关键字的选择
- 一招开启win10“最强”模式，让你的电脑性能急速飙升！
- 48条高效率的PHP优化写法
- 数据库8种优化方式