小程序的双线程模型

最新推荐文章于 2024-04-07 01:45:39 发布
最新推荐文章于 2024-04-07 01:45:39 发布
阅读量466 收藏
点赞数
分类专栏： 微信小程序 文章标签： 微信小程序
原文链接：http://www.wxapp-union.com/portal.php?mod=view&aid=5647
版权

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

 

小程序的宿主环境

微信客户端提供双线程去执行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树中，更新页面

 

作者： waller
原文：http://www.wxapp-union.com/portal.php?mod=view&aid=5647

极乐叔
关注
专栏目录
微信小程序底层框架实现原理:开篇-双线程架构
sybh的博客
02-17 1512
介绍章节我们聊了一下“小程序”的一些概念和发展历程，并且拓展了一下思路。我们从本章节开始讲解小程序的架构。小程序的双线程架构设计。双线程对比单线程的优势在哪里。传统h5开发环境有什么弊端。Native层在双线程架构中起到怎样的作用。如何解决传统h5的安全管控问题。
微信小程序基础教程之worker线程的使用方法
10-16
它能够帮助开发者解决单线程模型中由于复杂计算导致的UI卡顿问题，同时由于Web Worker技术的成熟，这使得将类似的多线程模式应用到小程序开发中变得非常方便。但同时需要注意，由于Web Worker有着自己的作用域，主线...
【微信小程序】小程序的双线程架构，为什么要设计成双线程的，双线程之间如何通信
qq_17335549的博客
02-18 1075
微信小程序是双线程的，有渲染层和逻辑层两个执行环境，渲染层负责页面的渲染和样式，逻辑层负责小程序的逻辑和数据处理。
微信小程序-双线程渲染模型
Neo
05-18 146
微信小程序双线程渲染模型 小程序的运行环境分成渲染层和逻辑层： WXML 模板和 WXSS 样式工作在渲染层，通过 WebView 进行渲染 小程序会为每一个界面都创建一个 WebView 来渲染这个页面 JS 脚本工作在逻辑层，通过 JsCore 线程运行 JS 脚本 这两个线程的通信会经由微信客户端做中转 官方文档：https://developers.weixin.qq.com/min...
微信小程序 - 双线程模型
Waller_的博客
11-04 635
小程序的双线程模型 官方文档给出的双线程模型: 小程序的宿主环境 微信客户端提供双线程去执行wxml,wxss，js文件。 双线程模型 1.上述的渲染层上面运行着wxml文件，渲染层使用是的webview线程进行渲染（一个程序会有多个页面，也就会有多个view线程进行运作） 2.js文件是运行在逻辑层，逻辑层的js是通过jscore进行运行的。 通过双线程界面的渲染过程是怎样...
今天是学习前端的第一天之小程序的双线程架构
AIpoem的博客
05-07 2326
今天是学习前端的第一天之双线程架构 微信小程序的诞生 小程序是期望的产物。 在没有小程序的时候，企业们都在微信用什么？答案是H5。因为公众号，公众号是小程序的前身，但H5也有自己的缺点，无法自己获取很多底层 APP 拥有的功能。 随着微信提供一系列的JS-SDK给Web开发使用，(JS-SDK就是一套调用微信能力的工具包。比如微信支付等等的微信功能) WebView 的使用频率越来越高。而Webview的加载体验相对比较糟糕。 微信作为一个平台，具有优化用户体验的责任。微信面临的问题是如何设计一个比较好的系
15章深入学习小程序框架底层原理，培养双线程思维
12-18
小程序使用的是Exparser组件模型，Exparser组件模型与Web Components中的shadow DOM高度相似，微信为什么使用自定义组件框架，而不使用Web Components呢？主要还是出于安全考虑，并且方便管控。既然Exparser组件框架...
Java线程模型缺陷
01-08
Java 编程语言的线程模型可能是此语言中最薄弱的部分。它完全不适合实际复杂程序的要求，而且也完全不是面向对象的。本文建议对 Java 语言进行重大修改和补充，以解决这些问题。 Java 语言的线程模型是此语言的一个...
JAVA多线程模型详解
09-30
在多线程编程领域，Java作为一门广泛使用的编程语言，其内置的多线程模型一直是学习和应用的重点。本文将深入探讨Java多线程模型的相关知识点，包括线程与进程的区别、线程的实现原理、线程的创建方法以及线程的阻塞...
线程小程序
12-27
线程小程序是一个编程实践项目，主要关注于操作系统中的并发执行机制——线程。在计算机科学中，线程是操作系统分配处理器时间的基本单元，允许程序同时执行多个任务或子任务，从而提高了系统的效率和响应速度。这个...
基于多线程的简单小游戏的制作
03-25
此游戏的工程 博文链接：https://hwfantasy.iteye.com/blog/1142136
两个多线程小程序
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; }
微信小程序入门（四）小程序的双线程模型
shujiaw的博客
04-25 940
目录简介界面渲染过程-wxml和DOM树界面渲染过程--初始化渲染界面渲染过程--数据发生改变界面渲染的整体流程 简介 小程序的宿主环境（微信客户端）为了执行小程序的各种文件：wxml文件、 wxss文件、js文件，提供了小程序的双线程模型 ◼ 双线程模型： WXML模块和WXSS样式运行于渲染层，渲染层使用WebView线程渲染（一个程序有多个页面，会使 用多个WebView的线程）。 **J...
微信小程序开发中的多线程处理与异步编程
最新发布
m0_72166538的博客
04-07 861
微信小程序开发中的多线程处理与异步编程是指在小程序中使用多线程来处理耗时操作，并通过异步编程的方式来优化用户体验。在本文中，将详细介绍微信小程序中多线程处理与异步编程的相关知识，并提供代码案例进行说明。
微信小程序多线程处理机制worker
热门推荐
Joychen404的博客
05-23 1万+
不少从事开发岗的技术人员都了解过多线程问题，多线程是指从软件或者硬件上实现多个线程并发执行的技术。具有多线程能力的计算机因有硬件支持而能够在同一时间执行多于一个线程，进而提升整体处理性能。在小程序中也可能有线程并发执行的阶段，这时候worker可以处理小程序开发的多线程机制。微信小程序的一些异步处理任务可放置worker中运行，原理是调用worker执行多条并行线程，待结果返回到小程序的主线程。当...
微信小程序为什么使用双线程模型
HapSlience
07-19 2434
双线程模型 为什么使用双线程模型？ 个人理解总结： 小程序的架构设计时，要求渲染快、加载快。渲染页面的技术主要分为三种： 纯客户端原生技术渲染(纯客户端技术需要与微信代码一起编包，跟随微信发布版本，这样的开发节奏不对)； 纯web技术渲染(纯web技术，那么一些复杂交互页面可能面临一些性能问题，因为Web技术中，UI和JS的脚本在单线程中，这样容易导致逻辑任务抢占UI渲染资源。)； 介于客户端技...
微信小程序的双线程模型
qq_42975998的博客
12-30 793
微信小程序的双线程： 渲染线程和脚本线程是分开运行的。 所以我们书写的 JavaScript 无法直接操作 DOM ，更新 UI ，因为驱动 UI 更新的永远是data 为什么小程序要使用双线程模型？ 1.安全考虑。微信小程序是基于微信平台的，我们书写的业务代码只是注入到平台的一段程序，所以为了不危及到平台自身的安全，微信平台就以微信客户端Native作为中转站，渲染层和逻辑层分开通过Native进行通信。 2.提升性能，保证用户体验。因此没有采用 iframe 和 web worker 方案。将逻辑线程变
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值