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

news2024/12/24 5:25:14

我们团队在利用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.coloradmin.cn/o/2264544.html

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

相关文章

纯血鸿蒙APP实战开发——textOverflow长文本省略

介绍 本示例实现了回复评论时&#xff0c;当回复人的昵称与被回复人的昵称长度都过长时&#xff0c;使用textOverflow和maxLines()实现昵称的长文本省略展示的功能。 效果图预览 使用说明 点击评论中的"回复"&#xff0c;在输入框中输入回复内容&#xff0c;点击发…

【java面向对象编程】第九弹----抽象类、接口、内部类

笔上得来终觉浅,绝知此事要躬行 &#x1f525; 个人主页&#xff1a;星云爱编程 &#x1f525; 所属专栏&#xff1a;javase &#x1f337;追光的人&#xff0c;终会万丈光芒 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 一、抽象类 1.1基本介绍 &…

Qt笔记:网络编程UDP

一、铺垫 1.Qt框架使用的网络结构的基础就是Linux学习的网络编程基础&#xff1b;所以使用Qt写客户端&#xff0c;使用Linux写服务端&#xff1b;两者是可以实现互联的 二、UDP 网络编程UDP使用套路&#xff1a; 1.首先在.pro文件中加上network&#xff0c;使Qt可以搭载网络…

Redis存在安全漏洞

Redis是美国Redis公司的一套开源的使用ANSI C编写、支持网络、可基于内存亦可持久化的日志型、键值&#xff08;Key-Value&#xff09;存储数据库&#xff0c;并提供多种语言的API。 Redis存在安全漏洞。攻击者利用该漏洞使用特制的Lua脚本触发堆栈缓冲区溢出漏洞&#xff0c;从…

【潜意识Java】蓝桥杯算法有关的动态规划求解背包问题

目录 背包问题简介 问题描述 输入&#xff1a; 输出&#xff1a; 动态规划解法 动态规划状态转移 代码实现 代码解释 动态规划的时间复杂度 例子解析 输出&#xff1a; 总结 作者我蓝桥杯&#xff1a;2023第十四届蓝桥杯国赛C/C大学B组一等奖&#xff0c;所以请听我…

ReactPress 1.6.0:重塑博客体验,引领内容创新

ReactPress 是一个基于Next.js的博客&CMS系统&#xff0c; Github项目地址&#xff1a;https://github.com/fecommunity/reactpress 欢迎Star。 体验地址&#xff1a;http://blog.gaoredu.com/ 今天&#xff0c;我们自豪地宣布ReactPress 1.6.0版本的正式发布&#xff0c;…

单元测试-Unittest框架实践

文章目录 1.Unittest简介1.1 自动化测试用例编写步骤1.2 相关概念1.3 用例编写规则1.4 断言方法 2.示例2.1 业务代码2.2 编写测试用例2.3 生成报告2.3.1 方法12.3.2 方法2 1.Unittest简介 Unittest是Python自带的单元测试框架&#xff0c;适用于&#xff1a;单元测试、Web自动…

带有 Elasticsearch 和 Langchain 的 Agentic RAG

作者&#xff1a;来自 Elastic Han Xiang Choong 讨论并实现 Elastic RAG 的代理流程&#xff0c;其中 LLM 选择调用 Elastic KB。 更多阅读&#xff1a;Elasticsearch&#xff1a;基于 Langchain 的 Elasticsearch Agent 对文档的搜索。 简介 代理是将 LLM 应用于实际用例的…

[react 3种方法] 获取ant组件ref用ts如何定义?

获取ant的轮播图组件, 我用ts如何定义? Strongly Type useRef with ElementRef | Total TypeScript import React, { ElementRef } from react; const lunboRef useRef<ElementRef<typeof Carousel>>(null); <Carousel autoplay ref{lunboRef}> 这样就…

stm32制作CAN适配器5--WinUsb上位机编写

上次我们要stm32制作了一个基于winusb有canfd适配器&#xff0c;今天我们来制作一个上位机程序来进行报文收发。 上位机还是用以前写好的&#xff0c;只是更改下dll文件。 项目链接器&#xff0c;输入&#xff0c;附加依赖项中增加winusb.lib winusb初始化&#xff1a;#incl…

