网页性能优化的一些方法（网页性能优化 前端怎么设置）

6 \+ U0 t% m) S! @5 \

优化网页性能，也就是多使用内存和缓存，减少CPU的计算次数，减少网络请求次数加载资源优化对静态资源进行压缩合并对静态资源进行缓存使用CDN让资源加载更快css精灵使用SSR(server side render)后端渲染，数据直接输出到html中。

8 O; x9 f$ H0 Z6 e, x

渲染优化css放在html前面，js放后面懒加载缓存dom查询 （减少dom查询，对dom查询做缓存）合并dom操作 （减少dom操作，多个操作尽量合并在一起执行）函数去抖，函数节流（防止用户短时间内频繁操作dom，减少CPU计算）

4 d% X3 W' p3 n6 @, j' i: t0 W

尽早执行操作（DOMContentLoaded）window.addEventListener(load,function(){//页面的全部资源（包括图片和视频）加载完成后才会执行 8 m# f5 M0 y/ ^3 F })document

.addEventListener(DOMContentLoaded,function(){//DOM渲染完即可执行，此时图片、视频还可能没有加载完 })函数节流 throttle 和 去抖 debounce：

vardiv1=document.getElementById(div1);vartimer;div1.addEventListener(keyup,function(){if(timer){clearTimeout

(timer);}timer=setTimeout(function(){满足条件执行函数},100)})----------------------------------------------------------

varlastTime=null;div1.addEventListener(keyup,function(){varnowtime=newDate();if(nowtime-lastTime>自定义时间间隔

0 F6 ?" [+ o8 N& Q" H9 j( N& [

){满足条件执行函数lastTime=nowTime;}})函数节流 throttle的应用场景？哪些时候我们需要间隔一定时间触发回调来控制函数调用频率？（延迟多久触发，必须超过delay安全期才触发类似于坐电梯的过程，只要有人按就延迟上楼，电梯等待的事件相当于delay安全期）。

元素的拖拽功能（mousemove）射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）计算鼠标移动的距离（mousemove）Canvas 模拟画板功能（mousemove）

$ B/ j, U4 t0 z( i1 e8 i

搜索联想（keyup）监听滚动事件---判断是否到页面底部时，自动加载更多资源：给 scroll 加了 debounce 后，只有用户停止滚动后，才会判断是否到了页面底部；如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次

函数去抖 debounce 的应用场景？哪些时候对于连续的事件响应我们只需要执行一次回调？（多久触发一次）每次 resize/scroll 触发统计事件文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，验证一次就好）

% Y9 d! d& t8 v9 J2 r3 [# i

函数节流和函数去抖的核心其实就是限制某一个方法被频繁触发，而一个方法之所以会被频繁触发，大多数情况下是因为 DOM 事件的监听回调，而这也是函数节流以及去抖多数情况下的应用场景参考：JavaScript 函数节流和函数去抖应用场景辨析 · Issue #20 · hanzichi/underscore-analysis。

9 _' N: `5 x2 ], ?2 ` " z2 u. Q; K# k5 ?

楼主辛苦了，整理这么多内容，必须点赞收藏

楼主太厉害了，整理得这么详细，必须支持

这个分享太实用了，刚好能用到，感谢楼主！

完全赞同，我也是这么认为的，英雄所见略同～

刚好遇到类似问题，看完这个帖子心里有底了