首页 > 编程语言 >【JavaScript】微信小程序:高效性能优化策略与实践

【JavaScript】微信小程序:高效性能优化策略与实践

时间:2024-04-22 19:12:15浏览次数:24  
标签:高效 微信 代码 JavaScript 程序 组件 优化 性能 页面


本文作者:黄启聪,碧桂园服务前端开发高级工程师,专注于运用前沿的Web技术提升工作效率,并致力于打造卓越的交互式用户体验。

01 前言
目前,凤凰会商城支持全国商城、门店、酒司令、地推、群接龙等多种业务,并且具备多端能力。一套代码可以在凤凰会APP、移动端H5和微信小程序中运行,研发效率得到提高的同时,还能够更快地支持业务迭代。

随着业务的持续更新和迭代,凤凰会商城小程序的渲染性能逐步下降,微信后台性能评估表现一般,同时在互联网人口红利消失、增量变缓的背景下,用户对性能的要求不断提高。因此,性能优化已成为开发者必须关注并解决的重要课题。本文将介绍微信小程序性能优化的关键策略和实践,帮助开发者提供更出色的用户体验,以便更好地留住来之不易的增量用户,进一步助力业务成长。

02 性能指标概述
在介绍性能优化之前,我们先来了解一下小程序的启动流程。了解小程序的启动流程可以帮助开发者更有针对性地选择性能优化的手段,分析性能优化的效果,并概述常见的性能指标和问题,为后续的优化工作打下基础。

其中关键的几个监控指标字段和对应意义如下:

上表对应凤凰会商城页面加载的几个关键阶段,下面就门店示例其他页面类推即可:

微信小程序评测中,性能评测报告会根据上面指标加权平均得出性能评定,如图:

性能优化是通过各种技术手段和策略来提高小程序的代码包体积、代码注入、首屏渲染性能和网络请求等方面的表现,从而提升应用运行性能和用户体验需求。

03 性能优化策略和实践
1、优化启动时间
(1)分析包体积构成,移除冗余无用的模块
启动时间是用户对小程序的第一印象,直接影响用户的留存和使用率。因此,我们深入分析了启动时间对用户体验的影响。

从小程序启动流程中可以看出,下载时间是启动时间中的重要瓶颈。当用户首次访问小程序或小程序版本更新时,代码包的下载会影响启动时间。

下载时间长短受到网络环境、代码包压缩后大小以及是否命中增量更新等因素的影响。为了优化用户体验,小程序平台将单个小程序代码包的大小上限限制为2M。针对代码包体积的优化,我们采取了以下策略:

(2)分包策略优化
根据分析工具的结果显示,商城小程序的优化重点是从主包中去除多余的类库依赖,并将非主包依赖的配置文件下沉到对应的业务子包中。通过这样的优化措施,可以减少代码冗余并对代码进行精简,从而提高小程序的性能和效果。

分包策略优化,每个子包体积控制在1.5M以下,理想状态控制在500K左右。

将用户常用页面汇集到一个相对独立的子包中形成闭环访问,从而避免页面切换时需要重新下载相关联的其他子包内容。如下图所示:


微信开发者工具的代码包体积分析显示,经过调整后每个关键业务子包的大小控制在500K左右。这意味着用户将能够更快地加载关键页面,从而提升用户体验。

(3)分包预下载
通过路径分析来制定分包预下载策略,可以将小程序的页面根据依赖关系进行划分,将相互依赖的页面进行预下载,可以有效减少页面切换时的加载时间。页面依赖关系可以通过微信开发者工具的“数据分析”功能中的“行为分析”模块查看。页面路径分析如图所示:

如果用户访问小程序的主页或商品列表页面后,下级路径中访问搜索页的比例较高,则可以配置在访问到搜索页的上级页面时就预下载搜索页。代码示例如下:

点击查看代码

