前言
Taro是一个开放的跨端跨框架解决方案，广泛应用于许多小程序和H5应用。我们经常收到开发者的反馈，例如“绘图速度慢”、“幻灯片不流畅”、“性能与原生应用不同”。由此可见，性能问题是始终困扰开发者的关键问题。
熟悉Taro的开发者应该知道，相比Taro 1/2，Taro 3是一个更注重运行时和轻量级编译的框架。它的优点是提供了更高效的代码编写方式，并且拥有更丰富的生态系统。然而，这也意味着可能会有一些性能损失。
然而，使用Taro 3 并不意味着您必须牺牲应用程序性能。事实上，Taro 已经提供了一套性能优化技术，并持续探索更极致的优化方案。
本文介绍了一些小程序开发最佳实践，可以帮助您最大限度地提高小程序应用程序的性能。
一、如何提升初次渲染性能
如果首次渲染的数据量很大，页面加载过程中可能会出现一段时间的白屏。为了解决这个问题，Taro 提供了预渲染功能。
使用Prerender 非常简单：只需找到位于项目根目录的config 文件夹中的三个项目配置文件之一，然后根据您的项目进行修改。在编译时，Taro CLI 根据您的设置自动启动预渲染功能。
const config={ . mini: { prerender: { match: 'pages/shop/**', //所有以`pages/shop/` 开头的页面参与预渲染include: ['pages/any/way/index'],//`pages/any/way/index`也参与预渲染except: ['pages/shop/index/index'] //`pages/shop/index/index`也参与预渲染} }} ;module .exports=config 详细说明请参考官方文档：https://taro-docs.jd.com/docs/prerender
二、如何提升更新性能
出现该问题的原因是Taro 使用小程序模板进行渲染。所有setData 更新都必须由页面对象调用。复杂的页面结构会降低更新性能。
如果级别太深，setData 的数据结构将如下所示：
page.setData({ 'root.cn.[0].cn.[0].cn.[0].cn.[0].markers': [],}) 期望的setData 数据结构：
Component.setData({ 'cn.[0].cn.[0].markers':[],}) 目前实现上述结构以达到本地更新效果、提高更新性能的方式有两种。
1. 全局配置项 baseLevel
对于不支持模板递归的小程序（如微信、QQ、京东小程序），Taro 在DOM 层级达到一定数量时，使用原生自定义组件辅助递归渲染。简单来说，当DOM 结构超过N 层时，Taro 使用原生自定义组件进行渲染（N 的值可以通过更改配置项的baseLevel 来调整，可以设置为8 或4）。
请注意，这是全局设置，因此您可能会遇到以下问题：
Flex 布局在跨越本机自定义组件时失败（这是影响最大的问题）。在SelectorQuery.select 方法中，您需要添加方法来跨自定义组件编写后代选择器：the-ancestor .the-descendant。
2. 使用 CustomWrapper 组件
CustomWrapper组件的功能是创建一个原生自定义组件，用于调用后代节点上的setData方法，以达到本地更新效果。
您可以使用它来包装遇到更新性能问题的模块。例如：
import { View, Text } from '@tarojs/components'export default function () { return (View className='index' TextDemo/Text CustomWrapper GoodsList //CustomWrapper /View )}
三、如何提升长列表性能
长列表是常用组件。生成或加载大量数据可能会导致严重的性能问题，尤其是在低端计算机上，并且可能会导致明显的延迟。
为了解决长列表的问题，Taro 提供了VirtualList 和VirtualWaterfall 组件。原理是只渲染当前可见区域（可见视口）的视图，当用户滚动到可见区域时，渲染隐藏区域的视图，使得长列表的滚动更加流畅。
1. VirtualList 组件（虚拟列表）
以React Like框架为例，可以直接部署组件。
import VirtualList from '@tarojs/components/virtual-list' 最简单的长列表组件是：
function buildData(offset=0) { return Array(100) .fill(0) .map((_, i)=i + offset)}const Row=React.memo(({ id,index, data })={ return ( View id={id} className={index % 2 ? 'ListItemOdd' : 'ListItemEven'} Row {index} : {data[index]} /View )})export 默认类Index extends Component { state={ data: buildData(0), } render() { const { data }=this.state const dataLen=data.length return (VirtualList height={800} /* 列表高度*/width='100%' /*列表高度宽度*/item={Row} /* 列表的单个item组件，这里只能传入一个组件*/itemData={data} /* 渲染列表数据*/itemCount={dataLen} /* 列表渲染长度*/itemSize={ 100} /* 列表项高度*//) }}更多信息请参考官方文档：https://taro-docs.jd.com/docs/virtual -list
2. VirtualWaterfall 组件（虚拟瀑布流）
您可以使用React Like框架直接部署组件。
import { VirtualWaterfall } from `@tarojs/components-advanced` 最简单的长列表组件是：
function buildData(offset=0) { return Array(100) .fill(0) .map((_, i)=i + offset)}const Row=React.memo(({ id,index, data })={ return ( View id={id} className={index % 2 ? 'ListItemOdd' : 'ListItemEven'} Row {index} : {data[index]} /View )})export 默认类Index extends Component { state={ data: buildData(0), } render() { const { data }=this.state const dataLen=data.length return (VirtualWaterfall height={800} /* 列表高度*/width='100%' /*列表高度宽度*/item={Row} /* 列表的单个item组件，这里只能传入一个组件*/itemData={data} /* 渲染列表数据*/itemCount={dataLen} /* 列表渲染长度*/itemSize={ 100} /* 列表项高度*//) }}更多信息请参考官方文档：https://taro-docs.jd.com/docs/virtual -waterfall
四、如何避免 setData 数据量较大
如您所知，有两个主要因素极大地影响您的小程序的性能。是单位时间内setData的数据量和setData函数的调用次数。在Taro 中，setData 是批量更新的，所以一般只需要关心setData 的数据大小即可。以下是一些示例，展示了如何避免数据量过多的问题。
例子 1：删除楼层节点要谨慎处理
目前，Taro 处理节点删除的方式存在一些缺陷。假设存在以下代码：
View !-- Carousel-- Slider/!-- Product Groups-- Products/!-- 模态弹出窗口-- {isShowModal Modal /}/View 当isShowModal 从true 更改为false 时，模态弹出窗口消失。此时Modal组件的兄弟节点被更新，setData中的数据就变成了Slider+Goods组件的DOM节点信息。
一般来说，这不会对性能产生重大影响。但是，如果要删除的节点的兄弟节点的DOM 结构非常复杂，比如地板组件，则删除操作的副作用会增加setData 中的数据量，从而影响性能。
为了解决这个问题，您可以将删除操作分开并进行优化。
View !-- 轮播-- 滑块/!-- 产品组-- 商品/!-- 模态弹窗-- View {isShowModal Modal /} /View/View
例子 2：基础组件的属性要保持引用
用于基本组件（View、Input 等） , ) 是非基本类型，假设存在以下代码描述：
地图latitude={22.53332} longitude={113.93041} mark={[ { latitude: 22.53332, longitude: 113.93041, }, ]}/每次渲染时，React 都会对底层组件的属性进行浅层比较。如果发现标记引用不同，则会触发组件属性的更新。这最终会导致setData 操作频繁执行并增加数据量。 为了解决这个问题，可以使用状态、闭包等方法来维护对象的引用，避免不必要的更新。
地图纬度={22.53332} 经度={113.93041} 标记={this.state.markers}/
五、更多最佳实践
1. 阻止滚动穿透
在小程序开发中，如果有滑动遮罩或者弹窗等overlay元素，滑动事件就可以了页面上有气泡，页面元素也随之滑动。设置catchTouchMove 通常可以防止事件冒泡。
但由于Taro3事件机制的限制，小程序事件以绑定的形式进行绑定。因此，与Taro1/2不同，调用e.stopPropagation()并不能阻止滚动事件的侵入。
解决方案1：使用样式（推荐）
对于需要禁用滚动的组件，可以编写以下样式：
{溢出：隐藏； height: 100vh;}解决方案2：使用catchMove
对于少数组件，例如Map组件，使用样式固定宽度和高度并不会阻止滚动。这是因为这些组件本身具有滚动功能。因此，第一种方法无法处理向上冒泡到Map 组件的滚动事件。 在这种情况下，您可以向View 组件添加catchMove 属性。
//该View组件绑定的是catchtouchmove事件而不是bindtouchmoveView catchMove/
2. 跳转预加载
小程序调用Taro.navigateTo等跳转类API后，新页面的onLoad事件持续延迟。因此，您可以在调用Jump API之前预先执行一些操作（例如网络请求），以提高用户体验。
熟悉Taro 的开发者可能还记得，Taro 1/2 有一个钩子函数，叫做componentWillPreload。然而，这个钩子功能在Taro 3 中已经被删除了。不过，开发者可以使用Taro.preload() 方法来实现跳转预加载效果。
//pages/index.jsTaro.preload(fetchSomething())Taro.navigateTo({ url: '/pages/detail' })//pages/detail.jsconsole.log(getCurrentInstance().preloadData)
3. 建议把 Taro.getCurrentInstance() 的结果保存下来
开发中流程我们经常使用Taro.getCurrentInstance() 方法来获取小程序的应用、页面对象、路由参数等数据。但是，频繁调用此方法可能会导致问题。
因此，为避免频繁调用该方法，建议将Taro.getCurrentInstance() 的结果保存在组件中，需要时直接使用。这提高了代码执行效率和性能。
class Index extends React.Component { inst=Taro.getCurrentInstance()componentDidMount() { console.log(this.inst) }}
六、预告：小程序编译模式（CompileMode）
除了最佳性能之外，Taro 还始终突破界限。按照上述步骤，小程序编译模式（CompileMode）即将上线。
什么是编译模式？
前面提到，Taro3 是一个运行时密集型框架，随着节点数量增加到一定程度，渲染性能会明显下降。 因此，为了解决这个问题，Taro 引入了CompileMode 编译模式。
CompileMode 在编译阶段扫描开发者的代码，将JSX 和Vue 模板代码预编译成对应的小程序模板代码。这样就减少了小程序渲染层的虚拟DOM树节点数量，提高了渲染性能。使用CompileMode可以有效减轻小程序的渲染负担，提高应用程序性能。
如何使用？
开发者只需在小程序的基础组件中添加compileMode属性，该组件及其子组件就会被编译成单独的小程序模板。
function GoodsItem () { return ( ViewcompileMode . /View )}第一阶段的开发工作已经完成。测试版即将发布。请注意。 如果想提前了解，请查看RFC文档：https://github.com/NervJS/taro-rfcs/blob/feat/compile-mode/rfcs/0000-compile-mode.md
结尾
我们相信，通过采用Taro 的最佳实践，您可以显着提高小程序应用的性能。未来，我们将继续探索进一步的优化方案，覆盖更广泛的应用场景，为开发者提供更高效、更优质的开发体验。
如果您对项目有总结的经验或想法，请提交文章与更多开发者分享。感谢您的支持。
作者：京东零售Rijino
来源：京东云开发者社区转载请注明出处。
版权声明：本文由今日头条转载，如有侵犯您的版权，请联系本站编辑删除。