微信微图的性能优化可以主要从两个主要方面分析：性能扫描工具和代码优化。

1。使用性能扫描工具

微信Mini计划提供了“经验评分”工具插头，可以使用它来获取一些性能数据和微弱的Mini -的明显缺陷，然后根据报告进行优化。

同时，为了促进开发人员从开发人员工具1.02及时发现迷你程序的体验。版本支持支持经验分数的“自动操作”功能。一旦您发现体验得分少于70分，系统将在面板上打印一条消息，以提示开发人员。

然后，根据效果图的分析报告，检查需要优化需要优化的详细信息，并根据说明一一一一优化它们。常见优化点包括：

此外，微信迷你计划官员还提供了以下一些要求：

2。其他常见的优化

2.1开始优化

对于开始 - UP性能优化，您可以从以下各个方面开始：

控制代码包大小

分包负载

独立分包合同

2.2第一个屏幕加载的经验优化建议2.3避免使用不当

当数据太大时，通信将带来巨大的消费。当大多数人面对漫长的滚动清单时，一开始处理的过程就是这样。问题;但是，当页面太多，几十页甚至数百页时，List的数据将变得越来越大，并且将越来越多的数据。因此，您来的越多，导致后背滚动，加载越来越慢。此外，由于的视图渲染层和数据逻辑处理层是从用户触发页面交互到处理数据逻辑的，而不是在同一线程上分开的，最后显示了页面。需要传输到视图的数据。因此，小程序本身也具有有限的数据，并且不能超过1M。

2.4短时间内的图片请求太多了

我一次发送了太多的图片请求，同时导致了多余的HTTP请求。 HTTP连接非常耗时，尤其是一个时间启动，一个时间 - 时间HTTP链接受到限制。例如，浏览器一次最多限制6个。因此，当渲染页面时，不应加载不在视图范围内的图片。只有元素出现在视图范围内。

为了实现此效果，我们可以通过t（）获得元素的位置，然后将其与页面滚动位置进行比较。如果出现在视图中，请加载显示图片。在特定的实施方面，我们可以由微信提供的失业微信。对象可用于推断用户是否可以看到某些节点以及用户可以看到多少比例。示例如下。

let data = list; data.forEach((item,index)=>{ this.createIntersectionObserver().relativeToViewport.observe(`.img-${index}`,res=>{ if (res.intersectionRatio > 0){ this.setData({ item.imgShow:true }) } }) })

2.5关键值在列表渲染中巧妙地使用

在列表渲染过程中，密钥值的使用可以改善列表渲染性能。在小计划开发中，页面的渲染主要分为以下步骤：

用WXML结构构建文档中的vdom虚拟编号。页面上有新的交互作用，生成新的vdor数字，然后与旧的互动数。查看更改的位置，然后进行相应的修改（删除，移动，更新值）和其他操作。最终将vdom渲染为真实的页面结构。

关键值的作用是在第二步中。当数据更改为触发渲染层重新呈现时，它将纠正密钥的组件。该框架将确保对其进行重新分配，而不是重新创建，以确保组件保持其自身状态的状态。并提高列表渲染的效率。

2.6避免使用不当

错误使用可能会导致重复渲染问题。因此，当使用时，请注意以下几点：