加载优化
- css/js 代码的压缩合并,减少请求次数
- 第三方的模块通过cdn加速
- 非必要大模块的懒加载
- 小模块的合并
- 对下一步可能展示的模块，进行预加载
图片优化
- 小图片使用base64转换，或者使用svg做成图片使用
- 对图片进行懒加载，懒加载的实现可以配合intersectionObserver API进行监听
- 图片大小压缩
- 设置img的srcset选择合适尺寸的图片进行加载，也可以配合picture设置相应的source图片类型
css优化
- css写在头部
- 移除空置的css规则
- 剔除重复的css
- 避免行内style
- 使用高性能的css选择器
js优化
- js放在body头部
- js脚本设置defer或者async，不阻碍页面渲染
渲染优化
- 尽量减少页面回流重绘
- 不频繁读取dom样式，直接用变量存储
- 使用innerHtml或者documentFragment批量操作dom
- 动画元素使用absolute不影响文档流
- 动画尽量使用requestAnimationFrame，而不是定时器
首屏优化
- css/js非必要代码的分离，当然包含懒加载
- 服务端预加载html
打包优化，仅webpack
- include和exclude减少执行文件的范围
- 缓存，各种loader开启缓存
- 压缩代码
- 多线程加速，将loader从串行变成并行
- 提取vendor，公共库不受业务变化影响
- 保证module Id稳定，不使用数字作为模块id，改用文件内容的hash值
- 保证chunkhash稳定，使用webpack-chunk-hash，替代webpack自己的hash算法
这一块有很多很多 建议大家看看
zhuanlan.zhihu.com/p/694080136
SEO优化
- 涉及各种meta信息
- 服务端渲染
- 语义化，sitemap, robot.txt
react优化
- 路由懒加载
- 函数组件添加React.memo
- 列表项key唯一
- 使用useMemo，useCallback
- 类组件添加shouldComponent判断渲染
vue优化
- 路由懒加载
- keep-alive缓存组件
- 列表项key唯一
- v-for不与v-if同时使用
- 长列表的虚拟滚动，纯粹数据使用object.freeze(data)进行冻结
- 图片懒加载
- 组件销毁时记得监听事件的销毁
- 第三方库按需加载
- 减少在created生命周期中做ajax请求，放在mounted中就不会阻塞页面生成dom