{
  "preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": [
        "search",
        "oto",
      ]
    },
    "pages/goodsDetail/goodsDetail": {
      "packages": [
        "search",
        "pagesLogin",
        "oto"
      ]
    },
    "pages/user/user": {
      "packages": [
        "pagesLogin"
      ]
    },
    "pagesLogin/login/login": {
      "packages": [
        "privacy"
      ]
    }
  }
}

优化启动时间的实践技巧包括减少代码冗余、调整分包策略和页面预加载。通过精简代码、合理加载资源和提前预加载页面,可以显著缩短小程序的启动时间,提升用户体验。

2、优化代码注入
代码注入是小程序启动过程中的性能瓶颈之一。我们将分析代码注入对性能的影响,并介绍一些减少注入代码数量和优化注入效率的方法,如按需注入、异步注入和使用合适的代码格式等,以提升小程序的代码注入性能。针对代码注入优化主要采取的策略是:

(1)启动过程中减少同步API的调用
在小程序启动流程中,会顺序同步执行App.onLaunch、App.onShow、Page.onLoad和Page.onShow。

在小程序初始化代码和上述启动相关的生命周期中,应尽量减少或不调用同步API。

同步API虽然使用起来更简单,但会阻塞当前JS线程,影响代码执行。因此,如非必要,应尽可能使用异步API代替同步API,并将启动过程中非必要的同步API调用延迟到启动完成后进行。

针对减少同步API的调整策略:

同步API首次调用成功后,将结果缓存起来,之后再次调用时直接从缓存中获取。

同步API一般都有对应的异步接口,可以尽量使用异步接口。

同步API可能会影响页面渲染,可以考虑延迟到渲染完成后再调用。

(2)按需注入
通常情况下,小程序启动时会将所有代码包中的JS代码全部注入,包括未访问的页面和未用到的自定义组件,这会影响注入耗时和内存占用。

点击查看代码
{
  "lazyCodeLoading": "requiredComponents"
}

注意:启用按需注入后,页面中的所有自定义组件都会被注入和加载,建议开发者及时移除未使用的自定义组件声明,并尽量避免在全局声明使用率低的自定义组件,否则可能会影响按需注入的效果。

通过合理地管理和优化代码注入,可以减少不必要的代码注入数量,提高注入效率,从而提高小程序的启动速度和运行性能。

3、优化渲染性能
渲染性能直接关系到小程序的流畅度和响应速度。在本节中,我们将探讨减少页面渲染时间的关键策略,包括减少DOM元素、避免过度绘制和使用CSS动画等,帮助开发者提升小程序的渲染性能。

(1)避免引用未使用的自定义组件
通过减少不必要的组件加载和渲染,可以显著提升小程序的启动速度和渲染性能。为了避免引用未使用的自定义组件,我们可以采取以下实践策略:

分析和评估组件的使用情况:在开发过程中,仔细分析并评估每个自定义组件的使用情况。确保只在需要的页面或组件中引用和使用自定义组件,避免不必要的引用。

移除未使用的组件引用:定期审查代码并检查自定义组件的引用,移除未被使用的组件引用。可以通过代码静态分析工具或IDE的功能来辅助识别未使用的组件引用。

动态引用组件:对于一些特定场景,可以考虑在需要的时候动态引用自定义组件。通过使用条件判断或动态渲染的方式,根据实际需要来决定是否引用该组件,避免在不需要的情况下加载和渲染组件。

(2)非必须组件延迟渲染
通过非必须组件延迟渲染可以将未使用到的组件的渲染过程延迟到用户需要使用时才进行,可以减少首次渲染DOM元素渲染数量,从而提升首屏渲染速度。代码示例如下:

点击查看代码
// common/mixins/universal.js
export default {
  data() {
    return {
      isLazyShow: false,
    }
  },
  onReady() {
    this.isLazyShow = true
  },
}
// main.js
import universal from "@common/mixins/universal"
Vue.mixin(universal)
// 门店页面 oto.vue
<template>
    <Page>
    ....
        <!-- 提升页面初始化速度 -->
        <view v-if="isLazyShow">
            <!-- 多规弹窗 -->
            <goods-sku />
            <!-- 分享海报 -->
            <fhh-poster-popup />
            <!-- 省钱卡秒杀商品弹窗 -->
            <common-dialog />
            定位切换门店
            <uni-popup />
            ...
        </view>
    </Page>
