页面加载时间监控、前端性能优化

页面加载时间监控

比较常用的有

const timeDiff = performance.timing
console.log('DNS解析时间:', timeDiff.domainLookupEnd - timeDiff.domainLookupStart)
console.log('TCP建立连接时间:', timeDiff.connectEnd - timeDiff.connectStart)
console.log('白屏时间:', timeDiff.responseStart - timeDiff.navigationStart)
console.log('首屏时间:', new Date() - performance.timing.responseStart)

前端性能优化

合并压缩js、css文件
延迟加载不需要的资源
使用sprites合并细碎的小图片
使用内嵌的base64图片代替url
对静态资源使用CDN
合理配置缓存策略
服务端启用gzip
支持http2
减少阻塞脚本，使用async
ssr后端渲染

减少重定向

合并与压缩

• 合并多个 HTTP 请求为一个
• 合并 js
• 合并 css
• 合并多个图片为一张
• 压缩图片

注意作用域

• 避免全局查找

// 用 len = arr.length 优化性能
let arr = []
for (let i = 0, len = arr.length; i < len; i++) {
    // do something
}

• 避免 with 语句

优化循环

• 减值迭代 —— 由大到小的循环
• 简化终止条件 —— 避免终止条件一次次从外围查询获取
• 简化循环体
• 使用后测试循环（do-while 循环）—— 避免了最初终止条件的计算

避免双重解释

• 不要使用 eval('alert("hello")') 、new Function('alert("hello")')、setTimeout('alert("hello")', 500)

最小化语句数

• 多个变量合一声明
• 插入迭代值

var name = value[i++]

• 使用数组和对象字面量定义，不要 new

减少事件函数和 DOM 操作

• 限制页面事件处理程序和函数数量，数量太多会占用大量的内存
• 多个事件列表可以采用事件委托的形式合一
• 建议在浏览器页面卸载时，移除页面所有事件处理程序
• 使用虚拟 DOM 一次添加执行（也可以采用 ）

// 不好的方式
var elem = $('#elem');
for (var i = 0; i < 100; i++) {
 elem.append('
element '+i+'
');
}

// 好的方式
var elem = $('#elem' ),
arr = [];
for (var i = 0;  i < 100; i++) {
  arr.push('
element ' +i+'
' );
}
elem.append(arr. join(''));

// 对于精准节点的 DOM 操作可以添加到 frag 上，最后一步再添加到页面
let frag = document.createDocumentFragment()

DNS 优化

• 尽量多个引入文件采用统一域名引入（可以储存后端或是本地静态），以减少 DNS 解析时间
• 上一条无法满足，采用 DNS 预加载方式引入

<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
<link rel="dns-prefetch" href="http://nsclick.baidu.com" />
<link rel="dns-prefetch" href="http://hm.baidu.com" />
<link rel="dns-prefetch" href="http://eiv.baidu.com" />

优化TCP协议

• TCP连接复用，使用keep-alive：连接回复加上请求头：keep-alive。第一次请求不断开，第二次请求复用
• 使用http 2.0版本：多路复用，连接复用率会更高

优化接受响应

• 设置Etags：浏览器重复与请求服务器一样的文件，ETag响应304。
• Gzip压缩大文件 使用macos gzip，npm server gzip gzip 文件名
• 其响应头为 Content-Encodinging：gzip，先压缩接收到再解压缩。缺点：耗费浏览器CPU，权衡

组件懒加载

• vue： const xxx = () => import('./components/xxx.vue')

对于频繁调用的使用节流、防抖

  // 防抖
  {
    // 函数防抖
    {
      let timer = null
      window.onscroll = function () {
        clearTimeout(timer)
        timer = setTimeout(function () {
          console.log(1)
        }, 200)
      }
    }
    // 闭包防抖
    {
      function throttle (fn, delay) {
        let timer = null
        return function () {
          clearTimeout(timer)
          timer = setTimeout(fn, delay)
        }
      }

      window.onscroll = throttle(function () {
        console.log(2)
      }, 200)
    }
  }

  // 节流
  {
    // 时间戳实现
    {
      let throttle = function (fn, delay) {
        let prev = Date.now()
        return function () {
          let context = this
          let args = arguments
          let now = Date.now()
          if (now - prev >= delay) {
            fn.apply(context, args)
            prev = Date.now()
          }
        }
      }

      window.onscroll = throttle(function () {
        console.log(3)
      }, 1000)
    }
    // 定时器实现
    {
      let throttle = function (fn, delay) {
        let timer = null
        return function () {
          let context = this
          let args = arguments
          if (!timer) {
            timer = setTimeout(function () {
              fn.apply(context, args)
              timer = null
            }, delay)
          }
        }
      }

      window.onscroll = throttle(function () {
        console.log(4)
      }, 1000)
    }
  }