微信小程序入门（四）小程序的双线程模型

最新推荐文章于 2025-10-07 10:19:39 发布
原创 最新推荐文章于 2025-10-07 10:19:39 发布 · 1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序入门 #小程序的双线程模型

本文深入探讨了小程序界面渲染的全过程，包括初始化渲染、数据变化时的更新机制以及双线程模型下的工作原理。详细解释了WXML如何转化为JS对象，并最终渲染成DOM树的过程，以及数据驱动的界面更新原理。

目录

简介

小程序的宿主环境（微信客户端）为了执行小程序的各种文件：wxml文件、
wxss文件、js文件，提供了小程序的双线程模型
◼ 双线程模型：

  • WXML模块和WXSS样式运行于渲染层，渲染层使用WebView线程渲染（一个程序有多个页面，会使 用多个WebView的线程）。
  • **JS脚本（app.js/home.js等）**运行于逻辑层，逻辑层使用JsCore运行JS脚本。
  • 这两个线程都会经由微信客户端（Native）进行中转 交互。

在这里插入图片描述

界面渲染过程-wxml和DOM树

在这里插入图片描述

界面渲染过程–初始化渲染

首先，我们需要知道，wxml等价于一棵DOM树，也可以使用一个JS对象来模拟（虚拟DOM）
在这里插入图片描述
那么，WXML可以先转成JS对象，再渲染出真正的DOM树
在这里插入图片描述

界面渲染过程–数据发生改变</

