微信小程序 - 双线程模型

最新推荐文章于 2024-02-18 15:13:18 发布
最新推荐文章于 2024-02-18 15:13:18 发布
阅读量553 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Waller_/article/details/102918107
版权

小程序的双线程模型

官方文档给出的双线程模型:

 

 

小程序的宿主环境

 微信客户端提供双线程去执行wxml,wxss，js文件。

双线程模型

1.上述的渲染层上面运行着wxml文件，渲染层使用是的webview线程进行渲染（一个程序会有多个页面，也就会有多个view线程进行运作）

2.js文件是运行在逻辑层，逻辑层的js是通过jscore进行运行的。

通过双线程界面的渲染过程是怎样的？

wxml与DOM树

其实我们wxml文件与我们html中的DOM树是一样的，这样我们就可以有js来模拟一个虚拟的DOM树：

初始化渲染

如果我们的wxml文件中如果有变量：要与js逻辑层共同渲染页面成为一个真正的DOM树：

界面数据发生变化

1如果通过setDat把hell改成dsb，则js对象的的节点会发生改变.

2 这时会用diff算法对比两个对象的变化，

3 然后将变化的部分应用到DOM树上

4 从而达到更新页面的目的，这也就是数据驱动的原理

总结

界面渲染的整体流程

1在渲染层将wxml文件与wxss文件转化成js对象也就是虚拟DOM

2 在逻辑成将虚拟的DOM对象配合生成，真实的DOM树，在交给渲染层渲染

3 当数据变化是，逻辑层提供更新数据，js对象发生改变，用diff算法进行比较

4 将更新的内容，反馈到真实的DOM树中，更新页面

注:内容摘自 小猿取经

 

 

