小程序商品页性能优化开发实践

小程序商品页面性能优化开发实践

• 前言

小程序的性能又可以分为「启动性能」和「运行时性能」。「启动性能」让用户能够更快的打开并看到小程序的内容，「运行时性能」保障用户能够流畅的使用小程序的功能。除了本身的功能之外，良好性能带来的良好用户体验，也是小程序能够留住用户的关键。

• 优化性能诊断工具

诊断工具能让开发者更好地知道性能瓶颈在哪里，并且能让用户在优化后，更好地知道效果如何。微信官方提供的性能诊断工具有：

1. 代码依赖分析

该工具可以帮助开发者分析代码中的依赖关系，以便更好地优化代码的结构和性能。通过分析代码的依赖关系，开发者可以确定哪些代码模块是最重要的，以及哪些模块可能需要进行重构或优化。该工具可以帮助开发者分析代码中的依赖关系，以便更好地优化代码的结构和性能。通过分析代码的依赖关系，开发者可以确定哪些代码模块是最重要的，以及哪些模块可能需要进行重构或优化。

1. 性能报告

该工具可以为开发者提供有关应用程序性能的详细信息，包括加载时间、响应时间、资源使用情况等。这些信息可以帮助开发者确定应用程序的性能瓶颈，并采取相应的措施来提高应用程序的性能。

1. 代码质量扫描

该工具可以帮助开发者分析代码的质量，以便更好地管理和维护代码。通过分析代码的质量，开发者可以确定哪些代码模块需要进行重构或优化，以便更好地满足业务需求并提高代码的可维护性和可扩展性。

1. 调试区的 Performance 面板

该工具可以帮助开发者分析应用程序的性能，包括CPU、内存、网络和渲染等方面。通过 Performance 面板，开发者可以查看代码执行的时间线、函数调用栈等信息，以便更好地确定性能瓶颈并进行优化。

1. Memory 面板

该工具可以帮助开发者分析应用程序的内存使用情况。通过 Memory 面板，开发者可以查看内存使用情况的时间线、对象分配情况、垃圾收集情况等信息，以便更好地确定内存泄漏等问题并进行优化。

1. JavaScript Profiler 面板

该工具可以帮助开发者分析JavaScript代码的执行情况。通过 JavaScript Profiler 面板，开发者可以查看JavaScript代码的执行时间、函数调用次数、内存使用情况等信息，以便更好地确定JavaScript代码的性能瓶颈并进行优化。

1. 体验评分(Audits)面板

该工具可以帮助开发者评估应用程序的用户体验。通过 Audits 面板，开发者可以查看应用程序在加载速度、响应速度、可访问性、SEO优化等方面的得分情况，以便更好地确定哪些方面需要进行优化以提高用户体验。

1. 对于具体的业务代码，我们通过打时间戳的形式，数字化业务逻辑执行的时间，显性量化优化后的效果。

开发者量化业务逻辑的执行时间，以便更好地确定业务逻辑的性能瓶颈并进行优化。通过在关键代码位置打时间戳并记录代码执行时间，开发者可以比较不同版本之间的执行时间差异，以便更好地确定优化效果。

• 启动性能优化

小程序的加载基本流程：

1. 1. 商品主图业务优化

行业内商详页面模板元素大致相同，在进入页面时，映入眼帘的肯定是商品主图。一般商户的主图照片都会十分高清，资源较大。对于性能来说是个较大消耗，如果简单压缩，就没办法满足高清的业务需求。基于以上背景，商详页对于主图照片有个特定的业务优化。

该方法说得简单点就是先加载清晰度差一点的商详照片，等非高清照片加载完成。在回调事件中。无缝替换成高清大图，用户无感知。

具体实现方案：

1. 1. 1. 技术实现方案

首先在图片中预加载 2 个元素。分别加载资源非高清大图

{picFilter(item || '//:0','md', pictureRatio)

以及高清大图

picFilter(item || '//:0','lg', pictureRatio)

利用 hasLoad 变量控制元素加载。加载不同清晰度的图片方法是 picFilter, lg 是高清大图，md 表示非高清大图。

<swiper-item>
  <image
    wx:if="{
       {index === 0 && !hasLoad}}"