Taro小程序开发性能优化实践

我们团队在利用Taro进行秒送频道小程序的同时,一直在探索性能优化的最佳实践。随着需求的不断迭代,项目中的性能问题难免日积月累,逐渐暴露出来影响用户体验。适逢双十一大促,我们趁着这个机会统一进行了Taro性能优化实践,现总结如下,希望能为大家在日程的开发中提供借鉴,助力大促。

优化前性能表现

性能表现主要从两方面进行衡量,第一个是页面加载时间,其次是页面流畅程度。





页面加载时间我们通过两个维度进行量化,其一是关键点位打点记录时长,具体的点位有:

点位列表
点击tab
进入秒送频道分包
定位接口开始
定位接口结束
cms接口 开始
cms接口 结束
渲染cms 开始
渲染cms 结束
渲染入口球开始
渲染入口球结束
整体耗时

记录点位并计算时间间隔,统计出的量化时间表如下:

冷启动(初次加载小程序包)





热启动(已安装小程序包,退出微信后重新进入)





其二,实际上通过代码log打点存在很多问题,比如有些关键时间点没有时机进行上报,无法真实地反映出用户体验的实际情况,所以最真实的使用场景还是亲自掐表进行时间统计。

掐秒表:分段1(分包加载),分段2(缓存占位获取定位,发起cms请求),分段3(cms加载完成),总时长。

设备:中端(iPhone11)

冷启动:

热启动:



问题分析

根据统计结果,很可以看出容易,目前秒送频道页存在的主要问题主要集中于以下几个方面:

1.分包加载速度慢,导致首屏耗时偏长。

2.接口请求时长过长。

3.feeds渲染耗时偏长。

需要根据存在的问题,针对性地采取对应处理方案。

优化实践

1.切换Skyline渲染引擎

为了解决首屏耗时较长的问题,我们经过调研,决定采用Skyline引擎来进行优化。

Skyline是微信官方提供的渲染引擎,目标是进一步优化小程序性能,提供更为接近原生的用户体验。其使用更精简高效的渲染管线,并带来诸多增强特性,让 Skyline拥有了更接近原生渲染的性能体验。

Skyline 创建了一条渲染线程来负责渲染任务,并在 AppService 中划出一个独立的上下文,来运行之前 WebView 承担的 JS 逻辑、DOM 树创建等逻辑。





这种新的架构相比原有的 WebView 架构,有以下特点:

•界面更不容易被逻辑阻塞,进一步减少卡顿

•无需为每个页面新建一个 JS 引擎实例(WebView),减少了内存、时间开销

•框架可以在页面之间共享更多的资源,进一步减少运行时内存、时间开销

•框架的代码之间无需再通过 JSBridge 进行数据交换,减少了大量通信时间开销

而与此同时,这个新的架构能很好地保持和原有架构的兼容性,可以很大程度上降低首屏的渲染耗时。





在实际Skyline适配的过程中,我们对遇到的问题进行了记录:



1.利用backgroundPosition,backgroundImage和height裁剪背景图片的时候,backgroundPosition不可以使用calc运算符:

目的:裁剪图片从底部开始,向上,高度为gradientHeight的部分

原写法:

style={{backgroundPosition: `center calc(100% + ${getPx(gradientHeight)})`
}} >

适配写法:

style={{backgroundPosition: `center bottom -${gradientHeight}px`
}} >

2.在需要吸顶展示的场景,position: sticky不适用,需要改写:

目的:滚动到距顶部statusBarHeight的时候吸顶展示

原写法:

style={{position: sticky,top: statusBarHeight,    
}} >

适配写法

<ScrollView type="list"><StickySection pushPinnedHeader={false}><StickyHeader offsetTop={statusBarHeight}><View className={styles.view}>...</View></StickyHeader></StickySection>
</ScrollView>

3.子视图节点有用到position: absolute的场景,根结点需要设置position: relative

4.在视图设置全圆角的时候,单独设置某一变的颜色,会使圆角失效:

.loading {border-radius: 100%;border-top-color: transparent;
}

现象:







5.position: fixed属性失效:使用position:

absolute和position: relative按需代替

6.z-index只在同层级之间有效,跨层级无效:

如果实在无法提高层级,可以考虑使用: root-portal组件

7.所有节点默认是 relative,可能导致absolute不准/margin-top无效:

按实际情况调整UI。如果遇到节点下的第一个margin-top无效,可以在前面加一个占位的的view

最终适配完成后的优化效果如下

冷启动:







热启动:







2.资源位延迟加载

feeds楼层存在着渲染时长偏长的问题,最主要的问题集中在店带品楼层上:





该楼层带有商品列表,列表中的商品每一个都会渲染一个资源位,数目在15到20个不等,这样的楼层会下发13个左右,且每次都会在接口下发后一次性全部渲染,导致渲染的资源位数目暴增。

本次优化对商品资源位的加载进行了优化,首屏只最多渲染6个:





其余商品在滑动触底是懒加载。

