小程序开发指南之性能优化

索氏摄影王丽鑫 發表於 2019-12-4 09:58:00

<div>
<img src="https://img2018.cnblogs.com/blog/953927/201912/953927-20191204095723135-1801538580.jpg" alt="" style="display: block; margin-left: auto; margin-right: auto">
作者：HerryLo
原文永久链接： https://github.com/AttemptWeb/Record...
将从代码层面和项目层面，聊一聊微信小程序的性能优化问题，希望有所帮助。也是自己最近的一个总结。(前置知识：微信小程序的视图层是WebView支持，逻辑层是JSCore支持，逻辑层通过setData与视图层发生交互。每一个页面都是一个WebView页面）详见：小程序的运行环境
下面的内容不论是使用Taro框架开发，还是微信小程序原生开发，都是适用的。
<ul>
<li>代码层面
<ul>
<li>拆分组件</li>
<li>图片压缩</li>
<li>减少不必要数据</li>
<li>避免频繁setData</li>
<li>使用webView组件开发</li>
</ul>
</li>
<li>项目层面
<ul>
<li>拆分小程序</li>
<li>分包预加载</li>
<li>尽量升级版本库</li>
</ul>
</li>
</ul>
<h2 id="代码层面">#代码层面</h2>
通过代码细节提升性能，而且在这方面，空间是非常大的。对于比较早期的小程序项目，由于代码细节方面没有过多的考虑，也导致了开发出的小程序非常的消耗性能。下面将提到的一些点，不论是正在开发的项目，还是在维护的项目，都会有一定的帮助。
<h3 id="👇·-拆分组件">#👇· 拆分组件</h3>
对于小程序的项目，由于野蛮式开发，不会太多的考虑组件拆分。当然对于关注组件开发的公司，肯定会在早期就做好一定的规划。做好组件的拆分，可以保证组件的复用，大量的减少重复的代码。（组件开发的思想，目前基本适用所有的前端开发项目）。如何有效拆分组件方法，详见[译] 你是如何拆分组件的？。
<h3 id="👇·-图片压缩">#👇· 图片压缩</h3>
在微信小程序项目中，不会在本地存放图片，基本都是网络图片，而网络图片的下载，需要消耗一定的时间和内存。较小图片的大小，可以提升小程序的渲染时间，减少内存的占用。通过CDN静态资源服务器获取图片资源，添加图片压缩规则，可以极大的提升性能。
<h3 id="👇·-减少不必要数据">#👇· 减少不必要数据</h3>
减少data中的亢余数据。不必要数据，传入setData会造成不必要的性能消耗。建议：不要直接将接口数据全部保存在data中，只有页面需要渲染的数据，才通过setData进行挂载，非必要的数据可以直接挂载在当前页面page的this上。
<div class="language-javascript extra-class">
<pre class="language-javascript"><code>let data = {
list: ,
title: "xxxx",
path: 'xx/xx/xx'
}
</code></pre>
</div>
<div class="language-javascript extra-class">
<pre class="language-javascript"><code>// ❌不好的处理
this.setData({
data: data
})

// 👌好的处理只挂载必要参数
this.setData({
dataList: data.list
})
this.title = data.title
this.path = data.path
</code></pre>
</div>
<h3 id="👇·-避免频繁setdata">#👇· 避免频繁setData</h3>
<div class="language-javascript extra-class">
<pre class="language-javascript"><code>// ❌不好的处理
this.setData({
count: 1
})
this.setData({
count: 2
})
this.setData({
count: 3
})
</code></pre>
</div>
三次<code>setData</code>会被全部触发嘛？是的，会被全部调用。
在微信小程序中，并不像react，把多次操作合并。每次setData的过程，就是一次JSCore逻辑层和 webView视图层的交互。过多的交互，会降低小程序的用户体验。例如滑动监听滚动，操作setData，非常的消耗性能，可以考虑使用节流函数，降低调用频率。
官方给出的说法是：setData接口的调用涉及逻辑层与渲染层间的线程通信，通信过于频繁可能导致处理队列阻塞，界面渲染不及时而导致卡顿，应避免无用的频繁调用。来修改一下上面的代码。
<div class="language-javascript extra-class">
<pre class="language-javascript"><code>// 👌好的处理
let data = { count: 1 }
data.count = 2;
data.count = 3;
this.setData(data)
</code></pre>
</div>
<h3 id="👇·-webview组件开发">#👇· webView组件开发</h3>
灵活性非常强的页面，同时需要多端使用，建议使用微信小程序提供的webView组件，套用h5页面进行页面开发，避免重复开发。当微信小程序包过大之后，也建议使用h5页面替换开发。详见webView 组件
<div class="language-javascript extra-class">
<pre class="language-javascript"><code><web-view src="{{link}}" bindmessage="bindMes" bindload="bindLoad"/>
</code></pre>
</div>
<h2 id="项目层面">#项目层面</h2>
通过微信小程序项目配置来提升加载性能，下面的方案可以有效的解决问题，不过也要试情况而定。
<h3 id="👇·-拆分小程序">#👇· 拆分小程序</h3>
在包过大的情况下下，可以进行小程序包的拆分，详见：分包加载。对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。如果业务庞大，也可以单独抽离一个新的小程序。
<h3 id="👇·-分包预加载">#👇· 分包预加载</h3>
采用分包配置之后，分包加载也是需要时间的。对于一些比较常用，或者比较重要的页面，可以采取分包预加载的手段，来完成分包的提前下载，减小分包载入的时间。详见 分包预下载
<h3 id="👇·-尽量升级版本库">#👇· 尽量升级版本库</h3>
注意基础版本库的问题，在合适的前提下升级版本库，尽量将版本库升级为最新版本。因为版本库升级为最新，可以有效避免很多问题。
目前随着各大公司业务的不断迭代，小程序的体积不断真大，小程序渐渐的不在小。请让小程序尽量的小起来，发挥它小的作用。希望以上内容可以帮到你。
更多内容：
'小程序个人开发指南
ps: 微信公众号：Yopai，有兴趣的可以关注，每周不定期更新，分享可以增加世界的快乐
<img src="https://herrylo.github.io/webChat1.png" alt="" width="1001" height="286">
</div>

</div>
<div id="MySignature" role="contentinfo">
本文来自博客园，作者：herryLo，转载请注明原文链接：https://www.cnblogs.com/liuheng/p/11981041.html 
来源：https://www.cnblogs.com/liuheng/p/11981041.html

頁: [1]

琼殿技术论坛's Archiver

小程序开发指南之性能优化