微信小程序性能测试——启动性能专项测试

这篇具有很好参考价值的文章主要介绍了微信小程序性能测试——启动性能专项测试。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序性能测试主要可以分为两个方面,启动性能运行时的性能

其中 小程序启动 是用户体验中极为重要的一环,启动耗时过长会直接造成小程序用户流失,影响用户体验。一般来说用户等待时间超过3秒,用户就有很大概率放弃等待,尤其是在广告场景,小程序的打开速度尤为重要,如果是按点击收费的广告,用户点击之后,却没有进入小程序,意味着你付出了广告费,却没有收获用户,营销成本大大增加。

一、微信小程序启动流程介绍

一般来说,小程序启动流程图如下所示,其中有三个阶段是和小程序业务代码相关,开发者可以进行一定的优化工作:

  • 小程序代码包准备:小程序代码包下载耗时是启动耗时中的重要瓶颈,在用户首次访问小程序小程序版本更新时,代码包的下载会对启动耗时造成影响。一般非首次访问时,无需下载代码包。
  • 代码注入:在逻辑层,小程序启动时需要从代码包内读取小程序的配置和代码,并注入到 JavaScript 引擎中。在视图层,开发者的 WXSS 和 WXML 会编译成 JavaScript 代码注入到视图层,包含页面渲染需要的页面结构和样式信息。
  • 首页渲染:在完成视图层代码注入,并收到逻辑层发送的初始数据后,结合从初始数据和视图层得到的页面结构和样式信息,小程序框架会进行小程序首页的渲染,展示小程序首屏,并触发首页的 Page.onReady 事件

微信小程序性能测试——启动性能专项测试

二、优化小程序启动性能

1. 明确耗时瓶颈

开发者想要提升启动性能,首先要明确自己的小程序是哪个环节耗时较长,这样才能针对性进行优化。

这里可以借助 小程序云测服务 的启动性能专项测试能力,它通过多次拉起小程序,计算每次启动时,开发者能够优化的三个阶段的耗时情况,并在报告中用时序图的方式直观展示。

此外启动性能专项测试特别考虑了两种场景:

  • 用户首次访问 or 小程序版本更新: 此时需要下载代码包,有小程序代码包准备阶段耗时
  • 非首次访问: 此时一般代码包缓存在本地了,无需代码包准备阶段耗时

下面是某个项目启动性能报告测试的示例图,从图中可以看出,代码包准备代码注入阶段耗时均较长

微信小程序性能测试——启动性能专项测试

2. 优化启动性能

明确耗时瓶颈后,开发者希望针对性进行优化,这里列出了一些三个阶段常见的优化措施,详情可以查看官方文档 代码包体积优化 代码注入优化 首屏渲染优化

微信小程序性能测试——启动性能专项测试

如上述项目,小程序云测服务的报告已给出优化建议。在测试过程中检测到,该项目未启用按需注入,也未开启初始渲染缓存。开发者可以从这两方面着手,优化启动性能

微信小程序性能测试——启动性能专项测试

三、总结

本文介绍了小程序启动的流程,以及如何利用小程序云测服务帮助开发者优化小程序启动耗时。

开篇提到,小程序性能主要可以分为启动性能和运行时性能,那么如何测试小程序运行时性能呢?敬请期待 小程序云测专栏 后续文章 《微信小程序性能测试——运行时性能》文章来源地址https://www.toymoban.com/news/detail-495601.html

需要帮助