<ScrollView ...onScrollToLower={handleScrolltolower}...
/>const handleScrolltolower = useCallback(e => {if (loadMoreImg.current == false) {loadMoreImg.current = true//加载剩余图片setDatasource)}
}, [loadMoreImg])

以此方式来减少渲染工作量,提高渲染速度。底部的feeds商品资源位也采用相同的处理方式,首屏最多加载6个:





3.多团队沟通优化

除了使用懒加载的方式,我们也积极与产品和UED团队沟通,针对店带品的使用场景沟通解决方案。最终确定可以将首屏下发的楼层数从13个调整为9个,进一步降低渲染压力,提升feeds部分的渲染速度。

在实际优化实践中,往往与其他团队进行沟通,是最有效的优化方式,大家可以多借鉴一下。

4.图片资源优化

图片资源尺寸过大,会导致图片下载缓慢,资源位白屏,用户体验差。以往网管在进行商品图片下发的时候,无论是店带品楼层的商品还是商品详情页展示的商品大图,采用的都是同一套尺寸较大的图片,这就导致在店带品楼层商品列表过多时,图片下载过程等待时间过长。经过与后端团队,产品和UED团队积极沟通,确定了一套3尺寸图片方案:





产品配置图片的时候,会配置大、中、小三种尺寸的图片,网关在下发时会根据资源位的类型区别下发,针对店带品楼层、feeds商品这种楼层,仅下发小尺寸图片,以减小接口请求数据量以及图片下发时间,极大地提高了图片夹杂速度。

5.接口请求逻辑改造

秒送频道页涉及到两个接口请求,分别是主接口和feeds数据接口,之前因为代码结构的原因,两个接口采用了串行请求的方式做请求。这次的优化经过方案评审,将串行改为并行,并将两个接口返回的结果进行隔离,分批渲染,从而降低了整体接口请求的时长。

优化成果

经过一系列优化,在接口请求总时长,feeds渲染提升非常明显,首屏加载速度有了很大提升:





根据掐秒表的结果,也能够最直观的感觉出整体开启速度的提升:





结语

Taro小程序开发的性能优化实践,不仅涉及到前端代码优化,还涉及到了多个团队之间的沟通配合,好的代码习惯也不是一朝一夕就能养成的,优化也需要日积月累,不断持续地推进,希望这篇文章可以帮助到大家,助力大促期间的用户体验改进。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/64955.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

springboot471基于协同过滤算法商品推荐系统(论文+源码)_kaic

摘 要 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装协同过滤算法商品推荐系统软件来发挥其高效地信息处理的作用…

进程间关系与守护进程

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 进程间关系与守护进程 收录于专栏[Linux学习] 本专栏旨在分享学习Linux的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 1. 进程组 什…

【NLP 16、实践 ③ 找出特定字符在字符串中的位置】

看着父亲苍老的白发和渐渐老态的面容 希望时间再慢一些 —— 24.12.19 一、定义模型 1.初始化模型 ① 初始化父类 super(TorchModel, self).__init__()&#xff1a; 调用父类 nn.Module 的初始化方法&#xff0c;确保模型能够正确初始化。 ② 创建嵌入层 self.embedding n…

javaEE-多线程编程-3

目录 java 常见的包 : 回调函数: 什么是线程: 第一个线程: 验证多线程执行: 内核: 调用sleep()方法: 执行结果分析: 线程创建的几种方式: 1.继承Thread类,重写run()方法. 2.实现Runnable接口,重写run()方法. 3.继承Thread类,重写run()方法.但使用匿名内部类 4.实现…

怎么在idea中创建springboot项目

最近想系统学习下springboot&#xff0c;尝试一下全栈路线 从零开始&#xff0c;下面将叙述下如何创建项目 环境 首先确保自己环境没问题 jdkMavenidea 创建springboot项目 1.打开idea&#xff0c;选择file->New->Project 2.选择Spring Initializr->设置JDK->…

设计模式期末复习

一、设计模式的概念以及分类 是一套被反复使用&#xff0c;多数人知晓&#xff0c;经过分类编目&#xff0c;代码设计经验的总结&#xff0c;描述了在软件设计的过程中不断重复发生的问题&#xff0c;以及该问题的解决方案&#xff0c;他是解决特定问题的一系列套路&#xff0c…

Github——网页版上传文件夹

第一步&#xff1a;创建一个新的仓库或进入已存在的仓库页面 第二步&#xff1a;点进对应的文件夹下&#xff0c;然后 点击 “Upload files” 第三步&#xff1a;将文件夹拖拽到上传区域 打开资源管理器&#xff0c;将要上传的文件夹从计算机中拖拽到上传区域。 注意&#xf…

高级的SQL查询技巧有哪些?

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【14后&#x1f60a;///C爱好者&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日分享关于高级SQL查询技巧方面的相关内容&#xf…

FastStone 10.x 注册码

简介 FastStone Capture是一款经典好用的屏幕截图软件&#xff0c;在屏幕截图领域具有广泛的应用和众多优势。 软件基本信息 FastStone Capture体积小巧&#xff0c;占用内存少&#xff0c;这使得它在运行时不会给计算机系统带来过多的负担&#xff0c;即使在配置较低的电脑…

K8S详解(5万字详细教程)

目录 ​编辑 一、集群管理命令 二、命名空间 1. 获取命名空间列表 2. 创建命名空间 3. 删除命名空间 4. 查看命名空间详情 三、Pod 1. Pod概述 2. Pod相位状态 3. 管理命令 3.1 获取命名空间下容器(pod)列表 3.2 查看pod的详细信息 3.3 创建 && 运行 3.4 …

费舍尔信息矩阵全面讲述

费舍尔信息矩阵&#xff08;Fisher Information Matrix&#xff09; 费舍尔信息矩阵是统计学中一个非常重要的概念&#xff0c;尤其在参数估计、最大似然估计&#xff08;MLE&#xff09;和贝叶斯推断中具有广泛的应用。它反映了参数估计的不确定性程度&#xff0c;也可以用来…

Zookeeper的监听机制

Zookeeper的监听机制是其实现分布式协调服务的一个核心功能。 它允许客户端注册Watcher&#xff08;观察者&#xff09;来监听特定的Znode&#xff08;节点&#xff09;上的事件&#xff0c;当Znode的状态发生变化时&#xff0c;Zookeeper会向注册了Watcher的客户端发送通知。…

[原创](Modern C++)现代C++的第三方库的导入方式: 例如Visual Studio 2022导入GSL 4.1.0

[简介] 常用网名: 猪头三 出生日期: 1981.XX.XX 企鹅交流: 643439947 个人网站: 80x86汇编小站 编程生涯: 2001年~至今[共23年] 职业生涯: 21年 开发语言: C/C、80x86ASM、PHP、Perl、Objective-C、Object Pascal、C#、Python 开发工具: Visual Studio、Delphi、XCode、Eclipse…

2002 - Can‘t connect to server on ‘192.168.1.XX‘ (36)

参考:2002 - Can‘t connect to server on ‘192.168.1.XX‘ (36) ubantu20.04&#xff0c;mysql5.7.13 navicat 远程连接数据库报错 2002 - Can’t connect to server on ‘192.168.1.61’ (36) 一、查看数据库服务是否有启动&#xff0c;发现有启动 systemctl status mysql…

漏洞检测工具:允许TRACE方法漏洞

允许TRACE方法漏洞 漏洞定义 TRACE方法是HTTP协议中定义的一种调试方法&#xff0c;主要用于测试或诊断Web服务器连接。Web服务器在配置时未正确禁用HTTP TRACE方法&#xff0c;从而允许客户端向服务器发送TRACE请求&#xff0c;并导致服务器返回可能包含敏感信息的响应。 漏…

linux socket编程之udp_dict_serve服务端--引入配置文件

注意&#xff1a;本篇博客只是对上一篇博客功能的增加 1.创建配置文件(翻译) Dict.txt apple: 苹果 banana: 香蕉 cat: 猫 dog: 狗 book: 书 pen: 笔 happy: 快乐的 sad: 悲伤的 run: 跑 jump: 跳 teacher: 老师 student: 学生 car: 汽车 bus: 公交车 love: 爱 hate: 恨 hell…

ESP32S3 使用LVGL驱动LCD屏(ST7789主控)

ESP32S3 使用LVGL驱动LCD屏&#xff08;ST7789主控&#xff09; 目录 1 分析原理图 2 驱动、点亮LCD(ST7789) 2.1 在工程中添加目录、文件 2.2 添加esp_lvgl_port组件 2.3 对工程进行必要的配置 2.4 编写必要代码 3 烧录、验证 1 分析原理图 要使用SOC驱动LCD屏&#…

Sigrity Optimize PI CapGen仿真教程文件路径

为了方便读者能够快速上手和学会Sigrity Optimize PI和 Deacap Generate 的功能&#xff0c;将Sigrity Optimize PI CapGen仿真教程专栏所有文章对应的实例文件上传至以下路径 https://download.csdn.net/download/weixin_54787054/90171471?spm1001.2014.3001.5503

2024年“羊城杯”粤港澳大湾区网络安全大赛 初赛 Web数据安全AI 题解WriteUp

文章首发于【先知社区】&#xff1a;https://xz.aliyun.com/t/15442 Lyrics For You 题目描述&#xff1a;I have wrote some lyrics for you… 开题。 看一下前端源码&#xff0c;猜测有路径穿越漏洞 http://139.155.126.78:35502/lyrics?lyrics../../../../../etc/passw…

NLP 中文拼写检测开源-03-hunspell 拼写纠正算法入门介绍 CSC

拼写纠正系列 NLP 中文拼写检测实现思路 NLP 中文拼写检测纠正算法整理 NLP 英文拼写算法&#xff0c;如果提升 100W 倍的性能&#xff1f; NLP 中文拼写检测纠正 Paper java 实现中英文拼写检查和错误纠正&#xff1f;可我只会写 CRUD 啊&#xff01; 一个提升英文单词拼…