小程序渲染流程

发表于 | 分类于

概况

小程序的整体加载流程可以概况为 启动-> 下载小程序代码包->加载小程序-> 小程序交互->卸载小程序->关闭，这里我们只讨论小程序加载过程

小程序加载流程

渲染层和逻辑层

小程序的加载是由两个层级合作完成的：渲染层和逻辑层，渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端做中转，逻辑层发送网络请求也经由客户端转发。

流程

弄清楚了渲染层和逻辑层就可以来看看具体的加载流程了

1.初始化阶段

在初始化阶段，主要是做一些准备工作：加载运行app.js，注册app生命周期事件，这些完成之后会调用app的onLaunch方法，随后调用app的onShow方法，之后会读取app.json里面的配置，获取app中需要注册的页面。

2.页面加载阶段

从app.json读取到第一个页面路径后就会进入加载阶段，渲染层和逻辑层会同步工作，流程可以由下图概括
渲染流程

  • 渲染层：
    页面层级的准备工作分为三个阶段。
    1. 第一阶段是启动一个WebView，在iOS和Android系统上，操作系统启动WebView都需要一小段时间。
    2. 第二阶段是在WebView中初始化基础库，此时还会进行一些基础库内部优化，以提升页面渲染性能。
    3. 第三阶段是注入小程序WXML结构和WXSS样式，使小程序能在接收到页面初始数据之后马上开始渲染页面（这一阶段无法在小程序启动前执行）。
  • 逻辑层：
    1. 会运行第一个页面的js文件，注册页面生命周期事件，加载页面初始数据，之后会依次调用页面的onLoad方法和onShow方法，完成后就把页面数据（this.data）发送给渲染层进行首次渲染
    2. 在页面初次渲染完成时，Page构造器参数所定义的onReady方法会被调用，onReady在页面没被销毁前只会触发1次，onReady触发时，表示页面已经准备妥当，在逻辑层就可以和视图层进行交互了。

3.页面交互阶段

在页面交互阶段主要会进行两种处理：

  1. 用户事件通信：
    • 视图层会接受用户事件，如点击事件、触摸事件等。用户事件的通信比较简单：当一个用户事件被触发且有相关的事件监听器需要被触发时，视图层会将信息反馈给逻辑层。如果一个事件没有绑定事件回调函数，则这个事件不会被反馈给逻辑层。视图层中有一套高效的事件处理体系，可以快速完成事件生成、冒泡、捕获等过程。
  2. 视图渲染：
    • 视图层在接收到初始数据（data）和更新数据（setData数据）时，需要进行视图层渲染。
    • 初始渲染中得到的data和当前节点树会保留下来用于重渲染。每次重渲染时，将data和setData数据套用在WXML片段上，得到一个新节点树。然后将新节点树与当前节点树进行比较，这样可以得到哪些节点的哪些属性需要更新、哪些节点需要添加或移除。最后，将setData数据合并到data中，并用新节点树替换旧节点树，用于下一次重渲染。