210301.md

微信小程序工作原理

基础

原理

小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了 WebView 进行渲染；逻辑层采用 JsCore 线程运行 JS 脚本。一个小程序存在多个界面，所以渲染层存在多个 WebView 线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由 Native 转发.

JsCore数据驱动器

初始话

WXML WXSS 先转成 JS 对象(虚拟DOM)，然后再 webview 渲染出真正的 Dom 树

更新

通过 setData 驱动 msg 数据从 “Hello World” 变成 “Goodbye” ，产生的JS对象对应的节点就会发生变化，此时可以对比前后虚拟 DOM 树得到变化的部分(diff 算法)，然后把这个差异应用到原来的 Dom 树上，从而达到更新UI的目的

webview渲染的问题

WXML->dom tree -> render tree -> render layer + 栅格化 -> 合成-> gpu渲染

1. 渲染速度会慢,因为从 wxml 到 js 在到原生,然后才是 webview 渲染,所以会慢
2. 如果 js 操作很频繁,由于 js 是单线程的,就会卡顿