javascript复习：性能优化

性能优化原则

• 多食用内存，缓存或其他方法
• 减少CPU 计算量，减少网络加载耗时
• （适用于所有编程的性能优化 —- 空间换时间）

从何入手

• 让加载更快
  • 减少资源体积，压缩代码
  • 减少访问次数：合并代码，SSR 服务器端渲染，缓存
  • 使用更快的网络： CDN
• 让渲染更快
  • CSS 放在head，JS 放在body 最下面
  • 尽早开始执行JS，用DOMContentLoaded 触发
  • 懒加载（图片懒加载，上滑加载更多）
  • 对 DOM 查询进行缓存
  • 频繁DOM 操作，合并到一起插入DOM 结构
  • 节流 throttle，防抖 debounce

缓存

• 静态资源加hash后缀，根据文件内容计算hash
• 文件内容不变，则hash不变，则url不变
• url 和文件不变，则会自动触发http缓存机制，返回304

SSR

• 服务器端渲染：将网页和数据一起加载，一起渲染
• 非SSR（前后端分离）：先加载网页，再加载数据，再渲染数据
• 早先的 jsp,asp,php，现在的vue React SSR，都是SSR

防抖 debounce

• 监听一个输入框，文字变化后触发change事件
• 直接用keyup事件，则会频繁触发change事件
• 防抖：用户输入完毕触发change事件

  const input = document.getElementById('input');
  
  function debounce(fn, delay = 500) {
      // timer 是闭包中的
      let timer = null;
      return function () {
          if (timer) {
              clearTimeout(timer);
          }
  
          timer = setTimeout(() => {
              fn.apply(this, arguments);
              timer = null;
          }, delay);
      }
  }
  
  input.addEventListener('keyup', debounce(() => {
      console.log(input.value);
  }, 600));

节流 throttle

• 拖拽一个元素，要随时拿到该元素被拖拽的位置
• 直接用 drag 事件，则会频繁触发，很容易导致卡顿
• 节流：无论拖拽速度多快，都会每隔100ms触发一次

const div1 = document.getElementById('div1');
function throttle(fn, delay = 100) {

    // timer 是闭包中的
    let timer = null;
    return function () {
        if (timer) {
            return;
        }

        timer = setTimeout(() => {
            fn.apply(this, arguments);
            timer = null;
        }, delay);
    }
}

div1.addEventListener('drag', throttle((e) => {
    console.log(e);
}, 100));