导航
一、利用组件来优化
二、利用wxs来优化
- html其实会转化为JavaScript(DOM对象)，所以
html其实本质是js对象- 小程序采用自己的标签，用精简版wxs编写的xml。
所以其实小程序页面是wxs对象- 但有需要js的完整能力，于是
有两个独立线程(逻辑层js和渲染层wxs)- wxs和js是独立隔离的，并用Native来做中转，所以
存在延时(需要通信)
- js对wxs通信
setData()/其实onload时js执行了this.setData(data)=>所以设置值到页面是异步的
- 其它比如wx.showToast、wx.setNavigationBarTitle
这类和界面相关的，相当于是给页面默认的一个toast控件、NavigationBa，setdata()√
- 获取视图、节点信息 wx.getSystemInfo、wx.createSelectorQuery、wx.createIntersectionObserver=>
所以获取视图节点信息是异步的
- wxs对js通信
事件<==页面本质是js/wxs，且继承于事件==>页面的事件是属于渲染层的
像page生命周期ready是页面事件，其它是微信赋予js的事件，不是wxs的原生事件
官网生命周期介绍
setData({},()=>{})的第二个参数，是setData的回调函数，相当于事件- 重复一遍：
页面的事件，如果执行函数在js中，则执行是wxs对js通信
wxs中执行callMethod可以调用js的函数数据：√
- 那wxs能做什么？：如果某项操作，页面交互比重大于js操作(或者交互方面操作多于js的操作)，则推荐使用wxs
- 由上图可知：
小程序最大的优化点就是这两条线的通信- js对wxs的通信部分的优化：
避免频繁setdata更新局部数据：setData({
['List[' + index + ']']: newItem,
'obj.name':'hcl'
})- 如果页面交互比重大于js操作，则获取页面节点信息操作可以让wxs来执行wxs优化点之一
√
- wxs对js的通信部分优化：
页面事件，如果页面交互比重大于js操作，则推荐事件绑定wxs函数1.事件绑定js中的函数： catch:tap="submitTap" // 注意：这里绑定函数其实是字符串，执行时是根据这个字符串查找js中的对应函数 2.事件绑定wxs中的函数 catch:tap="{{m1.submitTap}}" //这里是执行m1作用域中的submitTap函数。注意这里是变量。、 //对比以上，可以理解为还有个main作用域，是wxs中通信js的副本。
- 其它如
定时器/倒计时、动画，如果页面交互比重大于js操作也推荐采用wxs
总结
wxs是小程序页面原生脚本，所以页面相关的处理，wxs是同步的实时的
如果你的小程序纯粹js来处理来处理逻辑，wxs是可以优化的方向！
wxs除了用于较少通信，还可以用于过滤器filter:
小程序页面xml本质就是wxs嘛，所以可以直接访问wxs数据，而不能同步访问js数据
- 左右互搏--老顽童
- 本篇文章其实是认识小程序页面的原理，及双线程的原因及认识js和wxs直接的关系
- 目的是希望：
js和wxs能够左右互搏，两只手都发挥最大作用，进而提升小程序的效率！
网友评论