C/C++圣诞树

系列文章 序号直达链接1C/C爱心代码2C/C跳动的爱心3C/C李峋同款跳动的爱心代码4C/C满屏飘字表白代码5C/C大雪纷飞代码6C/C烟花代码7C/C黑客帝国同款字母雨8C/C樱花树代码9C/C奥特曼代码10C/C精美圣诞树11C/C俄罗斯方块12C/C贪吃蛇13C/C孤单又灿烂的神-鬼怪14C/C闪烁的爱心15C…

图解HTTP-HTTP报文

参考资料&#xff1a;图解HTTP HTTP报文 用于HTTP协议交互的信息被称为HTTP报文。请求端的HTTP请求报文&#xff0c;响应端&#xff08;服务器端&#xff09;的叫做响应报文。HTTP报文本身是由多行&#xff08;CR LF作为换行符&#xff09;数据行构成的文本。 请求报文及响…

机器学习基础算法 (一)-线性回归

python 环境的配置参考 从零开始&#xff1a;Python 环境搭建与工具配置 线性回归的 Python 实现 线性回归是一种经典的机器学习算法&#xff0c;用于预测连续的目标变量。它假设目标变量和特征之间存在线性关系。本文将详细介绍线性回归的原理、Python 实现、模型评估和调优&…

Java字符串的|分隔符转List实现方案

字符串处理 问题背景代码实现代码优化原因分析实现方案 注意事项异常处理Maven未识别异常 问题背景 在项目组对账流程中&#xff0c;接收对方系统的对账文件&#xff0c;数据以|为分隔符&#xff0c;读取文件内容&#xff0c;分条入库。 代码实现 Java中将字符串转给list&am…

【HarmonyOs学习日志(14)】计算机网络之域名系统DNS

域名系统DNS 域名系统DNS——从域名解析出IP地址 文章目录 域名系统DNS概述域名到IP地址的解析 互联网的域名结构命名标准 域名服务器域名的解析过程 概述 域名系统DNS&#xff08;Domain Name System&#xff09;是互联网使用的命名系统&#xff0c;用来把便于人们使用的机器…

LabVIEW与PLC点位控制及OPC通讯

在工业自动化中&#xff0c;PLC通过标准协议&#xff08;如Modbus、Ethernet/IP等&#xff09;与OPC Server进行数据交换&#xff0c;LabVIEW作为上位机通过OPC客户端读取PLC的数据并进行监控、控制与处理。通过这种方式&#xff0c;LabVIEW能够实现与PLC的实时通信&#xff0c…

Restaurants WebAPI(四)——Identity

文章目录 项目地址一、Authentication&#xff08;身份认证&#xff09;1.1 配置环境(解决类库包无法引用)1.2 使用Authentication控制Controller的访问1.3 获取User的Context1.3.1 在Application下创建User文件夹1. 创建User.cs record类封装角色信息2. 创建UserContext.cs提供…

Java-32 深入浅出 Spring - IoC 基础 启动IoC 纯注解方式 SpringConfig web.xml

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 大数据篇正在更新&#xff01;https://blog.csdn.net/w776341482/category_12713819.html 目前已经更新到了&#xff1a; MyBatis&#xff…

Android Studio创建新项目并引入第三方so外部aar库驱动NFC读写器读写IC卡

本示例使用设备&#xff1a;https://item.taobao.com/item.htm?spma21dvs.23580594.0.0.52de2c1bbW3AUC&ftt&id615391857885 一、打开Android Studio,点击 File> New>New project 菜单&#xff0c;选择 要创建的项目模版&#xff0c;点击 Next 二、输入项目名称…

Trimble天宝三维激光扫描仪在建筑工程竣工测量中的应用【沪敖3D】

竣工测量是建筑项目竣工阶段的一个至关重要的环节&#xff0c;它为建筑工程的质量验收和成果核查提供了核心的参考依据。传统的竣工测量方法&#xff0c;如全站仪测量&#xff0c;主要依赖于现场人工操作&#xff0c;存在一些明显的局限性&#xff0c;例如作业时间长、工作量大…