</template>

通过优化页面结构、减少不必要的DOM元素和延迟渲染等方法,可以有效降低小程序的页面渲染时间,提升用户的交互体验。

** 4、优化网络请求**
网络请求是小程序中常见的性能瓶颈之一。我们将分析网络请求对性能的影响,并介绍一些减少请求次数和优化请求大小的方法,如合并请求、缓存数据和使用合适的数据格式等,以提升小程序的网络请求性能。

(1)缓存请求数据
小程序提供了wx.setStorage、wx.getStorage等读写本地缓存的能力,数据存储在本地,返回会比网络请求快。当使用小程序的本地缓存功能时,可以优先从缓存中获取数据来渲染视图,然后在后台进行网络请求并更新缓存。以下是一个示例代码,演示了如何使用本地缓存读取和更新数据:

点击查看代码
// 从缓存中获取数据
function getDataFromCache() {
  try {
    const value = uni.getStorageSync('myData'); // 使用指定的键名获取缓存数据
    if (value) {
      // 如果缓存中存在数据,则使用缓存数据进行渲染
      renderView(value);
    } else {
      // 如果缓存中不存在数据,则进行网络请求
      fetchDataFromServer();
    }
  } catch (e) {
    // 异常处理
    console.error('Failed to read data from cache:', e);
    fetchDataFromServer();
  }
}

(2)合并请求接口
当在小程序中需要同时发起多个接口请求,并在所有请求完成后进行处理时,可以使用Promise.all方法来合并策略。Promise.all接受一个由Promise对象组成的数组,并返回一个新的Promise对象,该Promise对象在所有的Promise都成功解析后才会被解析。

以下是一个示例代码,展示了如何使用Promise.all合并多个接口请求的策略:

点击查看代码
// 多个接口请求合并策略
function mergeApiRequests() {
    const promiseValues = [
      apiGoods.getGoodsStaticInfo(o),
      apiGoods.getGoodsStaticOtherInfo(o),
      apiGoods.getGoodsStaticDrpInfo(o),
      apiGoods.getGoodsStaticUserInfo(o),
    ]
    Promise.all(promiseValues).then((responses) => {
        const [goodsInfoRes, 
        otherInfoRes = {}, 
        drpInfoRes = {}, userInfoRes = {}] = responses
        // 所有请求都成功完成后的处理逻辑
        console.log('All requests completed:', responses);
        // 在这里对请求结果进行处理
        // results 是一个数组,包含了每个请求的返回结果
    })
    .catch(error => {
      // 请求过程中出现错误的处理逻辑
      console.error('Error occurred during requests:', error);
    });
}

// 调用合并接口请求函数
mergeApiRequests();
图片
上下、左右滑动查看更多

图片

通过合理地管理和优化网络请求,可以减少不必要的请求次数,从而提高小程序的加载速度和响应性能。

04 总结与展望
通过实施上述多种优化措施后,我们能够通过微信官方We分析平台轻松查看凤凰会商城小程序的性能指标和启动流程,从而及时发现并解决页面性能问题。这些优化措施显著提升了凤凰会商城小程序的运行性能——根据微信官方We分析平台的数据,凤凰会商城小程序性能表现上明显优于同类应用的均值360m。



通过实施上述优化措施,凤凰会商城小程序在性能方面取得了显著成果,这为我们提供了良好的基础,有助于持续改进和发展凤凰会商城小程序,为用户提供更出色的体验。

未来,我们将持续关注凤凰会商城小程序的性能优化,以确保用户能够快速、流畅地访问和浏览凤凰会商城,为用户带来便捷、高效和愉悦的购物体验。