到了这里,关于微信小程序性能测试——启动性能专项测试的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序实现开屏启动页面

    在 app.json 文件中配置启动页面: 在 window 节点下面,使用 backgroundImage 属性指定开屏启动页面的背景图片。可以通过 backgroundSize 属性设置图片的显示方式。 创建启动页面的代码文件 在start.js页面的 onLoad 生命周期中,使用 setTimeout 函数延迟 3 秒后跳转到小程序的首页。 start.

    2024年02月10日
    浏览(43)
  • uniapp微信小程序项目启动步骤

    如何创建项目就不说了,可以参考该链接: 如何创建开发uniapp微信小程序项目?链接: link 这里主要记录的是,从代码仓库拉取到本地后, 本地启动运行项目,遇到的问题。 1.下载项目 使用git bash 将代码下载到本地 git clone https://gitlab.xx.xxxxx.com/xxxxx/wuhan-cloud-web.git 拖到HBuild

    2024年02月05日
    浏览(39)
  • 关于电脑端微信小程序不能启动解决

    问题描述:电脑端微信启动,没有mini programs进程,并且所有小程序都打不开。 解决:找到weChat安装目录,在[3.6.0.18文件]里面找到weChat.exe,进行启动就应该可以了,然后把它创建为快捷方式在桌面,惦点击它启动微信即可。就可以看到mini programs进程了,这样就可以正常启动

    2024年02月15日
    浏览(39)
  • uniapp微信小程序设置开屏启动动画效果

    效果预览  使用uniapp搭建的微信小程序,制作小程序启动开屏动画,主要使用css动画属性。主页代码过多这里就展示重要代码片段。 js代码 css代码

    2024年02月03日
    浏览(43)
  • 动态获取 微信小程序appid / 自定义启动命令

    官网:https://uniapp.dcloud.net.cn/collocation/package.html#%E7%94%A8%E6%B3%95 小程序开发完成之后需要一套代码多个小程序使用,每次都需要在manifest.json文件中手动修改,大大增加了开发的复杂度。 官网:https://uniapp.dcloud.net.cn/collocation/package.html#%E7%94%A8%E6%B3%95 小程序开发完成之后需要一套

    2024年02月21日
    浏览(49)
  • 微信小程序启动后黑屏问题解决方案

    微信小程序是一种轻量级的应用程序,可以在微信客户端内部运行。然而,有时候在打开微信小程序时会遇到黑屏的问题,即启动后看到一个黑色的屏幕,无法正常显示小程序的内容。本文将介绍一些可能导致微信小程序黑屏问题的原因,并提供解决方案。 资源加载问题 如

    2024年02月04日
    浏览(418)
  • 微信小程序如何性能测试? —— 华为云性能测试服务(CPTS)压测到服务后端,并完成性能评估

    微信小程序作为手机页面的一种,相比传统的网站和应用来说存在比较特殊的地方: 1、  开发者往往对程序做了限制,只能通过微信客户端访问 2、  通过微信的Oauth进行认证 这样往往会导致我们的性能测试工具无法压测到应用的后台服务,这里就跟大家分享下如何通过华为

    2024年02月11日
    浏览(55)
  • 微信小程序多图列表页面性能问题为什么会出现?如何解决?

    微信小程序中的多图列表页面性能问题主要是由于以下几个原因导致的: 图片过大:在多图列表页面中,如果图片过大,会导致页面加载时间过长,从而影响用户体验。 请求过多:在多图列表页面中,如果一次请求加载过多的图片,会导致请求次数过多,从而影响页面加载

    2024年03月25日
    浏览(58)
  • 如何设置微信小程序启动页及其全屏背景色?

    一、设置启动页 打开微信小程序就会进入pages里面的第一个页面,所以只需要在pages.json中,把启动页写在pages的第一项就可以了  二、去掉导航栏,实现全屏显示效果 先清除全局的导航栏标题,在需要全屏的页面,添加以下代码即可: \\\"style\\\": {                 \\\"navigatio

    2024年02月12日
    浏览(75)
  • 微信小程序启动自动检测版本更新,检测到新版本则提示更新

    UpdateManager 对象,用来管理更新,可通过 wx.getUpdateManager 接口获取实例 在app.js中的示例代码 UpdateManager.applyUpdate() 强制小程序重启并使用新版本。在小程序新版本下载完成后(即收到 onUpdateReady 回调)调用。 UpdateManager.onCheckForUpdate(function listener) 监听向微信后台请求检查更新

    2024年02月07日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包