小程序原理与优化

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

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 则默认全部页面都能被索引 ，其余配置查看官方文档