一、概论

性能优化是一个综合性问题，没有标准答案，要求尽量全面
某些问题需要单独考察手写防抖、节流

二、原则

1.通用原则—用空间换时间

（1）多使用内存、缓存

chrome浏览器快的原因就是，每打开一个标签页，开启一个进程

（2）减少网络请求耗时

三、具体方法

1.加载更快

（1）减少资源体积—压缩代码

a. js，css、图片压缩

（2）减少访问次数—合并代码、ssr服务器端渲染、缓存

a. 合并代码

一个js文件引入了几个模块，最后打包成一个文件,可以较少网络请求次数。

图片合并成一个雪碧图

b.SSR服务器端渲染
将网页和数据一起加载，一起渲染。不用先加载网页，再加载数据，再渲染数据。
c.缓存
使用缓存资源，减少请求次数
webpack：静态资源根据内容添加hash后缀，内容不变，文件名url改变，后续访问会触发http缓存机制，返回304状态码，读取缓存资源。内容改变，发起新的http请求。

（3）使用更快的网络—cdn

更具区域解析就近服务器的ip地址，更快访问资源。
百度很多静态资源都用了cdn服务

2.渲染更快

（1）将css代码放在head标签中，js代码放在body后面

（2）尽早执行js，在DOMContentLoaded时期执行js代码

（3）懒加载（图片来加载，上滑加载更多）

a.很长的新闻页，先加载前两张图片，后面的图片先展示一个体积很小的预览图，当判断图片进入视口后改变图片src属性，加载原图。

（4）对dom查询做缓存、多次dom操作整合成一次进行

dom操作比较耗性能，遍历查询dom时，先将dom节点用变量保存，避免每次都去查询dom节点
image.png

（5）节流throttle和防抖debounce—是渲染更流畅

a.防抖函数—用户频繁操作停止时触发

  1. // 基本逻辑
  2. function debounce(){
  3.   let timer = null; // 消除之前可能存在的定时任务
  4.   if(timer) timer = null
  5.   timer = setTimeout(()=>{
  6.     console.log('function called')
  7.     timer = null // 执行完毕后，清楚定时任务
  8.   },500)
  9. }
  11. // 封装防抖函数
  12. function(callback, waitingTime = 500){
  13.   let timer = null;
  14.   return function (){
  15.     if(timer) timer = null // 消除之前可能存在的定时任务
  16.     timer = setTimeout(()=>{
  17.       callback.apply(this,...arguments)
  18.       timer = null // 执行完毕后，清楚定时任务
  19.     },waitingTime)
  20.   }
  21. }

b.用户操作过程中，某段时间内只触发一次。
拖拽时，每隔100ms触发一次

  1. function throttle(callback,waitingTime,callImmediately){
  2.   let timer = null,
  3.        isFirstTime = true;
  4.   return function(){
  5.     if(isFisrtTime){
  6.       callback.aplly(this,arguments)
  7.     }else{
  8.       if(timer) return
  9.       timer = setTimeout(()=>{
  10.         callback.aplly(this,arguments)
  11.         timer = null
  12.       },waitingTime)
  13.     }
  14.   }
  15. }