1. 优化dns查询

尽量把资源都放在一个网站，如css、js，尽量减少域名，这样就可以减少dns查询

2. 优化TCP连接

• 开启连接复用，在请求头里写keep-alive
• 使用HTTP/2.0的多路复用

3. 发送HTTP请求

• 不滥用cookie，尽量减小cookie体积
• 使用cache-control（缓存），一段时间内不发送请求，用缓存文件
• 同时发送多个请求，如css和js，会同时下载提高效率，但和减少dns查询起冲突，所以文件少的时候，可以把所有资源放一个域名里，减少dns查询，但当文件多的时候可以把每8个文件放同一个域名里，这样8个文件以同时请求，减少了请求时间，

4. 接收响应

• ETag
  服务器检查网页有无更新(md5)，没有更新的话就返回304
• GZip
  用GZip把css、js压缩，再发送

5. 优化js和css

• 不要把js、css写在html里，这样js、css文件就可以缓存
• 合并文件，把多个js合并成一个，减少请求数
• 把js和css文件都放在cdn，因为距离很远的请求费时很长，把文件放在cdn可解决距离的问题，还可以增加并发下载数
• 把css放在head里，js放在body最后，因为css不管放在哪都会阻塞html渲染，所以放在前面先下载，js放后面可以让html先显示，并且可以直接获取到节点（因为html已经加载完了）

6. 延时加载

• 首先只加载第一屏的内容，让用户可以很快看到第一屏，过20ms或者等用户往下滑再加载下面的内容
• 加个loading动画

7. 预加载

8. 如何测试一个网站

打开网站，打开控制台的Audits选项

9. 安装vue-virtual-scroller

在一个列表特别长时，这个组件会展示固定数量的DOM元素，在你下翻的时候，会把上面的DOM删去加在下面，保证一个页面内不会有过多的DOM造成卡顿。

npm install --save vue-virtual-scroller

<virtual-scroller class="scroller" :items="files" item-height="86">
  <div slot-scope="{ item }" class="m-a p-v-10 m-t-20 p-h-10">
    <div class="flex j-between a-center">
      <el-progress class="w-8-10" :text-inside="true" :stroke-width="18" :percentage="item.progress*100"></el-progress>
      <div class="text-center w-2-10">
        <span v-if="item.status === 1" class="">上传中</span>
        <span v-else-if="item.status === -1" class=" color-red">{{item.message}}</span>
        <span v-else-if="item.status === 0" class=" color-red">等待中</span>
        <span v-else class="color-48 fs-15">上传成功</span>
      </div>
    </div>
    <div class="m-t-5">
      <span>{{item.name}}</span>
    </div>
  </div>
</virtual-scroller>

10. 前端压缩

11. webWorker

12. 图片延迟加载