在看以下总结时，要注意两个词，并发 和 缓存

一. （在日常开发中), 打包构建要快

想象一下写完代码后，编译代码要5min，假如再改动代码，打包要10min。。。这种开发效率是特别慢的

• 并发构建（使用插件）
• loader的使用是需要查找文件的，所以要过滤不相关文件
• 使用缓存

二. 资源加载要快

打开一个网站后，下载资源的速度要快

1. 资源要压缩，50MB相比50kb肯定是50kb的下载快。可以使用webpack等构建工具（里的plugin）

• 图片压缩
• css压缩合并
• js压缩合并
• 图标,svg的合并（svg sprite代替icon)

2. 资源越少越好，文件的合并打包，这样的话请求数会减少，提高速度。服务端可开启gzip，压缩请求的页面，提高带宽。

• js、css压缩合并
• 使用缓存来减少请求，cache-control

3. 请求的资源距离要近，静态资源部署到cdn

4. 资源按需加载（懒加载、异步加载）

• 根据视口或者点击后在加载页面，而不是一口气加载完
• 图片懒加载
• 组件懒加载
• 路由懒加载

5. 使用先进运输工具(http2.0)

• 二进制分帧层
• 多路复用（并发请求）
• 数据流优先级
• 头部压缩
• 服务端推送

三. 页面渲染快

下载完资源后，页面要渲染，提高渲染速率也很必要

• css在上面，js在下面（js是单线程的，加载后会立刻执行，阻塞渲染过程）
• 不重要的js代码使用延迟加载defer或者ansyc异步加载

四. 体验流畅（使用时）

页面渲染完后，用户会做一些操作，比如拖滚动条，这个时候需要使用十分流畅

1.动画流畅

• 尽量使用css3的animation （以往的动画效果是用js去操作这个元素，但是没必要,因为animation使用GPU加速，而js操作是cpu，会影响主线程速率）
• 使用transform，少用left/top（相对定位、绝对定位），原理也是GPU加速，硬件（显卡）加速，减小cpu负担
• js使用requestAnimationFrame而不用setInterval（否则动画会不流畅）

2. 滚动、移动要流畅

• 使用防抖debounce和节流throttle。由于鼠标滚动和指针移动属于高频操作，需要对操作进行限制。
• DOM增删操作要少（dom diff、虚拟dom），为了减少reflow。
  +辅助计算，webworker，相当于新开了一个进程。