一、性能优化前端角度能做哪些通用angular、vue、小程序、网站概述让网站加载更快、操作更流畅、不卡顿、不白屏。1. 资源优化图片压缩、懒加载、不使用超大图、静态资源 CDN 加速2. 渲染优化关键 CSS 内联加快首屏渲染减少 DOM 操作避免频繁重绘重排动画用 transform /opacity不触发重排避免使用昂贵 CSS 选择器合并 CSS、JS、小图片用 Base643. 运行时优化防抖输入框搜索【隶属于减少请求次数】节流滚动、窗口变化【隶属于减少请求次数】静态资源从接口获取后缓存到本地只下载一次永久使用例如音频【隶属于减少请求次数】共享信息缓存或存储到状态管理、全局变量中例如用户信息v-for 必须加 key且不要用 indexkey是唯一标识必须遵循唯一性不会发生改变如果使用index若数组对象发生变化对应index就会变…虚拟 DOM diff 算法 → 必须靠 key 识别节点循环优先级 判断优先级v-for 与 v-if 不要一起使用优先级问题for 比 if 先执行如果写在一起就变成了先for循环全部 → 再一个个判断 if → 不符合再隐藏结果性能极差循环了不该循环的东西容易出 bug长列表使用虚拟列表区分上拉分页加载下拉加载分页普通上拉加载是什么按照分页pagesize大小上滑滚动超出→ 则加载下一页 → 把新数据push到数组对象后面显示到页面特点数据越来越多、DOM 越来越多列表越长页面越卡、内存越高适合数据量不大几百条以内优点简单、易实现、兼容性最好缺点数据多了 → 页面卡顿虚拟列表虚拟滚动是什么只渲染屏幕可见区域的 DOM滑到哪渲染哪滑出去的 DOM 直接销毁 / 复用。特点无论 1 万条 / 10 万条数据DOM 永远只有 10~20 个左右页面永远不卡内存永远不暴涨适合大量数据1000 条以上优点超级流畅、性能爆炸缺点不同平台的适用未用过的就不举例Vue2 / Vue3有成熟虚拟滚动库如 vue-virtual-scroller、vue3-virtual-scrollerAngular官方 CDK 自带虚拟滚动最稳小程序官方提供 recycle-view / 自定义实现虚拟列表路由懒加载图片、组件懒加载4.运行时优化~避免内存泄漏【不同平台对比】一般定时器、全局监听事件、websocket长连接都属于必须做性能优化1原生网站JS清理定时器setInterval/setTimeout移除全局监听事件scroll/resize/click释放 DOM 引用避免持有废弃节点取消发布订阅 / EventBus 监听取消未完成的 Ajax 请求优化做关闭 WebSocket 长连接2Vue清理定时器移除全局监听window/document销毁第三方实例echarts / 地图 / 编辑器事件总线 $on / $off 必须配对取消自定义发布订阅取消 axios 未完成请求优化做关闭 WebSocket 长连接3AngularRxJS Observable 订阅必须取消官方自带发布订阅清理定时器销毁第三方实例echarts / 地图取消发布订阅事件HTTP 请求自动取消 / 手动取消优化做关闭 WebSocket 长连接4微信小程序页面卸载时清理定时器取消全局监听wx.onWindowResize 等关闭 WebSocket 长连接wx.on/wx.off 必须配对取消自定义发布订阅取消未完成的 wx.request 请求优化做二、 细说【微信小程序】性能优化页面渲染优化长列表图片必须加 lazy-load“true” Css加载动画分页加载数据避免频繁 setData合并更新、不要一次性 setData 大量数据包体积优化开启分包加载分包的使用和场景见另一篇图片压缩、删除无用资源只引入需要的组件和工具库逻辑优化避免页面频繁 onLoad /onShow定时器、监听必须及时销毁自定义组件合理拆分长列表使用 recycle-view 或 懒渲染【必要】启用 lazyCodeLoading 按需加载默认小程序启动 → 把所有页面、所有组件一次性全部加载完 → 再显示首页速度慢、包体积大、首屏慢。开启 lazyCodeLoading 后启动 → 只加载首页需要的代码 → 其他页面等你跳转时再加载首屏速度大幅提升。资源回收页面卸载清除监听、定时器、请求小程序中需要将请求、监听、定时器等资源页面卸载时必须及时清理这里对比举例Vue / Angular 单页切换 → 老页面被销毁、被替换、被浏览器垃圾回收小程序 多页面栈 → 老页面还活着、还在内存里、根本没销毁小程序页面销毁**为什么还是会占用内存 因为定时器、请求、监听 → 都是 JS 里的 “独立任务”它们被放在小程序的主线程里页面销毁了任务还在内存里→ 内存不释放 → 越积越多 → 卡顿、闪退所以必须在卸载页面时及时清理~为什么取消请求是否必要按规范微信小程序中页面卸载时必须取消正在进行的请求规范、健壮、防报错、防内存泄漏首屏数据提前请求正常启动首页加载慢【启动小程序 → 加载页面 → 发请求 → 等数据 → 渲染】、提前请求首页加载快【启动小程序时 → 直接发请求 → 等进页面时 → 数据已经回来了】为什么小程序特别需要 启动本来就比网页慢逻辑层、视图层双线程通信耗时首屏速度直接影响用户体验、留存率微信官方也要求首屏加载 1.5 秒所以提前请求 性能优化必做项。【app.js 启动时onLaunch中进行请求最推荐】写在最后本文主要是概念偏多未能给实践代码放出来最初是想总结小程序性能优化然后就想着扩展对比其他框架性能优化的不同之处具体实践对比开发使用效果…
（性能优化前端能做什么）细讲小程序性能优化
发布时间：2026/5/19 13:20:17
一、性能优化前端角度能做哪些通用angular、vue、小程序、网站概述让网站加载更快、操作更流畅、不卡顿、不白屏。1. 资源优化图片压缩、懒加载、不使用超大图、静态资源 CDN 加速2. 渲染优化关键 CSS 内联加快首屏渲染减少 DOM 操作避免频繁重绘重排动画用 transform /opacity不触发重排避免使用昂贵 CSS 选择器合并 CSS、JS、小图片用 Base643. 运行时优化防抖输入框搜索【隶属于减少请求次数】节流滚动、窗口变化【隶属于减少请求次数】静态资源从接口获取后缓存到本地只下载一次永久使用例如音频【隶属于减少请求次数】共享信息缓存或存储到状态管理、全局变量中例如用户信息v-for 必须加 key且不要用 indexkey是唯一标识必须遵循唯一性不会发生改变如果使用index若数组对象发生变化对应index就会变…虚拟 DOM diff 算法 → 必须靠 key 识别节点循环优先级 判断优先级v-for 与 v-if 不要一起使用优先级问题for 比 if 先执行如果写在一起就变成了先for循环全部 → 再一个个判断 if → 不符合再隐藏结果性能极差循环了不该循环的东西容易出 bug长列表使用虚拟列表区分上拉分页加载下拉加载分页普通上拉加载是什么按照分页pagesize大小上滑滚动超出→ 则加载下一页 → 把新数据push到数组对象后面显示到页面特点数据越来越多、DOM 越来越多列表越长页面越卡、内存越高适合数据量不大几百条以内优点简单、易实现、兼容性最好缺点数据多了 → 页面卡顿虚拟列表虚拟滚动是什么只渲染屏幕可见区域的 DOM滑到哪渲染哪滑出去的 DOM 直接销毁 / 复用。特点无论 1 万条 / 10 万条数据DOM 永远只有 10~20 个左右页面永远不卡内存永远不暴涨适合大量数据1000 条以上优点超级流畅、性能爆炸缺点不同平台的适用未用过的就不举例Vue2 / Vue3有成熟虚拟滚动库如 vue-virtual-scroller、vue3-virtual-scrollerAngular官方 CDK 自带虚拟滚动最稳小程序官方提供 recycle-view / 自定义实现虚拟列表路由懒加载图片、组件懒加载4.运行时优化~避免内存泄漏【不同平台对比】一般定时器、全局监听事件、websocket长连接都属于必须做性能优化1原生网站JS清理定时器setInterval/setTimeout移除全局监听事件scroll/resize/click释放 DOM 引用避免持有废弃节点取消发布订阅 / EventBus 监听取消未完成的 Ajax 请求优化做关闭 WebSocket 长连接2Vue清理定时器移除全局监听window/document销毁第三方实例echarts / 地图 / 编辑器事件总线 $on / $off 必须配对取消自定义发布订阅取消 axios 未完成请求优化做关闭 WebSocket 长连接3AngularRxJS Observable 订阅必须取消官方自带发布订阅清理定时器销毁第三方实例echarts / 地图取消发布订阅事件HTTP 请求自动取消 / 手动取消优化做关闭 WebSocket 长连接4微信小程序页面卸载时清理定时器取消全局监听wx.onWindowResize 等关闭 WebSocket 长连接wx.on/wx.off 必须配对取消自定义发布订阅取消未完成的 wx.request 请求优化做二、 细说【微信小程序】性能优化页面渲染优化长列表图片必须加 lazy-load“true” Css加载动画分页加载数据避免频繁 setData合并更新、不要一次性 setData 大量数据包体积优化开启分包加载分包的使用和场景见另一篇图片压缩、删除无用资源只引入需要的组件和工具库逻辑优化避免页面频繁 onLoad /onShow定时器、监听必须及时销毁自定义组件合理拆分长列表使用 recycle-view 或 懒渲染【必要】启用 lazyCodeLoading 按需加载默认小程序启动 → 把所有页面、所有组件一次性全部加载完 → 再显示首页速度慢、包体积大、首屏慢。开启 lazyCodeLoading 后启动 → 只加载首页需要的代码 → 其他页面等你跳转时再加载首屏速度大幅提升。资源回收页面卸载清除监听、定时器、请求小程序中需要将请求、监听、定时器等资源页面卸载时必须及时清理这里对比举例Vue / Angular 单页切换 → 老页面被销毁、被替换、被浏览器垃圾回收小程序 多页面栈 → 老页面还活着、还在内存里、根本没销毁小程序页面销毁**为什么还是会占用内存 因为定时器、请求、监听 → 都是 JS 里的 “独立任务”它们被放在小程序的主线程里页面销毁了任务还在内存里→ 内存不释放 → 越积越多 → 卡顿、闪退所以必须在卸载页面时及时清理~为什么取消请求是否必要按规范微信小程序中页面卸载时必须取消正在进行的请求规范、健壮、防报错、防内存泄漏首屏数据提前请求正常启动首页加载慢【启动小程序 → 加载页面 → 发请求 → 等数据 → 渲染】、提前请求首页加载快【启动小程序时 → 直接发请求 → 等进页面时 → 数据已经回来了】为什么小程序特别需要 启动本来就比网页慢逻辑层、视图层双线程通信耗时首屏速度直接影响用户体验、留存率微信官方也要求首屏加载 1.5 秒所以提前请求 性能优化必做项。【app.js 启动时onLaunch中进行请求最推荐】写在最后本文主要是概念偏多未能给实践代码放出来最初是想总结小程序性能优化然后就想着扩展对比其他框架性能优化的不同之处具体实践对比开发使用效果…
