• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序原理

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

微信小程序是介于Native和WebApp之间的产物,它依托浏览器WebView展示同时可以调用原生能力,比如获取通讯录、拍照等,同一份代码可运行在Android、iOS和微信调试开发工具内。

与React Native的跨平台不同的是,小程序大部分UI组件并不是原生渲染,还是类似WebApp使用浏览器渲染。Native组件层在WebView层之上,只有少量组件使用Native实现,比如<canvas><video><map><textarea>

浏览器运行环境

浏览器主要组件包括

  • 用户界面(User Interface)
    地址栏、前进后退按钮、书签菜单等
  • 浏览器引擎(Browser Engine)
    在用户界面和呈现引擎之间传递指令
  • 呈现引擎(Renderering Engine)
    负责显示请求的内容
  • JavaScript解释器
    用于解释和执行JavaScript代码
  • 网络(Networking)
    用于网络调用,比如HTTP请求,其接口与平台无关并为所有平台提供实现。
  • 数据存储(Data Persistence)
    数据持久层,浏览器在本地磁盘上保存的数据。比如Cookie、网络数据库等。
  • 用户界面后端(UI Backend)
    用于绘制基本的窗口组件,比如组合框和窗口。
浏览器组件结构

通常而言浏览器运行在一个进程中,Google Chrome比较特殊每个标签都是一个独立的进程。浏览器是多线程的,重要的线程包括

  • 呈现引擎(渲染引擎):运行在UI线程中
  • JS解释器(JS解释引擎):运行在JS引擎线程中

浏览器中UI渲染线程和JS引擎线程是互斥的,当JS引擎线程执行时UI渲染引擎线程会被挂起,UI更新时会被保存在一个队列中等到JS引擎线程空闲时会立即被执行。

小程序与网页开发

  • 网页开发
    网页开发渲染线程和脚本线程是互斥的,网页开发使用浏览器暴露的DOM API进行DOM选中操作,网页开发者面对的环境是各种浏览器。
  • 小程序
    小程序的渲染层和逻辑层是分开运行在不同的线程中,逻辑层运行在JSCore中因此没有一个完整的浏览器对象,因而缺少DOM API和BOM API。JSCore和NodeJS环境不同,NPM包在小程序中无法运行。小程序开发需面对iOS和Android两大操作系统。

小程序与H5页面区别

  • 运行环境
    小程序是基于浏览器内核重构的内置解析器,H5的宿主环境是浏览器。所以小程序中没有DOM和BOM相关的API,jQuery和NPM包无法在小程序中使用。
  • 系统权限
    小程序能够获得更多的系统权限,比如网络通信状态、数据缓存能力等。
  • 渲染机制
    小程序的逻辑层和渲染层是分开的,H5页面UI渲染跟JS脚本执行都在一个单线程中而互斥,因此H5页面中长时间的脚本执行会导致页面失去响应。

小程序和Web页面对比

  • 静态UI界面差别不大
  • Web页面交互存在卡顿不如原生顺畅
  • Web页面切换生硬不如原生流畅
  • Web页面加载存在白屏不如原生体验好

导致这些问题的主要原因是因为Web页面是基于DOM,在生成和操作DOM耗时且耗性能,另外浏览器对于网页渲染都是单线程处理的方式,包括布局、渲染、JS执行(阻塞)、图像解码等。浏览器重绘时页面刷新频率为60FPS,即16ms/frame,如果16毫秒内不能完成DOM操作就会出现跳帧。Web页面没有GPU图形加速页导致UI界面不流畅。因此,现在的Vue、React等前端框架都推崇使用虚拟DOM,以间接地减少DOM操作频率。

小程序运行环境

小程序开发面对的是iOS和Android微信客户端和辅助开发小程序的开发工具,这三种运行环境的区别在于:

运行环境 渲染层 逻辑层
iOS WKWebView JavaScriptCore
Android X5浏览器 X5 JSCore
小程序开发工具 Chrome WebView NWJS

小程序框架分层

小程序的框架包括两部分分别是View渲染层和AppService逻辑层

小程序原理
  • 渲染层
    View层用来渲染页面结构,渲染层界面使用WebView进行渲染,一个小程序存在多个界面所以渲染层存在多个WebView线程。
  • 逻辑层
    逻辑层采用JSCore线程运行JS脚本,进行逻辑处理、数据请求、接口调用等。
    逻辑层会将数据变化通知到视图层,触发视图层页面更新,视图层把触发的事件通知到逻辑层进行业务处理。

视图层和逻辑层分别在两个WebView进程中运行,视图层和逻辑层通过系统层的JSBridge进行通信,逻辑层将数据变化通知到视图层,触发视图层页面更新,视图层将触发的事件通知到逻辑层进行业务处理。

