你可能不知道的小程序

为了让你们更好的理解小程序的一些限制和作一些优化，下面从小程序的基础架构讲起，若有不对的地方，望指正，请轻喷 😄

一. 页面栈限制最多10层

首先，咱们看看下图，小程序的架构以下：

咱们能够看到，一个页面使用一个 WebView 线程进行渲染。 若是于页面栈有 10 层，则会开启 10 个 WebView 线程，占多一点内存，因此对页面栈进行了限制。

那若是在10层页面栈的限制内，因为页面的内容过于复杂，内存爆了怎么办？ 小程序内部有一个回收机制，若是内存紧张时，会回收掉一部分 WebView 。

不少人可能会以为， 10 层页面栈基本已经够用了，无须关注这方面的限制了。

可是若是出现循环引用的话，用户反复点击，则很容易出现爆栈的状况。 以下图：

因此，在开发以前，提早梳理好页面之间的跳转，合理使用 navigator ，redirectTo, navigateBack …… 是很是重要的。

固然，做为一个程序员，我并不想在跳转的时候去时时刻刻的关注我有没有正确引用，有没有超出10层页面栈。 彻底能够对小程序的跳转作一个封装。

由于只有 wx.navigateTo 才会使页面栈 + 1 ，那咱们只要对这个方法作一层兜底处理便可。 以下代码：

const PAGE_LIMIT = 10
const pages = getCurrentPages()
if(pages.length >= PAGE_LIMIT) {
  // 使用 wx.redirectTo 方法
}
复制代码

这样就能够为所欲为的跳来跳去了。

二. JsCore

小程序的逻辑层是在 JsCore 中运行的。限制以下：

• 没有 Window、Document 对象，也就没法使用 基于 DOM 的一些库. 暂无解决方法。

仍是从一张图提及：

不一样于页面的渲染，全部的脚本逻辑都是跑在同一个 JsCode 线程里面，相似于路由中改变 Hash 值。 所以也会引发下面一些常见的坑

1. 须要本身清理页面的 setTimeout 或者 setInterval 定时器
2. 若是要求页面每次出现都是最新的数据，则要把拉取数据的逻辑放在 onShow 中执行，别放在 onload 中。
3. 若追求“极致化体验”，在用户切到下一个页面的时候，能够在 onHide 中 abort 掉没有请求成功的接口，把即将处理的 setData 去掉，能够减轻最新页面的逻辑，让最新页面最快渲染展现。

三. 原生组件层级最高

像 canvas , video ，input ，map ，picker …… 组件，官方直接使用原生组件，渲染方式以下图：

从上图很容易就能够看出，Navtive 组件的层级是最高的，那么仅仅去改变 z-index 也没法让其余组件覆盖原生组件。还好，官方给出了一个解决方案：

• 使用 cover-view cover-image 将但愿层级变高的组件也包裹成“原生组件”

四. 独特的网络请求，本地存储

1. 独特的 Storage 存储
   • 以用户纬度隔离，同一个设备，A 没法访问 B 用户的数据。
   • 持久缓存，只有在用户关掉小程序才会删除，若是空间不足，会进行 LRU ，也就是不常用的小程序的数据缓存区域会被所有清空。
   • 在体验版、开发版、和线上版都共用一套，并不会隔离。
   • 没有 Cookie
2. Request uploadFile downloadFile 并发最多10个请求
3. 只支持 HTTPS WSS

若是以往在移动端, PC 的接口会使用 Cookie 进行一些处理，那在小程序中使用该接口就比较尴尬了。

所以，咱们能够在小程序中也模拟出 Cookie ，以下图：

在 Storage 中隔离一个字段，用来作 Cookie ，下面用了一个小技巧，把 Cookie 的内容存放于内存中，而非每次都从 storage 中读取。

let cookie = (function(){
    return wx.getStorageSync('cookies');
}())
const Cooke = {
  getCookie(){}, //从内存中获取cookie
  setCookie(){}, // 设置cookie
  setCookieInHeader(){}, //根据response的Header设置cookie
  removeCookie() {},  //删除cookie
  isExpired() {} //判断是否过时
}
复制代码

而后，咱们在每次 Request 成功后，解析 Header 中 SET-COOKIE 属性设置 Cookie ，在每一次请求的时候，手动在 Header 中设置 Cookie 。这样就完美地模拟浏览器的 Cookie 概念了。

2. 并发请求处理

设置一个队列，若是请求处理完毕，则移出队列，若是当前数组超过10个请求，则进入等待状态。大概代码以下：

class Request {
    constructor() {
        this.maxLimit = 10;
        this.requestQueue = []; // 请求队列
        this.requestIng = 0; //当前并发数
    }
    request () {
        // 判断是否超出并发数
        if(this.requestIng >= this.maxLimit) {
            // 推入请求队列
        }else {
            this.requestIng ++;
            // 执行成功后 - 1 ,从 requestQueue 中取出从新请求
        }
    }
}
复制代码

五. setData

好吧，仍是从一张图提及，显然，咱们能够看出，每一次 setData 都是一次线程通讯。

线程通讯成本很高，很是耗时间，所以官方明确的给出了建议：

1. 将屡次 setData 合并成一次进行调用
2. 只 setData 对象改变的某个值

data: {
    array: {
        changeData: '我改变了',
        noChangeData: '我没有改变'
    },
},
this.setData({
    'array.changeData':'changed data'
})
复制代码

3. 与界面渲染无关的字段不要放在 data 中

data: {
    view: '与界面相关的数据'
},
noRelaView: '与界面无关'
复制代码

@Author：beidan