i0208
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序的双线程模型
Dear
03-03 1222
宿主环境 小程序的宿主环境是谁？很显然，小程序的宿主环境是微信客户端 宿主环境有什么作用呢？ 我们可以在宿主环境上执行小程序的各种文件：wxml 、wxss 、js ，除此之外，宿主环境还为我们提供了小程序的双线程模型 不了解宿主环境可以点传送门 双线程模型 1.WXML 模块和 WXSS 样式运行于渲染层，渲染层使用 WebView 线程进行渲染；因为一个小程序往往不只有一个页面，一个小程序通...
微信小程序-电商小程序源码
最新发布
04-27
微信小程序是一种轻量级的应用开发平台，主要针对移动端，尤其是智能手机用户。它的出现极大地简化了应用的开发流程，使得开发者可以快速构建出功能完备、体验流畅的轻应用。本资源提供的"电商小程序源码"正是基于...
微信小程序-双线程渲染模型
Neo
05-18 127
微信小程序双线程渲染模型 小程序的运行环境分成渲染层和逻辑层： WXML 模板和 WXSS 样式工作在渲染层，通过 WebView 进行渲染 小程序会为每一个界面都创建一个 WebView 来渲染这个页面 JS 脚本工作在逻辑层，通过 JsCore 线程运行 JS 脚本 这两个线程的通信会经由微信客户端做中转 官方文档：https://developers.weixin.qq.com/min...
微信小程序的双线程模型
qq_42975998的博客
12-30 533
微信小程序的双线程： 渲染线程和脚本线程是分开运行的。 所以我们书写的 JavaScript 无法直接操作 DOM ，更新 UI ，因为驱动 UI 更新的永远是data 为什么小程序要使用双线程模型？ 1.安全考虑。微信小程序是基于微信平台的，我们书写的业务代码只是注入到平台的一段程序，所以为了不危及到平台自身的安全，微信平台就以微信客户端Native作为中转站，渲染层和逻辑层分开通过Native进行通信。 2.提升性能，保证用户体验。因此没有采用 iframe 和 web worker 方案。将逻辑线程变
微信小程序入门（四）小程序的双线程模型
shujiaw的博客
04-25 910
目录简介界面渲染过程-wxml和DOM树界面渲染过程--初始化渲染界面渲染过程--数据发生改变界面渲染的整体流程 简介 小程序的宿主环境（微信客户端）为了执行小程序的各种文件：wxml文件、 wxss文件、js文件，提供了小程序的双线程模型 ◼ 双线程模型： WXML模块和WXSS样式运行于渲染层，渲染层使用WebView线程渲染（一个程序有多个页面，会使 用多个WebView的线程）。 **J...
使用 quickjs 和 Vue.js 模仿微信小程序的双线程模型.zip
03-10
如果您下载了本程序，但是该程序存在问题无法运行，那么您可以选择退款或者寻求我们的帮助（如果找我们帮助的话，是需要追加额外费用的）。另外，您不会使用资源的话（这种情况不支持退款），也可以找我们帮助（需要...
微信小程序-手持弹幕
03-26
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，旨在提供便捷的、无需下载安装即可使用的应用体验。"手持弹幕"是一个常见的小程序应用场景，常见于演唱会、活动等场合，用户可以创建个性...
微信小程序商城，微信小程序demo
03-20
微信小程序采用了独特的技术架构,使用了Web-view作为渲染层,采用了双线程模型,涉及多种技术栈:WXML/WXSS/JS/JSON等。开发者需要了解小程序的运行机制和开发模式。 2. 项目结构和页面布局 小程序商城的项目结构通常...
微信点餐系统微信小程序.zip
03-23
开发微信小程序需要掌握WXML（微信小程序的标记语言）和WXSS（微信小程序的样式语言），以及JavaScript来处理业务逻辑。 2. **SpringBoot框架**：SpringBoot是Java领域的一种快速开发框架，简化了Spring应用的初始...
两个多线程小程序
04-23
多线程 求质数 返回数组中的最大值 bool isPrime(long x) { if (x <= 1) return false; if (x == 2) return true; for (long i = 2; i <= ceil(sqrt((long double)x));i++) if (x%i == 0) return false; return true; } DWORD WINAPI findPrime(void* p) { long result=0; int l = stc(p)->lower, u = stc(p)->uper; int t_id=GetCurrentThreadId(); for (int i = l; i <= u;i++) if (isPrime(i)) { result++; } DWORD dReturn = WaitForSingleObject(mutex_mul_result_h, INFINITE); mul_result += result; ReleaseMutex(mutex_mul_result_h); //EnterCriticalSection(&gCRITICAL_SECTION_Printf); //printf("%d,%d,%d,%d\n", l, u, result,t_id); //fflush(stdout); //LeaveCriticalSection(&gCRITICAL_SECTION_Printf); return 0; } //dispatcher void dispatch() { DWORD Status; timer tm; tm.start(); //srand(time(NULL)); long step = STEP;//ceil(double(TEST/10)); handlenum = 0; for (int i = 1; i <= TEST;) { i += step; handlenum++; } handle_array=new HANDLE[handlenum]; Thread_id = new DWORD[handlenum ]; arg = new FP_ARG[handlenum]; InitializeCriticalSection(&gCRITICAL_SECTION_Printf); mutex_mul_result_h = CreateMutex(NULL, false, mutex_mul_result); handlenum = 0; for (int i = 1; i <= TEST;) { arg[handlenum].lower = i; arg[handlenum].uper = (i + step-1>TEST) ? TEST : i + step-1; handle_array[handlenum]=(HANDLE)CreateThread(NULL, 0, findPrime, &arg[handlenum], 0, &Thread_id[handlenum]); /*EnterCriticalSection(&gCRITICAL_SECTION_Printf); printf("lower:%d uper:%d thread_id:%d\n", arg[handlenum].lower, arg[handlenum].uper,Thread_id[handlenum]); LeaveCriticalSection(&gCRITICAL_SECTION_Printf);*/ i += step; handlenum++; } tm.stop(); Sleep(1000); printf("there are %d threads\n", handlenum); printf("the multithreads use %f msc\n", tm.read()); } //the number of 1-1000000 Primenumber void s_finePrime() { timer tm; long result = 0; tm.start(); for (int i = 1; i <= TEST; i++) if (isPrime(i)) result++; tm.stop(); printf("Single thread result is %d\n", result); printf("Single thread use %f msc\n", tm.read()); } int _tmain(int argc, _TCHAR* argv[]) { dispatch(); WaitForMultipleObjects(handlenum, handle_array, true, INFINITE);//不起作用 printf("the multithreads reslut is %d\n", mul_result); CloseHandle(mutex_mul_result_h); DeleteCriticalSection(&gCRITICAL_SECTION_Printf); s_finePrime(); system("pause"); return 0; }
微信小程序基础教程之worker线程的使用方法
10-16
主要给大家介绍了关于微信小程序基础教程之worker线程的使用方法，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
微信小程序底层框架实现原理:开篇-双线程架构
sybh的博客
02-17 1198
介绍章节我们聊了一下“小程序”的一些概念和发展历程，并且拓展了一下思路。我们从本章节开始讲解小程序的架构。小程序的双线程架构设计。双线程对比单线程的优势在哪里。传统h5开发环境有什么弊端。Native层在双线程架构中起到怎样的作用。如何解决传统h5的安全管控问题。
今天是学习前端的第一天之小程序的双线程架构
AIpoem的博客
05-07 2277
今天是学习前端的第一天之双线程架构 微信小程序的诞生 小程序是期望的产物。 在没有小程序的时候，企业们都在微信用什么？答案是H5。因为公众号，公众号是小程序的前身，但H5也有自己的缺点，无法自己获取很多底层 APP 拥有的功能。 随着微信提供一系列的JS-SDK给Web开发使用，(JS-SDK就是一套调用微信能力的工具包。比如微信支付等等的微信功能) WebView 的使用频率越来越高。而Webview的加载体验相对比较糟糕。 微信作为一个平台，具有优化用户体验的责任。微信面临的问题是如何设计一个比较好的系
【微信小程序】小程序的双线程架构，为什么要设计成双线程的，双线程之间如何通信
qq_17335549的博客
02-18 680
微信小程序是双线程的，有渲染层和逻辑层两个执行环境，渲染层负责页面的渲染和样式，逻辑层负责小程序的逻辑和数据处理。
由微信小程序双线程模型深入理解page的生命周期图解全过程
weixin_43342105的博客
06-05 540
文章目录小程序的双线程模型为什么小程序要实现双线程模型？什么是双线程模型双线程如何渲染出页面界面渲染的整体流程Page的生命周期官方生命周期图详解全过程 小程序的双线程模型 为什么小程序要实现双线程模型？ 小程序的宿主环境就是微信客户端：需要执行下面文件 所以小程序为了更好执行上面的这些文件提供了双线程模型. 什么是双线程模型 如下图，双线程顾名思义就是两个线程，一个是渲染层线程执行.wxml和.wxss文件 ，逻辑层线程利用jsCore执行js文件 双线程如何渲染出页面 这个和html的树结构差不
微信小程序开发01 双线程模型：为什么小程序不用浏览器的线程模型？
fegus的博客
09-03 889
在我看来，程序员的核心能力和竞争力并不是充分了解某种语言或框架的 API ，而是这些语言和框架底层的原理知识。对一个小程序的开发者来说，在工作中遇到技术难题时的解决方案往往是基于底层原理的（甚至更直白一点，当你找工作面试时，没人会问你小程序的语法），而这正是这节课作为第一讲的价值所在。通过了解小程序双线程模型的背景、设计、通信，希望能够让你更深入地理解小程序的底层架构。
小程序快速渲染机制及双线程技术解析
POHOU23的博客
06-14 513
不管我们对于小程序这种形态存在何种质疑，但不可否认已经融入到我们生活的方方面面，出门打车、扫码、点外卖甚至收能量等等操作都是以小程序进行承载。背后的缘由是小程序足够轻量、便捷、跨平台等特点，为用户提供了丰富的功能和优质的用户体验。究其核心，小程序能够拥有媲美原生体验的重点在于快速渲染机制，其起到了至关重要的作用。这里就探究下快速渲染机制的实现流程，以及双线程渲染技术和 WebView 在其中发挥的作用。
关于多线程的几个小程序。。。
TomTiger_Vc的博客
12-15 788
Semaphore 类  限制同事处理的进程数量 package duoxiancheng; import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import java.util.concurrent.Semaphore; /** * Created by Adm
微信小程序 实现多线程
06-07
微信小程序并不支持多线程，因为小程序运行在微信客户端中，与操作系统的底层交互受到限制。因此，如果要实现多线程，可以考虑通过 Web Worker 的方式来实现。Web Worker 是 HTML5 标准中定义的一种 JavaScript 的多...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值