小程序的这两个线程的通信经由客户端进行中转,逻辑层把数据变化通知到渲染层,触发渲染层面更新,渲染层把触发的事件通知到逻辑层进行业务处理。

小程序的UI视图和逻辑处理使用多个WebView实现,逻辑处理的JS代码会全部加载到一个WebView中称之为AppService,整个小程序只有一个且整个生命周期常驻内存,所有的视图(WXML和WXSS)都是单独的WebView来承载即AppView。所以一个小程序打开时至少存在2个WebView进程,正是因为每个视图都是一个而独立的WebView进程,考虑到性能消耗,小程序不允许打开超过5层级的页面,同时也是为了更好的体验。

对于AppService可理解为一个页面主要功能是负责逻辑处理部分的执行,底层提供了一个WAService.js文件来提供API接口,接口主要是消息通信封装的WeixinJSBridge。

小程序线程模型

双线程模型

小程序的渲染层和逻辑层分别由两个线程进行管理,小程序运行时有两个线程分别是View视图线程和AppService逻辑线程,这两个线程是相互隔离的,通过桥接协议WeixinJsBridge进行通信。

  • 逻辑层
    界面渲染相关任务在WebView线程中执行,一个小程序可以存在多个界面,所以渲染层存在多个WebView线程。
  • 逻辑层
    逻辑层采用JsCore线程运行JS脚本
线程 模块 代码 原理 备注
View 视图层,可多个 WXML/WXSS WebView渲染 WXML编译器把WXML文件转化为JS,构建Virtual DOM。
AppService 逻辑层,仅一个 JS JsCore运行 无法访问window/document对象

小程序的视图层线程和逻辑层线程是如何进行数据传递的呢?

通过两边提供的evaluateJavascript实现,即用户传输的数据需将其转换为字符形式传递,同时把转换后的数据内容拼接成为一份JS脚本,再通过执行JS脚本的形式传递到两边独立的环境中。也就是说,两个线程是通过系统层的WeixinJsBridge来通信的,逻辑层把数据变化通知到视图层,触发视图层页面更新,视图层把触发的事件通知到逻辑层今昔那个业务处理。

页面渲染的具体流程是在渲染层宿主环境会将WXML转化为对应的JS对象,在逻辑层发生数据变更时需通过宿主环境提供的setData方法将数据从逻辑层传递到渲染层,对比前后差异后将差异应用到原来的DOM树上,以渲染出正确的UI界面。

渲染流程

小程序双线程模型与Web前端框架不同之处在于,小程序双线程模型可以更好地管控和提供更加安全的环境,缺点是带来无处不在的异步问题,因为任何数据传输都是线程间通信,也就存在一定的延迟,不过小程序在框架层面已经封装了异步带来的时序问题。

小程序框架

小程序框架

从下往上看,小程序的解析顺序

  1. 最底层是微信,当开发版式小程序开发工具会把代码和框架一起进行打包,微信中打开小程序时微信会将打包好的代码下载到微信App中,这样就可以像在开发工具里一样在微信中运行小程序。
  2. native层是小程序的框架,框架封装了UI层组件和逻辑层组件,这些组件可以通过微信App提供的接口调用手机硬件信息。
  3. 最上层是需进行操作的视图层和逻辑层,视图层和逻辑层的交互式通过数据经由native层进行交互的,视图层和逻辑层可调用native框架中封装好的组件和方法。

小程序生命周期

小程序生命周期可分为应用生命周期和页面生命周期两部分

  • 应用生命周期
  1. 用户首次打开小程序会触发onLaunch事件,全局只触发一次。
  2. 小程序初始化完成后会触发onShow事件,监听小程序显示。
  3. 小程序从前台进入后台会触发onHide事件
  4. 小程序从后台进入前台显示会触发onShow事件
  5. 小程序后台运行一定时间或系统资源占用过高时会被销毁
  • 页面生命周期
  1. 小程序注册完成后会加载页面并触发onLoad事件方法
  2. 页面载入后会触发onShow事件方法而显示页面
  3. 首次显示页面会触发onReady方法,渲染页面元素和样式,一个页面只会调用一次。
  4. 当小程序后台运行或跳转到其它页面时会触发onHide事件方法
  5. 当小程序由后台进入到前台运行或重新进入页面时会触发onShow方法
  6. 当使用重定向wx.redirectTo()方法或关闭当前页面返回上一页wx.navigateBack()方法时会触发onUnload事件方法。

小程序组件系统

小程序的基本组件是基于Exparser框架的,Exparser基于WebComponents的ShadowDOM模型,不依赖浏览器的原生支持,可在纯JS环境中运行。小程序所有节点树操作都依赖于Exparser,包括WXML到页面最终节点树的构建,CreateSelectorQuery调用、自定义组件特性等。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序码生成及canvas绘制发布时间:2022-07-18
下一篇:
netease-im网易云通信小程序集成实践+群组功能完善发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap