代码层面

执行

• 避免内存泄漏（全局变量、闭包、DOM 元素的引用、定时器、控制台打印）
• 有繁重计算的代码抽离到 Web Worker

渲染

• 分批渲染使用 requestAnimationFrame 代替 setTimeout
• 页面添加多个元素时，使用 DocumentFragment 组装后一次性添加到页面
• 页面添加多个元素时，使用 requestIdleCallback 函数将在浏览器空闲时期被调用

function performanceChunk(data) {
  let i = 0
  function _run() {
    if (i >= data.length)
      return
    requestIdleCallback((idle) => {
      while (idle.timeRemaining() > 0 && i < data.length) {
        const div = document.createElement('div')
        div.textContent = data[i]
        document.body.appendChild(div)
        i++
      }
      _run()
    })
  }
  _run()
}

脚本

• 使用 async 或 defer 属性加载脚本
• 使用 preload 或 prefetch 属性加载脚本