前端性能优化

性能优化

性能优化原则

  1. 多使用内存、缓存或其他方法
  2. 减少CPU计算量,减少网络加载耗时
  3. 空间换时间(适用于所有编程的性能优化)

从何入手?

让加载更快

  • 减少代码体积:压缩代码

  • 减少访问次数:合并代码、SSR服务端渲染、缓存

  • 使用更快的网络:CDN

    让渲染更快

  • CSS放在HEAD,JS放到body最后面

  • 尽早开始执行js,使用ContentLoaded触发

  • 懒加载(图片懒加载、上滑加载更多)

  • 对DOM查询进行缓存

  • 频繁DOM操作合并到一起进行插入DOM结构

  • 节流throttle 防抖debounce

相关推荐
漫长的~以后2 分钟前
Edge TPU LiteRT V2拆解:1GB内存设备也能流畅跑AI的底层逻辑
前端·人工智能·edge
小福气_7 分钟前
自定义组件 vue3+elementPlus
前端·javascript·vue.js
piaoroumi10 分钟前
UVC调试
linux·运维·前端
前端不太难21 分钟前
RN 调试效率低,一点小改动就需要重新构建?解决手册(实战 / 脚本 / Demo)
前端·react native·重构
是谁眉眼23 分钟前
vue环境变量
前端·javascript·vue.js
3秒一个大24 分钟前
JSX 基本语法与 React 组件化思想
前端·react.js
鹏北海-RemHusband24 分钟前
Vue 组件解耦实践:用回调函数模式替代枚举类型传递
前端·javascript·vue.js
用户66006766853925 分钟前
斐波那契数列:从递归到缓存优化的极致拆解
前端·javascript·算法
为码消得人憔悴28 分钟前
Android perfetto - Perfetto 新手入门指南
android·性能优化
海上彼尚28 分钟前
vite+vue3 ssg预渲染方案
前端·javascript·vue.js