微信小程序的优化技巧都有哪些，优化方法

Posted 2023-05-04

微信小程序代码是一种计算机语言，但是很多代码比较长，浪费时间和空间，所以如何让我们的小程序代码瘦身减肥，是本文主要介绍的内容，教大家几招小妙计，希望可以有用处。
微信小程序在发布的时候，对代码的量是有限制的，不得超过1M，所以如果我们的小程序代码过长，那就不能发布小程序，所以再发代码时要避免一下几种情况：
第一、减少在微信小程序的UI上使用比较大的图片，可以选择用颜色式样来代替打的图片装饰小程序，如果实在想要使用大的图片可以将图片放到微信小程序的本地代码中，应该使用从远程URL地址加载图片的方式使用大的图片。还有大的资源文件也不要使用，或者尽量避免使用。
第二、不要让我们的代码太长太复杂，这样容易给人啰嗦的感觉，而且也会增加代码的空间，要让我们的代码符合逻辑，不要杂乱无章，太过复杂，不能简简单单的一个代码写的很复杂。点点客建议大家尽量不要使用组合嵌套的方式来写代码，能用一个view的方式就不要用多层次的view，减少代码的尺寸还有代码的性能对减少代码空间都是有帮助的。
第三、使用专业的压缩工具来优化我们的代码，在有些项目开发中，我们经常会使用一些前端工程化的工具来加工我们的代码，使用这些工具可以简化我们代码，使代码长度减少一大截，这种方法对微信小程序非常管用，在写微信小程序代码时我们不妨使用一下，这样可以尽量避免太长，空间太大的代码占用地方。
第四、在微信小程序文件上，我们可以用jsonminify来减少json文件的使用空间，减少json文件中多余没有用处的空格，还有uglify可以简化JS文件的空间，对其进行语法上的优化还有文本压缩。
还有很多微信小程序代码优化的方法，可能还有一些没有被开发出来，大家可以在实践中不断优化，使微信小程序的代码达到最优。 参考技术A 很多企业开通了小程序，但是流量寥寥无几，那么大家来问了小程序是像网站一样需要SEO吗？怎样能提高小程序的访问量？

实际上，越来越多的小程序诞生，小程序多了就需要搜索，那么如何让自己的小程序在众多的小程序中脱颖而出，这就需要小程序SEO优化。小马识途营销顾问告诉大家，微信小程序要靠微信搜索带来流量访问，这个过程虽不同于传统的seo，但其道理是大同小异的，只不过小程序不像网站那样可优化的空间比较大。

小马识途顾问在运营实践中梳理出了一系列的小程序优化经验，分享一些要点给大家。现阶段，小程序主要有三大流量入口，我把它分为三种类型

1：【被动型】搜索、附近的小程序 、用户分享

2：【主动型】公众号关联、门店二维码、文章群发、小程序 跳转

3：【推广付费】竞价排名、区域投放、公众号广点通

对于【被动型】的流量入口，我们可以在尽量少花钱的情况下可以做到的小程序排名优化，在说小程序优化之前，先和大家说一下小程序的搜索排名规则。

1：第一优先级——使用过的小程序

2：第二优先级——上线时间早的小程序

3：小程序的名字

4：小程序关键词被搜索的频率

5：小程序的使用次数

那么，对于小程序优化，我们应该从哪些方面去着手呢？小马识途营销顾问建议从以下几点入手：

一、注册时间

从搜索的角度来说，目前对于小程序的大多数热词， 越早注册的小程序排名越靠前，被人检索使用的几率就越高，小程序的排名就会越靠前 。所以，对于那些对小程序有需求，但是又不想过多投入的朋友来说，就需要赶早注册一个与行业相对应的小程序了，因为，第一个吃螃蟹的人，总能得到最美味的。

二、小程序名字

小程序的名字非常重要，它具有 唯一性 ， 一个好的名字直接决定了小程序被用户搜索到的概率 。举个例子：比如你想要装修房子，想通过小程序找一家装修公司，之前并没有用过这样的小程序，怎么办？

大多数的人会选择微信搜一搜，怎么搜？数据显示超过一半的人会直接输入地区+装修公司，而不是直接去搜索某一家的装修公司，除非是对这家公司特别的熟悉，所以说，提前抢注名字就非常重要了，地区+装修公司如果被人注册了，其他公司就无法使用了，流量很容易就被截走。

小程序的名字除了和业务相关，便于审核通过之外，建议选择1—2个指数高的词组合命名，需要注意的是名称太长不易于审核和被搜索到。

另外，小马识途顾问提示小程序名称注册时需要注意以下三个方面：

1：小程序名称唯一，且不可与不同主体的公众号重名。

2：小程序的名字不可以 以特殊字符来命名。

3：小程序的名字和简介、描述中，不得混有商业化用语、热门微信小程序名字、“国家级”、“最高级”等新广告法明令禁止或其他无关的词语

三、关键词

