0
点赞
收藏
分享

微信扫一扫

小程序底层原理

月白色的大狒 2022-02-07 阅读 70

小程序的 Http Rquest 请求是不是用的浏览器 Fetch API?

不是, http request是由逻辑层发起,通过native去触发的,且不支持promise。

小程序渲染再同一个线程么?

小程序是双线程设计,即视图渲染与业务逻辑分别在运行在不同的线程中。这个设计主要是解决web技术中的一个痛点:
web页面开发渲染线程和脚本线程是互斥的,长时间的脚本运行可能会导致页面失去响应或者白屏,体验糟糕。
小程序为了更好体验,将页面的渲染线程和脚本线程分开设计在不同线程中执行,具体实现:
● 视图view层在webview中渲染,一个页面对应一个webview
● 业务逻辑Appservice层运行在同一个JSCore线程中,具体ios是JavaScriptCore,android是X5 JSCore,开发者工具是webview中;
这样解决了长时间的脚本阻塞页面渲染的情况,但是也带来一些新的问题:
● 天生的延迟,线程间要通信
● 业务逻辑层因为运行在JSCore中无法访问DOM和BOM的api;
开发者工具使用webview加载业务逻辑层的代码,虽然依赖的环境有DOM和BOM api,为了保持一致;小程序对所有的模块进行了局部化处理使其不能访问这些api。这样双线程通过native,开发者工具通过后台websocket服务充当二者消息中转媒介,并且提供一些基础功能。

为什么要采用这种技术方案呢?
主要原因是小程序的管控限制,比如不能直接操作DOM树、页面跳转等管控措施,更好地形成自己的生态闭环。

背景

它依托浏览器(webview)展示,同时可以调用原生能力(如获取通信录,拍照等等),同一份代码可运行在Android,iOS和微信调试开发工具内(跨平台能力)。

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

架构

在这里插入图片描述

线程名称所属模块运行代码原理备注
View视图层(可能有多个)WXML/WXSSwebview渲染wxml编译器把wxml文件转为js(构建virtual dom);wxss编译器把wxss文件转化为js
AppService逻辑层(一个)JSJavascriptCore运行无法访问 window/document对象

那么,两个模块之间如何通信呢?
视图层触发事件通过 JSBridage 传给逻辑层,逻辑层处理后将数据通过 JSBridage 传给视图层。
在这里插入图片描述
所以:

  • 小程序中的 js 无法操作 dom,因为不在一个线程。如果需要在 View Thread 中运行自定义js代码,可以使用wxs(微信开发的脚本语言),它和View同一个线程。

参考资料

https://cloud.tencent.com/developer/article/1029663
https://cloud.tencent.com/developer/article/1773703
https://blog.csdn.net/weixin_34133829/article/details/88827942

举报

相关推荐

0 条评论