网页性能优化的一些方法
2023-05-06 01:22:12
优化网页性能，也就是多使用内存和缓存，减少CPU的计算次数，减少网络请求次数。
加载资源优化对静态资源进行压缩合并对静态资源进行缓存使用CDN让资源加载更快css精灵使用SSR(server side render)后端渲染，数据直接输出到html中渲染优化css放在html前面，js放后面懒加载缓存dom查询 （减少dom查询，对dom查询做缓存）合并dom操作 （减少dom操作，多个操作尽量合并在一起执行）函数去抖，函数节流（防止用户短时间内频繁操作dom，减少CPU计算）尽早执行操作（DOMContentLoaded）window.addEventListener(load,function(){
//页面的全部资源（包括图片和视频）加载完成后才会执行
})
document.addEventListener(DOMContentLoaded,function(){
//DOM渲染完即可执行，此时图片、视频还可能没有加载完
})
函数节流 throttle 和 去抖 debounce：
var div1=document.getElementById(div1);
var timer;
div1.addEventListener(keyup,function(){
if(timer){clearTimeout(timer);}
timer=setTimeout(function(){
满足条件执行函数
},100)
})
----------------------------------------------------------
var lastTime=null;
div1.addEventListener(keyup,function(){
var nowtime=new Date();
if(nowtime-lastTime > 自定义时间间隔){
满足条件执行函数
lastTime=nowTime;
}
})
函数节流 throttle 的应用场景？哪些时候我们需要间隔一定时间触发回调来控制函数调用频率？（延迟多久触发，必须超过delay安全期才触发。类似于坐电梯的过程，只要有人按就延迟上楼，电梯等待的事件相当于delay安全期）
元素的拖拽功能（mousemove）射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）计算鼠标移动的距离（mousemove）Canvas 模拟画板功能（mousemove）搜索联想（keyup）监听滚动事件---判断是否到页面底部时，自动加载更多资源：给 scroll 加了 debounce 后，只有用户停止滚动后，才会判断是否到了页面底部；如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次函数去抖 debounce 的应用场景？哪些时候对于连续的事件响应我们只需要执行一次回调？（多久触发一次）
每次 resize/scroll 触发统计事件文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，验证一次就好）函数节流和函数去抖的核心其实就是限制某一个方法被频繁触发，而一个方法之所以会被频繁触发，大多数情况下是因为 DOM 事件的监听回调，而这也是函数节流以及去抖多数情况下的应用场景。
参考：JavaScript 函数节流和函数去抖应用场景辨析 · Issue #20 · hanzichi/underscore-analysis
以上就是关于《网页性能优化的一些方法》的全部内容，本文网址：https://www.7ca.cn/baike/22519.shtml，如对您有帮助可以分享给好友，谢谢。
声明