18，页面优化

// 一、图片
1，修饰类的图片有css代替
2，根据具体屏幕，用小图代替
3，小图使用base64格式
4，雪碧图（多个图整合在一起）
5，webP有更好的压缩算法（但兼容性差一点）
6，小图用png或者svg（SVG 使用 XML 格式定义图像。可缩放矢量图），大图用jpg

// 二、域名的预解析
<link rel="dns-prefetch" href="//yuchengkai.cn">
dns-prefetch​作用简单说明就是当你浏览网页时，
浏览器会加载网页时对网页中的域名进行解析缓存，
这样在你单击当前网页链接无需DNS解析，减少浏览者等待时间

// 三、预加载
<link rel="preload" href="http://example.com">
不在首页用到，但是后面极大可能会用，而且很大，就提前去加载。不会阻塞onload事件

// 四、预渲染
<link rel="prerender" href="http://example.com">
在后台提前渲染（后面大概率会打开。不然会浪费）


// 五、懒执行
首屏优化。耗时逻辑并不需要在首屏就使用的，就可以使用懒执行。
通过事件或定时器触发

// 六、懒加载
懒加载就是将不关键的资源延后加载。
比如图片，先放一个src占位。对应的图片链接放在自定义区域，只有执行到该区域后，才替换属性-src。video也可以这样，显示区域才去加载

// 七、CDN

// 三、节流。（scroll的时候不希望一直发请求。而是间隔或者停下的时候发）
    let now = +new Date()
    // 将当前时间和上一次执行函数时间对比
    // 如果差值大于设置的等待时间就执行函数
    if (now - lastTime > wait) {
      lastTime = now
      func

// 四、防抖
    return function(...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait)