1. 加载优化
1. 压缩合并
2. 代码分割(code spliting)，可以基于路由或动态加载
3. 第三方模块放在CDN
4. 大模块异步加载，例如: Echarts，可以使用require.ensure，在加载成功后，在显示对应图表
5. 小模块适度合并，将一些零散的小模块合并一起加载，速度较快
6. 可以使用pefetch预加载，在分步场景中非常适合
2. 图片优化
1. 小图使用精灵图，iconFont，base64内联
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，方便错误收集
4.DOM
a.HTML Collection（HTML收集器，返回的是一个数组内容信息）
在脚本中 document.images、document.forms、getElementsByTagName()返回的都是HTMLCollection类型的集合，在平时使用的时候大多将它作为数组来使用，因为它有 length属性，也可以使用索引访问每一个元素。不过在访问性能上则比数组要差很多，原因是这个集合并不是一个静态的结果，它表示的仅仅是一个特定的查询，每次访问该集合时都会重新执行这个查询从而更新查询结果。所谓的“访问集合” 包括读取集合的 length属性、访问集合中的元素。
因此，当你需要遍历 HTML Collection的时候，尽量将它转为数组后再访问，以提高性能。即使不转换为数组，也请尽可能少的访问它，例如在遍历的时候可以将 length属性、成员保存到局部变量后再使用局部变量。
b. Reflow & Repaint
除了上面一点之外， DOM操作还需要考虑浏览器的Reflow和Repaint ，因为这些都是需要消耗资源的。
5. 慎用 with
with(obj){ p = 1}; 代码块的行为实际上是修改了代码块中的执行环境 ，将obj放在了其作用域链的最前端，在 with代码块中访问非局部变量是都是先从 obj上开始查找，如果没有再依次按作用域链向上查找，因此使用 with相当于增加了作用域链长度。而每次查找作用域链都是要消耗时间的，过长的作用域链会导致查找性能下降。
因此，除非你能肯定在 with代码中只访问 obj中的属性，否则慎用 with，替代的可以使用局部变量缓存需要访问的属性。
6.避免使用 eval和 Function
每次 eval 或Function 构造函数作用于字符串表示的源代码时，脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢 100倍以上。
eval 函数效率特别低，由于事先无法知晓传给 eval 的字符串中的内容，eval在其上下文中解释要处理的代码，也就是说编译器无法优化上下文，因此只能有浏览器在运行时解释代码。这对性能影响很大。
Function 构造函数比 eval略好，因为使用此代码不会影响周围代码 ;但其速度仍很慢。
此外，使用 eval和 Function也不利于Javascript 压缩工具执行压缩。
7.减少作用域链查找
前文谈到了作用域链查找问题，这一点在循环中是尤其需要注意的问题。如果在循环中需要访问非本作用域下的变量时请在遍历之前用局部变量缓存该变量，并在遍历结束后再重写那个变量，这一点对全局变量尤其重要，因为全局变量处于作用域链的最顶端，访问时的查找次数是最多的。
低效率的写法：
更高效的写法：
此外，要减少作用域链查找还应该减少闭包的使用。
8.数据访问
Javascript中的数据访问包括直接量 (字符串、正则表达式 )、变量、对象属性以及数组，其中对直接量和局部变量的访问是最快的，对对象属性以及数组的访问需要更大的开销。当出现以下情况时，建议将数据放入局部变量：
a. 对任何对象属性的访问超过 1次
b. 对任何数组成员的访问次数超过 1次
另外，还应当尽可能的减少对对象以及数组深度查找。
9.字符串拼接
在 Javascript中使用”+”号来拼接字符串效率是比较低的，因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接结果赋值给新变量。与之相比更为高效的做法是使用数组的 join方法，即将需要拼接的字符串放在数组中最后调用其 join方法得到结果。不过由于使用数组也有一定的开销，因此当需要拼接的字符串较多的时候可以考虑用此方法。
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查询时间，PC端域名发散，移动端域名收敛
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. 服务端渲染
