一、微信小程序介绍
小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。
- 快速的加载
- 更强大的能力
- 原生的体验
- 易用且安全的微信数据开放
- 高效和简单的开发
二、体验优化
1、webview预加载
微信会在小程序加载前,先初始化一个全局webview,减少启动浏览器内核的时间
由webview加载流程可以看出,App中打开WebView的第一步并不是建立连接,而是启动浏览器内核
优化前后对比:
2、Page Frame
在加载小程序时,会先初始化一个page_frame.html 内容模板
- 首页启动时,即第一次通过pageframe.html生成内容后,后台服务会缓存pageframe.html模板首次生成的html内容。
- 非首次新打开页面时,页面请求的pageframe.html内容直接走后台缓存
- 非首次新打开页面时,pageframe.html页面引入的外链js资源走本地缓存
官网说明:
wx.navigateTo会创建一个新的页面层级,对于每一个新的页面层级,视图层都需要进行一些额外的准备工作。在小程序启动前,微信会提前准备好一个页面层级用于展示小程序的首页。除此以外,每当一个页面层级被用于渲染页面,微信都会提前开始准备一个新的页面层级,使得每次调用wx.navigateTo都能够尽快展示一个新的页面。
3、小程序缓存
项目内已实现
4、双线程
微信小程序抽离了视图层View 和逻辑层 App Service
保证了即使逻辑层在做复杂的计算,也不会影响到界面的流畅性。
渲染层和逻辑层之间通信,是通过 Native的WeixinJSBridge 转发实现的。
逻辑层通过 Page 实例的setData方法传递数据到渲染层。由于需要两个线程的一些通信消耗,为了提高性能,每次只设置需要改变的最小单位数据。
但是如果所有的逻辑都依赖跨线程通信,也会带来不必要的开销。wxs
5、原生组件
某些复杂的控件使用原生组件实现:
视频、相机、地图等
https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html
6、其他层面的优化
使用Virtual DOM,进行局部更新
三、小程序支持
1、开发工具(IDE、自动化工具)
2、多端统一开发工具——kbone
3、
其他可借鉴的点:
微信小程序:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#entryPagePath
示例:
目前项目中可以配置的参数:
iPadFullScreen、forbid_cache、titleStyle、btnStyle
处理方式:
匹配APPID、小程序入口URL
PWA 渐进式应用
引用:
https://tech.meituan.com/2017/06/09/webviewperf.html
https://mp.weixin.qq.com/s/3QE3g0NmaBAi91lbrihhVw
https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000a64a29c48b0eb0086f161b5940a&highline=%E8%99%9A%E6%8B%9Fdom
https://tech.youzan.com/weapp-booting/
网友评论