1. 加载优化
1. 压缩合并
2. 代码分割(code spliting)，可以基于路由或动态加载
3. 第三方模块放在CDN
4. 大模块异步加载，例如: Echarts，可以使用require.ensure，在加载成功后，在显示对应图表
5. 小模块适度合并，将一些零散的小模块合并一起加载，速度较快
6. 可以使用pefetch预加载，在分步场景中非常适合
2. 图片优化
1. 小图使用雪碧图或iconFont
2. 图片使用懒加载
3. webp代替其他格式
4. 图片一定要压缩
5. 可以使用的img的srcset，根据不同分辨率显示不同尺寸图片，这样既保证显示效果，又能节省带宽，提高加载速度
3. css优化
1. css写在头部
2. 避免css表达式
3. 移除空置的css规则
4. 避免行内style样式
4. js优化
1. js写在body底部
2. js用defer放在头部，提前加载时间，又不阻塞dom解析
3. script标签添加crossorigin，方便错误收集
5. 渲染优化
1. 尽量减少reflow和repaint
涉及到样式，尺寸，节点增减的操作，都会触发reflow和repaint。
1.1 用变量缓存dom样式，不要频繁读取
1.2 通过DocumentFragment或innerHTML批量操作dom
1.3 dom隐藏，或复制到内存中，类似virtual dom，进行修改，完成后再替换回去
1.4 动画元素一定要absolute，脱离文档流，不影响其他元素。动画不要用left，top等操作，要使用transform和opacity，同时开启渲染层(will-change或translate3d(0,0,0))
1.5 动画尽量用requestAnimationFrame，不要用定时器
1.6 移动端硬件加速，触发GPU渲染，还是translate3d(0,0,0)
2. 尽量用css动画代替js动画，canvas动画代替js动画
3. 初始渲染，可以使用骨架屏或loading，提升体验
4. PWA，可以本地缓存资源，提升体验
5. 频繁触发的事件，防抖、节流，例如：scroll，input等
6. 长列表，使用分页或滚动加载，虚拟列表，移除屏外dom
6. 首屏优化
1. 代码分离，将首屏不需要的代码分离出去
2. 服务端渲染或预渲染，加载完html直接渲染，减少白屏时间
3. DNS prefetch，使用dns-prefetch减少dns查询时间
4. 减少关键路径css，可以将关键的css内联，这样可以减少加载和渲染时间
7. 打包优化
主要是webpack优化
1. 拆包 externals dllPlugin
2. 提取公共包 commonChunkPlugin或splitChunks
3. 缩小范围 各种loader配置include和exclude，noParse跳过文件
4. 开启缓存 各种loader开启cache
5. 多线程加速 happypack或thead-loader
6. tree-shaking ES模块分析，移除死代码
7. Scope Hoisting ES6模块分析，将多个模块合并到一个函数里，减少内存占用，减小体积，提示运行速度
8. webpack长缓存优化
1. js文件使用chunkhash，不使用hash
2. css文件使用contenthash，不使用chunkhash，不受js变化影响
3. 提取vendor，公共库不受业务模块变化影响
4. 内联webpack runtime到页面，chunkId变化不影响vendor
5. 保证module Id稳定，不使用数字作为模块id，改用文件内容的hash值，使用HashedModuleIdsPlugin，模块的新增或删除，会导致其后面的所有模块id重新排序，为避免这个问题
6. 保证chunkhash稳定，使用webpack-chunk-hash，替代webpack自己的hash算法。webpack自己的hash算法，对于同一个文件，在不同开发环境下，会计算出不用的hash值，不能满足跨平台需求。
8. vue优化
1. 路由懒加载组件
2. keep-alive缓存组件，保持原显示状态
3. 列表项添加key，保证唯一
4. 列表项绑定事件，使用事件代理(v-for)
5. v-if和v-for不要用在一个标签上，它会在每个项上进行v-if判断
9. react优化
1. 路由组件懒加载，使用react-loadable
2. 类组件添加shouldComponent或PureComponent
3. 函数组件添加React.memo
4. 列表项添加key，保证唯一
5. 函数组件使用hook优化，useMemo，useCallback
10. SEO优化
1. 添加各种meta信息
2. 预渲染
3. 服务端渲染