这是小程序推广优化最重要的因素， 在小程序后台的推广模块中可配置最多10个关键词，并且支持每个月修改三次，审核时间为7天。

需要注意的是，只有已经发布过正式版本的小程序可以使用这一功能，门店小程序暂不支持这一功能。

从关键词本身来说，有品牌词、竞品词、产品词、人群词、行业词之分，我们的目的是尽最大可能性截取关键词搜索流量。

首先 ，我们要分析自身的核心用户群体，即描绘用户画像。例如在家政行业，用户的搜索习惯，多以“保姆”、“维修”、“搬家”、“保洁”等词语为主，而不会直接去搜索家政。

其次，我们要分析用户终端的设备，它区别于PC端搜索，手机的操作系统会影响用户的搜索习惯，所以尽可能地选择短词，指数比较大的词。

第三，我们要研究自己的竞争对手，看哪些是我们能够模仿或者超越的，哪些是应该避开竞争的。比如关键词“外卖”已经被“美团”、“饿了吗”等行业的领头羊所霸占，布局的意义不大。
第四，关键词分析工具的使用，例如百度指数，微信指数包括Google 关键词 工具等。

以上就是小马识途对小程序优化的简要分析，小程序虽然不像网站具有很大的优化空间，但是不经过优化的小程序可能只有深藏闺中难以被用户找到，所以既然选择了布局微信小程序，就一定把这块工作做深做透，缺乏专业人员支持的可以选择小马识途这样的专业营销公司，定制化分析企业需求，量身打造属于企业自己的小程序优化方案和网络营销方案。 参考技术B 一、APP启动优化
运行机制：①所有脚本顺序解析执行②JS单线程阻塞③页面数量和启动耗时症相关

优化方式：①减少立即执行的代码数量②避免高开销和长时间阻塞代码③业务逻辑纳入页面生命周期中④做好缓存策略
二、数据管理优化
Data扁平设计：①提交最小变更数据②维护最小粒度数据
时机和频率：①多次变更并提交②正确使用生命周期
三、包大小治理
构建策略优化：①提取公共样式，利用@import规则②代码压缩，图片格式，压缩和外联
多APP聚合：①公共组件提取，代码重用②是否使用APP间唤起③删减次要功能 参考技术C 随着移动互联网的迅猛发展，越来越多的小程序被开发出来。小程序多了就需要搜索，如何让自己的小程序在众多的小程序中脱颖而出成为网络营销人才思考的主要问题。今天的新媒体运营实战就给大家讲解一下微信小程序优化技巧（侧重SEO方面）。

1、关键词
这是小程序推广优化最重要的因素，在小程序后台的推广模块中可配置最多10个关键词，并切支持每个月修改三次，审核时间为7天，我们要尽最大可能性截取关键词搜索流量。需要注意的是，只有已经发布过正式版本的小程序可以使用这一功能，门店小程序暂不支持这一功能。

2、小程序标题
小程序名称和微信公众号一样，名称都有唯一性（相同主体的公众号和小程序可同名），尽早注册避免其他人占用自己的名称，导致自己的小程序名称太长，影响排名。小程序的名称和简介、描写中，不得混有商业化用语、热点微信小程序名称、“国家级”、“第一流”等新广告法明令禁止或其余有关的词语。

请点击输入图片描述
3、小程序投放时间
越早注册小程序，排名越靠前，让用户添加的可能性就越大。小程序的上线时间对排名的影响在第二优先级里占50%的权重。

4、在附近的小程序中
虽然「附近的小程序」中并没有搜索功能，但是其排序的规则估计也有许多人关心。首先，影响排序的第一因素就是该小程序和使用人的距离。其次，也会在其中插入一些投放广告的小程序。小程序运营者如果能及时把握这股服务搜索入口的先机，势必会为未来的营销节省不少成本。

5、增加用户打开小程序的频率
小程序的使用率对自身在搜索窗口的排名有很大的影响，使用率越高，排名会提升，使用率越低，排名会下降。想要增加用户打开小程序的频率可以采用三种方法：模板消息推送、将单个需求分解多次使用、小程序有主动挖掘用用户下个需求的功能。

微信小程序性能优化技巧

微信小程序如果想要优化性能，有关键性的两点：

• 提高加载性能
• 提高渲染性能

接下来分别来介绍一下：

提高加载性能

首先，问一个问题，当用户点击小程序后发生了什么？

 

image

上图中的三个状态，我们经常遇到，它们分别对应小程序的下面三个状态：

• 有三个点的白屏（左侧）： 下载代码包的阶段
• 没有三个点的白屏（中间）： 业务代码注入和渲染的阶段
• 加载中（右边）： 业务代码中异步请求数据

总的来说，小程序呈现到用户面前，实际上经历了下面两个阶段：

• 运行环境的加载
• 下载代码包

下面具体介绍这两个阶段：

运行环境预加载

这步是微信做的。微信会在用户打开小程序之前就已经准备好环境，用户点击小程序入口后，直接下载小程序的代码包即可。

下载代码包启动小程序

