小程序的 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/WXSS | webview渲染 | wxml编译器把wxml文件转为js(构建virtual dom);wxss编译器把wxss文件转化为js |
AppService | 逻辑层(一个) | JS | JavascriptCore运行 | 无法访问 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