最低0.47元/天 解锁文章
微信小程序底层框架实现原理:开篇-双线程架构
斌擎科技
02-17 1991
介绍章节我们聊了一下“小程序”的一些概念和发展历程，并且拓展了一下思路。我们从本章节开始讲解小程序的架构。小程序的双线程架构设计。双线程对比单线程的优势在哪里。传统h5开发环境有什么弊端。Native层在双线程架构中起到怎样的作用。如何解决传统h5的安全管控问题。
微信小程序开发中的多线程处理与异步编程
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-05 1436
异步编程是一种非阻塞式的编程模型，在这种模式下，程序不会等待某个耗时任务的完成，而是继续执行后面的代码。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。async/await 是基于 Promise 的一种更高级的异步编程语法糖，可以让异步代码以同步的流程式风格编写，增强代码的可读性和可维护性。Promise 是 JavaScript 中一种基于回调的异步编程解决方案，它可以简化回调函数的编写，并提供更好的错误处理机制。API 是典型的异步操作。
小程序的双线程模型
Dear
03-03 1332
宿主环境 小程序的宿主环境是谁？很显然，小程序的宿主环境是微信客户端 宿主环境有什么作用呢？ 我们可以在宿主环境上执行小程序的各种文件：wxml 、wxss 、js ，除此之外，宿主环境还为我们提供了小程序的双线程模型 不了解宿主环境可以点传送门 双线程模型 1.WXML 模块和 WXSS 样式运行于渲染层，渲染层使用 WebView 线程进行渲染；因为一个小程序往往不只有一个页面，一个小程序通...
【微信小程序】小程序的双线程架构，为什么要设计成双线程的，双线程之间如何通信
有一棵树的博客
02-18 1872
微信小程序是双线程的，有渲染层和逻辑层两个执行环境，渲染层负责页面的渲染和样式，逻辑层负责小程序的逻辑和数据处理。
微信小程序中的双线程模型及数据传输优化
最新发布
分享前端工程化、动效魔法与性能之舞！
10-07 400
微信小程序采用双线程模型（视图层和逻辑层）提升性能，但线程间通信存在性能开销。优化建议：1）减少setData调用频率和数据量，仅传递必要数据；2）采用分包加载和懒加载机制；3）长列表使用分页或虚拟滚动；4）利用本地缓存存储静态数据。这些措施可有效降低数据传输开销，提高小程序运行效率。
微信小程序 - 双线程模型
Waller_的博客
11-04 834
小程序的双线程模型 官方文档给出的双线程模型: 小程序的宿主环境 微信客户端提供双线程去执行wxml,wxss，js文件。 双线程模型 1.上述的渲染层上面运行着wxml文件，渲染层使用是的webview线程进行渲染（一个程序会有多个页面，也就会有多个view线程进行运作） 2.js文件是运行在逻辑层，逻辑层的js是通过jscore进行运行的。 通过双线程界面的渲染过程是怎样...
小程序的「双线程模型」
Bruce__taotao的博客
06-22 960
小程序采用双线程模型实现高性能运行：逻辑层（AppService）负责JS脚本执行、事件处理和数据管理，渲染层（WebView）负责页面渲染和用户交互，两者通过Native层桥接通信。这种设计提升了性能（避免阻塞）、增强了安全性（隔离DOM操作），但也带来通信延迟和数据拷贝的开销。实践建议控制setData频率和数据量，使用Worker处理复杂计算，并注意沙箱机制带来的隔离特性。与其他技术相比，小程序在渲染速度与跨平台适配性间取得了平衡，适用于轻量级应用场景。
小程序博客搭建分享，纯微信小程序原生实现
前端原创分享，常年坚持记录和分享，全网阅读量超百万
07-20 1611
我是在 2019 年启动这个全栈博客项目的，当时自己的前端技术其实也不怎么样，但是我脑子里就一个想法，必须掌握一点点全栈技术，了解整个系统全栈是怎么运行起来的。于是，我就决定自己动手做一个全栈的博客，当时也还从没在公司做过小程序项目，就想着也做个小程序版的博客练练手。我学习一个新东西不太喜欢一来就上框架，我会先开始学一点最原始的基础，有了基础后，再换框架做，这样效率高，同时遇到框架问题也不至于由于没有了解过底层基础而无从下手去解决。
微信小程序基础入门
Llishiyi的博客
02-14 670
一，小程序介绍 小程序是什么？ 不足 官方文档 小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。 任何一个普通的开发者，经过简单的学习和练习后，都可以轻松地完成一个小程序的开发和发布。 微信小程序的优势和劣势 优势 微信助理，容易推广。在微信中，小程序拥有众多入口，例如附近的小程序、小程序码、分享、发现-小程序等五十多个的入口。这些入口有助于企业更好的获取流量，从而进行转
基于Java和HTML的微信小程序设计源码示例
10-08
在当前移动互联网时代，微信小程序作为一种新型的应用形式，因其便捷的使用体验和较低的开发...无论是对于想要入门微信小程序开发的初学者，还是希望提升自身开发技能的中级开发者，本项目都具有很高的学习和参考价值。
简单的多线程小程序
12-26
自己编写的简单的多线程小程序，一共四个线程，分别执行（+1，-1），（+2，-2）,（+3,-3）,（+4,-4），无同步。每次输入非零数，可以出现以一百为基数的结果。每次结果未必相同。如果有同步，会得100 。 可以体验多个线程的竞争。
两个多线程小程序
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; }
微信小程序的双线程模型
qq_42975998的博客
12-30 875
微信小程序的双线程： 渲染线程和脚本线程是分开运行的。 所以我们书写的 JavaScript 无法直接操作 DOM ，更新 UI ，因为驱动 UI 更新的永远是data 为什么小程序要使用双线程模型？ 1.安全考虑。微信小程序是基于微信平台的，我们书写的业务代码只是注入到平台的一段程序，所以为了不危及到平台自身的安全，微信平台就以微信客户端Native作为中转站，渲染层和逻辑层分开通过Native进行通信。 2.提升性能，保证用户体验。因此没有采用 iframe 和 web worker 方案。将逻辑线程变
由微信小程序双线程模型深入理解page的生命周期图解全过程
weixin_43342105的博客
06-05 776
文章目录小程序的双线程模型为什么小程序要实现双线程模型？什么是双线程模型双线程如何渲染出页面界面渲染的整体流程Page的生命周期官方生命周期图详解全过程 小程序的双线程模型 为什么小程序要实现双线程模型？ 小程序的宿主环境就是微信客户端：需要执行下面文件 所以小程序为了更好执行上面的这些文件提供了双线程模型. 什么是双线程模型 如下图，双线程顾名思义就是两个线程，一个是渲染层线程执行.wxml和.wxss文件 ，逻辑层线程利用jsCore执行js文件 双线程如何渲染出页面 这个和html的树结构差不
今天是学习前端的第一天之小程序的双线程架构
AIpoem的博客
05-07 2541
今天是学习前端的第一天之双线程架构 微信小程序的诞生 小程序是期望的产物。 在没有小程序的时候，企业们都在微信用什么？答案是H5。因为公众号，公众号是小程序的前身，但H5也有自己的缺点，无法自己获取很多底层 APP 拥有的功能。 随着微信提供一系列的JS-SDK给Web开发使用，(JS-SDK就是一套调用微信能力的工具包。比如微信支付等等的微信功能) WebView 的使用频率越来越高。而Webview的加载体验相对比较糟糕。 微信作为一个平台，具有优化用户体验的责任。微信面临的问题是如何设计一个比较好的系
微信小程序开发教程（四）线程架构与开发步骤
angran1985的专栏
06-20 260
线程架构 　　从前面的章节我们可以知道，.js文件是页面逻辑处理层。我们可以按需在app.js和page.js中添加程序在生命周期的每个阶段相应的事件。如在页面的onLoad时进行数据的下载，onShow的时候进行数据的更新。 　　典型的app.js代码结构如下： App({ onLaunch: function(){ //启动时执行的初始化工作 }, ...
【微信小程序】两大线程与微信WXS
'Ablaze 的专栏
01-09 1437
渲染界面的技术 纯客户端原生渲染 缺点：无法动态打包，动态下发。 纯Web技术来渲染 缺点：在一些复杂交互的页面上可能会面临一些性能问题。 同时，在Web技术中，UI渲染跟JavaScript脚本执行都是在一个单线程中执行，容易导致抢占资源。 客户端原生 + Web 界面主要由成熟的Web技术来渲染，辅之以大量的接口提供丰富的客户端原生能力。 同时，每个小程序页面都是用不同的WebView来渲染，更贴近原生体验，避免单个WebView任务过于繁重。 脚本执行的环境 由于JavaScript的灵活性和浏览器的
小程序的双线程分别是什么？
weixin_65444510的博客
08-01 218
小程序采用双线程设计，渲染线程负责界面显示与用户交互，逻辑线程处理业务计算与数据请求。两线程独立运行、互不阻塞，通过微信客户端进行通信，既提升了响应速度又避免界面卡顿。这种分离架构实现了高效渲染与流畅交互的平衡，是小程序性能优化的核心设计。
微信小程序入门教程与经典案例源码解析
进一步深入来看，微信小程序的运行机制采用双线程模型：逻辑层运行在JsCore环境中，负责业务逻辑处理；视图层则渲染WXML和WXSS，两者通过Native层进行通信。这种设计保障了UI渲染的流畅性，避免JavaScript执行阻塞...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值