小程序原理与优化

一.渲染层和逻辑层如何进行交互

1.1小程序运行环境

运行环境 逻辑层 渲染层
ios javascriptCore WKWebView
安卓 V8 定制内核
小程序开发者工具 NW.js chromium Webview

不同的运行环境也带来了一些差异性,所以我们完成小程序后也应该尽量在真机上测试

1.2渲染页面的技术选型

对于前端的渲染页面,分别有几种不同的技术选型方式

  • 纯客户端原生技术(android,ios)
  • 纯Web技术(html,css,js)
  • 纯客户端原生技术与web技术结合的混合开发(Hybrid)

而小程序就是使用了第三种,混合开发的方式,来进行开发

为什么不使用前两种?

  • 小程序的运行环境是微信,如果用原生开发,小程序代码每次都需要和微信代码一起发布,非常麻烦
  • 如果使用纯web技术,纯web开发在复杂的交互上,存在一些性能问题,因为渲染层和逻辑层都是在一个单线程上执行的,会出现一些业务和渲染抢占资源的情况

1.3小程序的渲染层和逻辑层

(渲染层webview) (逻辑层JsCore)
WXML,WXSS js,微信Api
Native层(系统层)
微信能力(定位,扫码),离线存储,网络请求。。。

小程序如果通过混合开发技术将渲染层和逻辑层进行交互?

渲染层触发事件 (传递) --> 系统层 (转发) --> 逻辑层进行处理

逻辑层处理完数据(返回给)--> 系统层 (传递给) --> 渲染层

所以在小程序中,有一个很忌讳的操作,就是频繁的进行setData,这样会造成系统卡死

二.小程序的运行机制和更新机制

2.1 小程序运行机制

  • 冷启动和热启动
    • 冷启动就是其一次打开小程序或者被微信销毁过再一次打开,热启动当前正在运行小程序或者切换了后台几分钟之内的状态
  • 前台与后台
    • 前台就是我们正处于的界面,当把切换到另一个程序的时候,小程序就会被切换到后台
  • 小程序销毁
    • 当小程序进入后台后会维持一段运行时间,在被销毁,到了时间会被微信主动销毁

2.2小程序更新机制

  • 当我们开发完微信小程序的时候,会编译发布到微信服务器
  • 当我们首次加载时候会向服务端请求数据和资源包,在本地运行
  • 当我们冷启动的时候,会读取缓存,然后自动检查更新
  • 当我们热启动的时候,如果需要更新,就需要在页面加载的调用官方的API来进行更新

三.小程序性能与体验优化

  • 合理设置可点击元素的响应区域的大小
  • 避免渲染页面耗时过长(减小渲染区域)
  • 避免执行脚本的时间过长(对脚本逻辑进行优化)
  • 对网络请求做有必要的缓存,以避免多余的请求
  • 不要引入未被使用的wxss样式
  • 所有资源请求建议使用HTTPS
  • 在小程序中及时回收定时器
  • 避免使用:active伪类来实现点击态(在小程序中体验不好,滑动和滚动时点击态不会消失)
    • 可以使用小程序的内置属性hover来实现点击态
  • 滚动区域可以开启惯性滚动增强用户体验
    • 通常安卓内置开启了惯性滚动
    • ios可以配置:-webkit-overflow-scrolling : touch
  • 尽量将简单的图片替换成iconfont字体图标来显示
  • setData
    • 如果某个操作对setData进行频繁的操作,我们应该结合业务需求,优化代码
    • 举例:微信小程序内置播放器播放音乐时,会不停的触发onTimeUpdata方法,我们将其进行播放时间与滚动进度联动的时候,不应该直接设置setdata,我们可以设置取到当前的秒数,判断当前如果秒数没有变化,不需要进行setdata,这样,我们就避免了当毫秒数也变化时,多余的设置了setData
  • 避免将未绑定的WXML的变量传入setData
    • 如果某些变量,它不需要将其显示在渲染层,我们可以将变量设置在头部,而不是setData中
  • 小程序内置性能优化方案
    • 打开控制台,点击Audits,运行,然后手动进行小程序所有操作,小程序会自动给出一些优化方案
    • 也可以在右上角的详情当中,设置自动运行体验评分

四.详解setData

官方:setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的this.data的值(同步)

什么意思?为什么又是异步又是同步?

我们在data中定义一个变量
data:{
    testData:0
}
然后再取设置和显示这个值

console.log(this.data)
this.setData({
    testData:1
},()=>{
    console.log('回调执行')
})
console.log(this.data)
结果:
//0
//1
//回调执行

意思就是,设置值的时候,setData将异步的发送数据到视图层,但是刚设置完,就可以同步的马上在当前页面通过this.data获取到值

在修改setdata的值的时候,需要注意什么?

五.场景值scene的作用与应用场景

进入小程序有几十种方式,而每一种进入的方式就带有不同的scene值

  • 在小程序的app.js中,有几个生命周期函数,onLaunch()监听小程序初始化,onShow()监听小程序切前台等
  • 我们打印出这些函数中带有的参数onLaunch(options),,onShow(options),会发现其中都带有scene值
  • 我们可以根据不同的scene值来对用户进行分流和数据统计
  • 页面收录sitemap.json的作用和使用方法

六.页面收录sitemap.json的作用与使用方法

类似与网页中的seo,小程序也可以通过内容被搜索到

在小程序信息中的查看详情配置(页面收录设置)

没有 sitemap.json 则默认所有页面都能被索引 ,其他配置查看官方文档

小程序原理与优化

上一篇:Android查询:模拟键盘鼠标事件(adb shell 实现)


下一篇:iOS动画开发之一——UIViewAnimation动画的使用