前台性能优化策略

从哪方面入手
···加载页面和静态资源
···页面渲染

加载资源优化
···静态资源的压缩合并
···静态资源缓存
···使用CDN资源加载更快
资源合并列如：

// 将可以合并的文件，合并为一个js文件进行加载
<script src="./a-util.js"></script>
<script src="./b-util.js"></script>
<script src="./c-util.js"></script>

<script src="./abc-util.js"></script>

渲染优化
···css放前面，js放后面（顺序问题）
···懒加载（图片懒加载、下拉加载更多等等方式）

<img id="images" src="./view.png" alt="" data-realsrc="abc.png" />
<script>  // 其实真正加载的是data-realsrc属性中的图片
    var img = document.getElementById('images')
    img.src = img.getAttribute('data-realsrc')
</script>

···减少DOM查询，对DOM查询进行缓存

    // 为缓存DOM查询
    var i
    for (i = 0; i < document.getElementsByTagName('p').length; i++) {
        // ...
    }
    // 缓存了 DOM 查询
    var i
    var domList = document.getElementsByTagName('p')
    for (i = 0; i < domList.length; i++) {
        // ...
    }

···减少对DOM的操作，多个操作尽量合并再一起执行

// 合并dom操作
    var listNode = document.getElementById('list')
    var frag = document.createDocumentFragment() //定义一个节点片段
    var k, li
    for (k = 0; k < 10; k++) {
        li = document.getElementById('li')
        li.innerHTML = `list item ${k}`
        frag.appendChild(li) // 在定义的这个片段中添加10个li变迁
    }
    listNode.appendChild(frag) // 

···事件节流（列如：延时请求，延时操作等等）

// ajax请求节流函数
export function debounce(func, delay) {
  let timer

  return function (...args) {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      func.apply(this, args)
    }, delay)
  }
}

···今早执行操作（如DOMContentLoaded）