在看以下总结时，要注意两个词，并发 和 缓存
一. （在日常开发中), 打包构建要快
想象一下写完代码后，编译代码要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，相当于新开了一个进程。