标签:高效,微信,代码,JavaScript,程序,组件,优化,性能,页面
From: https://www.cnblogs.com/bkyfw/p/18151273

相关文章

  • js逆向实战之微信公众平台pwd参数解密
    网址:https://mp.weixin.qq.com/分析过程调出开发者工具,切换到network模块,随便输入一个账号和密码,抓包。看到pwd参数被加密了,接下来就是去找到pwd参数的加密过程。但其实这里可以进行加密方法的猜测,密码处输入123456,抓包。相信有经验的人可以很快的反应出是个md5算法。其......
  • mumu模拟器上微信安装目录缓存目录
    前言全局说明mumu模拟器上微信安装目录缓存目录一、微信安装目录/storage/emulated/0/Android/data/com.tencent.mm二、缓存目录/data/data/com.tencent.mm/cache/<一串32位数字>/finder/video三、四、免责声明:本号所涉及内容仅供安全研究与教学使用,如出现......
  • 2024-04-22 微信小程序开发之ios输入框光标指向不正确
    业务场景:微信小程序开发中,页面有一个固定在底部(实测只要是设置了固定的输入框都会这样,如果可以改变布局,不固定定位则可避免此问题)的输入框,点击输入框输入文字,操作流程完成。但是!在神奇的ios系统中却不行,就是点击输入框,你是无法触发到输入框的,说白了点不到,安卓就没有这毛病。原......
  • 02_微信小程序常用的方法封装
     消息提示框封装://消息提示框封装/**//提示的内容title:'消息提示框',//提示的内容icon:'success',//提示的图标,success(成功)、error(失败)、loading(加载)、none(不显示图标)duration:2000,//提示的延迟时间mask:true//是否显示透......
  • 微信小程序功能-----基础轮播图配置
    使用swiper设置轮播图,下面是实现效果图页面结构<swiperclass="content-info-slide"indicator-color="rgba(255,255,255,.5)"indicator-active-color="#fff"indicator-dotscircularautoplay><swiper-item><imagesrc="/page......
  • 4 22微信小程序商品浏览
     需要四个接口:     ......
  • LED车灯驱动DC-DC降压恒流芯片AP5174高效率线性调光IC摩托车电动车手电筒
    产品描述AP5174是一款效率高,稳定可靠的LED灯恒流驱动控制芯片,内置高精度比较器,固定关断时间控制电路,恒流驱动电路等,特别适合大功率LED恒流驱动。AP5174采用ESOP8封装,散热片内置接SW脚,通过调节外置电流检测的电阻值来设置流过LED灯的电流,支持外加电压线性调光,最大电......
  • LED车灯IC降压恒流驱动AP5103大功率95%高效率深度调光摩托车灯芯片
    产品描述AP5103是一款效率高,稳定可靠的LED灯恒流驱动控制芯片,内置高精度比较器,固定关断时间控制电路,恒流驱动电路等,特别适合大功率LED恒流驱动。AP5103采用ESOP8封装,散热片内置接SW脚,通过调节外置电流检测的电阻值来设置流过LED灯的电流,支持外加电压线性调光,最大电......
  • 电动车摩托车灯DC-DC降压恒流芯片AP5170支持线性调光95%高效率IC
    产品描述AP5170是一款效率高,稳定可靠的LED灯恒流驱动控制芯片,内置高精度比较器,固定关断时间控制电路,恒流驱动电路等,特别适合大功率LED恒流驱动。AP5170采用ESOP8封装,散热片内置接SW脚,通过调节外置电流检测的电阻值来设置流过LED灯的电流,支持外加电压线性调光,最大电......
  • Java集成系列:高效构建自定义插件
    前言随着软件开发的快速发展和需求的不断增长,开发人员面临着更多的压力和挑战。传统的开发方法需要花费大量的时间和精力,而低代码开发平台的出现为开发人员提供了一种更加高效、快速的开发方式。今天小编就以构建命令插件为例,展示如何使用Java语言高效构建自定义插件。环境准备......