小程序代码包里面的代码，不是小程序的源代码，而是编译、压缩、打包之后的代码包。

下图中，左侧的“预加载”对应的是运行环境的预加载，右侧的“小程序启动” 对应的是下载代码包启动小程序。

 

image

小程序提供的运行环境，分为逻辑层（AppService）和 视图层（webView），逻辑层是执行javascript的地方，视图层是渲染页面的地方。当小程序的代码包下载完毕后，业务代码分别注入逻辑层和渲染层。

提升加载性能的最最最关键性一点是，控制包的大小，这个也是微信官方的说法。

控制包的大小

提升体验最直接的方法是控制小程序包的大小，基本上可以说，1M的代码包，下载耗时1秒左右。

控制包的大小的措施

• 压缩代码，清理无用的代码
• 图片放在cdn
• 采用分包策略
  • 分包预加载
  • 独立分包（版本要求有点高）

除了上面讲的控制包的大小，对异步请求的优化也很重要。

对异步请求的优化

• onLoad 阶段就可以发起请求，不用等ready
• 请求结果放在缓存中, 下次接着用
• 请求中可以先展示骨架图
• 先反馈，再请求。比如说，点赞的按钮，可以先改变按钮的样式，再发起异步请求。

提升渲染性能

setData 干了啥

每调用一次setData, 都是逻辑层向渲染层的一次通讯，这个通信还不是直接传给webView, 而是通过走了native层，通讯的开销很大。

渲染层收到通讯后，还需要重新渲染出来，所以，emmm, 一次setData带来两次开销：通信的开销 + webview更新的开销。

 

image

在数据传输时，逻辑层会执行一次JSON.stringify来去除掉setData数据中不可传输的部分，之后将数据发送给视图层。同时，逻辑层还会将setData所设置的数据字段与data合并，使开发者可以用this.data读取到变更后的数据。

减少setData的数据量

如果一个数据不能会影响渲染层，则不用放在setData里面

合并setData的请求，减少通讯的次数

这个很好理解吧

列表的局部更新

在一个列表中，有n条数据，采用上拉加载更多的方式，假如这个时候想对其中某一个数据进行点赞操作，还能及时看到点赞的效果

此时，可以采用setData全局刷新，点赞完成之后，重新获取数据，再次进行全局重新渲染，这样做的优点是：方便，快捷！缺点是：用户体验极其不好，当用户刷量100多条数据后，重新渲染量大会出现空白期（没有渲染过来）

如果采用布局刷新，将点赞的id传过去，知道点的是那一条数据, 将点赞的id传过去，知道点的是那一条数据。

重新获取数据，查找相对应id的那条数据的下标（index是不会改变的），用setData进行局部刷新

this.setData({
    list[index] = newList[index]
})

小心后台页面的js

小程序中可能有n个页面，所有的这些页面，虽然都拥有自己的webview(渲染层)， 但是却共享同一个js运行环境。也就是说，当你跳到了另外一个页面（假设是B页面），本页面（假设是A页面）的定时器等js操作仍在进行，并且不会被销毁，并且会抢占B页面的资源。

在h5的环境中，当我们跳转到其他页面，老页面的js环境会被自动销毁，定时器什么都被销毁掉了，因此我们不需要关心老页面中，还有哪些js代码可能还会执行。但是在小程序中，我们必须手动的“清理”掉这样的代码。

小心onPageScroll

pageScroll 事件，也是一次通讯，是webview层向js逻辑层的通讯。这次通讯也是开销较大，如果考虑到这个事件被频繁的调用，回调函数如果有复杂的setData的话，emmmmm， 性能就会很差了。

 

image

小心获取节点位置

在h5 中的环境中，为了实现懒加载、下拉加载，我们不得不去获取节点的位置。

为啥说不得不，是因为我们本可以用新的api ——intersectionObject去轻松实现（google等主流浏览器都已经支持了），但是微信的内置X5浏览器很遗憾的不支持。

没想到，在小程序的环境中，微信竟然良心发现，支持intersectionObject api, 因此获取节点的信息，尽量还是用这api 吧。

尽可能使用小程序组件

自定义组件的更新只在组件内部进行，不受页面其他不能分内容的影响；比如一些运营活动的定时模块可以单独抽出来，做成一个定时组件，定时组件的更新并不会影响页面上其他元素的更新；各个组件也将具有各自独立的逻辑空间。每个组件都分别拥有自己的独立的数据、setData调用

优化心得

相比于上面的优化策略，最重要的是找出小程序中的性能瓶颈。在自己的优化实践中，遇到了下面的问题：

下拉加载更多，特别特别卡，通过列表局部更新的技巧，发现性能改善不大。 后来发现，是因为首页需要监听scroll事件，导致scroll事件被频繁的触发，回调函数中有耗时操作，导致onreachBottom事件被阻塞了，也就是说，要等大概1~2秒才会去发起下一页的请求。 取消掉scroll事件的监听，原本>4s的加载时间，控制在1s之内。