前端优化

前端 base:: 优化程序

执行优化

减少请求次数

懒

• child::图片懒加载

缓存

• child::http缓存
• use::函数缓存

不用

• use::图标字体

合并

• use::精灵图

提高请求速度

质量

• child::CDN

压缩——从形式上缩小

• child::压缩静态资源
• child::压缩网页源文件

按需——从内容上缩小

• child::代码分割
  • child::路由懒加载
• child::按需加载第三方库

减少客户端性能开销

转移计算位置

• child::SSR 服务端渲染

优化

• child::减少回流和重绘
• child::事件委托

减少运算

• child::防抖节流

VUE优化

child::

vue减少性能开销

前端

减少组件更新

• child::保持props稳定性
• 尽量多使用Vue v-once命令
• child::保持computed复杂数据稳定性

优化更新

• 使用Vue html遍历命令时添加 Vue key属性

缓存

• child::Vue keep-alive缓存标签
• 合理选用Vue html标签选择命令 v-if v-show

可视区域优化

• child::大型虚拟列表

减少响应式开销

• 使用浅层响应式对象

指向原始笔记的链接

React优化

child::

性能优化

• React
• father::react
• child::避免组件重复渲染
• child::组件懒加载
• child::代码分割
• use::防抖节流
• child::虚拟列表
• child::react原生内置优化

指向原始笔记的链接

提高客户端效率

异步

• 使用web worker
• child::资源预加载

释放性能

• child::前端GPU加速渲染

优化用户等待体验

• child::加载动画
• child::CSS比js先加载

性能评测

child::

前端性能评测

生产环境下

child::生产环境性能监控

开发环境下

性能功能参考  |  DevTools  |  Chrome for Developers Chrome DevTools Performance 功能详解 - 掘金

指向原始笔记的链接