React
- React.memo() usrMemo(),useCallback()
- 使用React.lazy和Suspense：使用React.lazy和Suspense来实现组件的懒加载，只在需要时才加载组件，减少初始加载时间
- 循环加好key值
- 使用React.Fragment避免添加额外的DOM
Vue
- 频繁切换的显隐的内容用v-show也就是display来控制隐藏，只有打开就一次性决定显示与否的用v-if不去创建
- 使用 v-for 必须添加 key
- 避免 v-for 与 v-if 一起使用
- kep-alive缓存
- 合理使用 watch 和 computed
- 使用路由懒加载
HTML
- HTML代码压缩，将注释、空格和新行从生产文件中删除
- 使用语义化标签
- 减少重排重绘
- 减少iframe数量
- 削减DOM数量和层级数量
CSS
- CSS文件压缩
- 尽量少用@import
- 慎用 * 通配符
- 删除不必要的单位和零
- 异步加载非首屏css
- 将样式表放到页面顶部
JS
- javascript脚本放到页面底部
- 减少DOM访问
- 节流与防抖
- 合理的ajax恳求
- 长列表虚拟滚动优化
- 代码压缩
- 异步加载非首屏js
感知性能优化
- loading
- 骨架屏
图片优化
1.根据实际需要选择色深，压缩。 2.小图片引入雪碧图。 3.图片懒加载 4.img图片的alt属性要写, 合理使用target="_blank" 5.采用svg图片或者字体图标
构建优化
- 开启线程
- 开启 exclude & include
- 缩小 CSS 代码
- 缩小 JavaScript 代码
- tree-shaking
- 合理使用 source-map
- splitChunks
- 模块懒加载
资源加载优化
- 使用 Web Workers
- DNS预解析
- 预加载 preload
浏览器缓存策略
1.浏览器缓存策略分为两种强缓存和协商缓存，并且缓存策略都是通过设置 HTTP Header 来实现的。。
服务器优化
- 静态资源使用 CDN
- 添加Expires或者Cache-Control响应头
- 配置ETag
- 使用Gzip压缩
