雷州网站wordpress 文章结尾处
web/
2025/10/5 21:29:34/
文章来源:
雷州网站,wordpress 文章结尾处,百度推广每年600元什么费用,dw做响应式网站性能优化指南
1.骨架屏
业务可以在数据加载完成之前用骨架屏幕来占位#xff0c;提升体验。
2.包大小优化
减小包中静态资源#xff0c;例如图片文件#xff0c;可将图片进行压缩降低文件体积。无用文件、函数、样式剔除。除了部分用于容错的图片必须放在代码包#xf…性能优化指南
1.骨架屏
业务可以在数据加载完成之前用骨架屏幕来占位提升体验。
2.包大小优化
减小包中静态资源例如图片文件可将图片进行压缩降低文件体积。无用文件、函数、样式剔除。除了部分用于容错的图片必须放在代码包譬如网络异常提示之外建议开发者把图片、视频等静态资源都放在 CDN 上。Base64 格式本质上是长字符串和 CDN 地址比起来也会更占空间。图片压缩 推荐 tinypng比工具更好用的图片压缩。 地址
注意
若项目中有多个页面只打包一个页面图片资源依然会被打进包内。若页面在usingComponents配置引入自定义组件但是未使用会被打进包内。检查TYML中的import引用其他模板文件、TYSS中的import其他样式文件、JS 中引用的其他模块是否有无用但是未删除依赖关系的ray 的项目可以通过 -a 或者 --analyze 开启打包分析协助开发者进行优化工作。
3.渐进加载
页面启动环节尽快加载重要内容然后在加载其他内容可分阶段加载尽最大可能降低用户等待时间。image图片可开启lazy-load使用懒加载。
4.启用本地缓存
智能小程序提供了读写本地缓存的接口。有些页面数据变化不频繁可考虑放入本地缓存打开优先加载缓存数据拉到最新数据比对后有变化再去更新以此提升用户体验。
注意
并非所有场景都适合缓存策略譬如对数据即时性要求非常高的场景如抢购入口来说展示老数据可能会引发一些问题。数据隔离智能小程序目前会默认按照 uid 和 小程序ID 两个维度对缓存空间进行隔离业务可自行根据业务需求根据 countryCode、家庭 ID 等维度进行再隔离避免数据误展示。
5.【重要】运行时优化setData、事件 上述表格中可以看出在小程序的双线程通信模式数据量在一定程度上会指数级上升因此运行时的优化最主要的原则就是减少通信频率降低通信数据量。业务开发阶段开发者可以控制 setData 的频率尽可能合并数据减少调用次数。频次推荐为 1s 不超过 20 次在处理一些频繁触发的事件比如滚动或者 touchmove 时添加截流方案。Touch 事件使用前要思考是否必须要绑定该事件到逻辑层触发是否可以在 SJS 中处理该事件。开发者应该尽量减小调用 setData 的数据量来提升通信效率。如一些逻辑层的标记型变量预渲染无关的可直接挂在 this 变量下。在调用 渲染脚本rjs 的方法时也会走逻辑层到视图层的通信因此调用 rjs 的方法的时候和 setData 一样也应传递最小变更数据。setData局部变更数据。
// 局部更新数据
this.setData({a.b.c: 1,
});
去掉不必要的事件绑定当用户事件如 Click、Touch 事件等被触发时视图层会把事件信息反馈给逻辑层这也是一个线程间通信的过程。组件节点支持附加dataset 应避免在自定义数据中设置太多数据。
6.【重要】SJS 和 RJS
将一些视图层需要计算的能力放在 SJS 中操作。 SJS运行在视图层。SJS 可以处理视图层绑定的事件且可以获取当前所在实例的部分能力。查看详情SJS并不是完全的JavaScript仅具有部分Safe的能力。SJS处理事件、工具函数无需通信。渲染脚本(RJS) 可用于处理高频的绘图需求可以提高视图的动画渲染性能主要应用场景 canvas 图表渲染webGL 图形渲染等。
7.销毁持久化内存
由于逻辑层是在多页面共享因此如计时器等逻辑在页面退出后仍会执行。正确的做法是在页面 onHide 的时候手动把定时器清理掉有必要时再在 onShow 阶段恢复定时器。
8.其他
vConsole是挂载到视图层的调试工具逻辑层的日志会通过通道发到视图层日志打印频繁可能会阻塞通道遇到性能要求较高的页面调试去掉 vConsole 调试工具减少通道占用。视频由于视频组件比较占用内存在列表中多个出现建议用 cover 图占位当用户点击时候再去加载 video 组件长列表扩展组件提供长列表组件支持虚拟滚动遇到长列表场景可使用该长列表组件减少页面节点渲染数量提升性能。控制页面复杂度如节点数量事件绑定数量不要在一个页面做太多的业务逻辑。
9.总结性能指标
首屏时间不超过 5 秒。渲染时间不超过 500ms。每秒调用 setData 的次数不超过 20 次。setData 的数据在 JSON.stringify 后不超过 256kb。页面 TYML 节点少于 1000 个节点树深度少于 30 层子节点数不大于 60 个。所有网络请求都在 1 秒内返回结果。
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/87563.shtml
如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!