由微信小程序双线程模型深入理解page的生命周期图解全过程

最新推荐文章于 2024-02-18 15:13:18 发布
最新推荐文章于 2024-02-18 15:13:18 发布
阅读量697 收藏
点赞数
分类专栏： 微信小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43342105/article/details/106566431
版权

文章目录


此篇文章所有图片来自coderwhy老师 b战：https://www.bilibili.com/video/BV1Kt411V7rg

小程序的双线程模型

为什么小程序要实现双线程模型？

小程序的宿主环境就是微信客户端：需要执行下面文件
在这里插入图片描述

所以小程序为了更好执行上面的这些文件提供了双线程模型.

什么是双线程模型

如下图，双线程顾名思义就是两个线程，一个是渲染层线程执行.wxml和.wxss文件 ，逻辑层线程利用jsCore执行js文件

在这里插入图片描述
在这里插入图片描述

双线程如何渲染出页面

在这里插入图片描述
这个和html的树结构差不多，主要的意思是所有树结构都可以最终抽象成一个js对象
主要看下面这幅图

在这里插入图片描述
渲染线程和逻辑线程的结合生成js对象在渲染页面

在这里插入图片描述

界面渲染的整体流程

在这里插入图片描述

Page的生命周期

官方生命周期图详解全过程

在这里插入图片描述

生命周期图分成两个线程，就是上面的两个线程
逻辑线程在创建的过程中就会执行在这里插入图片描述
两个周期函数

先是渲染层的初始化inited，有可能会遇到mustache语法，会像逻辑层要数据
在这里插入图片描述
逻辑层 send initial data （开始时是等待状态，等待渲染层要数据）

当渲染线程准备渲染的时候他会告诉逻辑层要准备渲染了

在这里插入图片描述
逻辑层执行onready（）周期函数

如果逻辑线程有新的数据，就会发送给渲染线程，就会重新渲染
在这里插入图片描述

接下来几个周期函数就是退到后台和回到前台执行的
在这里插入图片描述

_阿锋丶
关注
专栏目录
微信小程序底层框架实现原理:开篇-双线程架构
sybh的博客
02-17 1526
介绍章节我们聊了一下“小程序”的一些概念和发展历程，并且拓展了一下思路。我们从本章节开始讲解小程序的架构。小程序的双线程架构设计。双线程对比单线程的优势在哪里。传统h5开发环境有什么弊端。Native层在双线程架构中起到怎样的作用。如何解决传统h5的安全管控问题。
走进小程序【五】微信小程序架构之【逻辑层】详解
商务合作/软件定制/学习交流
04-06 6853
小程序架构之【逻辑层】
微信小程序 - 双线程模型
Waller_的博客
11-04 640
小程序的双线程模型 官方文档给出的双线程模型: 小程序的宿主环境 微信客户端提供双线程去执行wxml,wxss，js文件。 双线程模型 1.上述的渲染层上面运行着wxml文件，渲染层使用是的webview线程进行渲染（一个程序会有多个页面，也就会有多个view线程进行运作） 2.js文件是运行在逻辑层，逻辑层的js是通过jscore进行运行的。 通过双线程界面的渲染过程是怎样...
微信小程序的双线程模型
qq_42975998的博客
12-30 799
微信小程序的双线程： 渲染线程和脚本线程是分开运行的。 所以我们书写的 JavaScript 无法直接操作 DOM ，更新 UI ，因为驱动 UI 更新的永远是data 为什么小程序要使用双线程模型？ 1.安全考虑。微信小程序是基于微信平台的，我们书写的业务代码只是注入到平台的一段程序，所以为了不危及到平台自身的安全，微信平台就以微信客户端Native作为中转站，渲染层和逻辑层分开通过Native进行通信。 2.提升性能，保证用户体验。因此没有采用 iframe 和 web worker 方案。将逻辑线程变
微信小程序入门（四）小程序的双线程模型
shujiaw的博客
04-25 942
目录简介界面渲染过程-wxml和DOM树界面渲染过程--初始化渲染界面渲染过程--数据发生改变界面渲染的整体流程 简介 小程序的宿主环境（微信客户端）为了执行小程序的各种文件：wxml文件、 wxss文件、js文件，提供了小程序的双线程模型 ◼ 双线程模型： WXML模块和WXSS样式运行于渲染层，渲染层使用WebView线程渲染（一个程序有多个页面，会使 用多个WebView的线程）。 **J...
微信小程序-双线程渲染模型
Neo
05-18 149
微信小程序双线程渲染模型 小程序的运行环境分成渲染层和逻辑层： WXML 模板和 WXSS 样式工作在渲染层，通过 WebView 进行渲染 小程序会为每一个界面都创建一个 WebView 来渲染这个页面 JS 脚本工作在逻辑层，通过 JsCore 线程运行 JS 脚本 这两个线程的通信会经由微信客户端做中转 官方文档：https://developers.weixin.qq.com/min...
小程序的双线程模型
Mark
01-02 780
目录 1、小程序宿主环境 2、渲染层和逻辑层 3、界面渲染过程 4、界面渲染整体流程 1、小程序宿主环境 微信客户端给小程序所提供的环境为宿主环境。小程序借助宿主环境提供的能力可以完成许多普通网页无法完成的功能。 微信客户端是小程序的宿主环境，宿主环境为了执行小程序的各种文件（wxml文件、wxss文件、js 文件）提供了小程序的双线程模型：渲染层和逻辑层。小程序的渲染层和逻辑层分别...
微信小程序资料整理
WHinelove的博客
03-18 690
一、初识微信小程序 1、什么是微信小程序 Ⅰ-小程序历史 1. 2017 年度百度百科十大热词之一  2. 微信小程序，简称小程序，英文名 Mini Program，是一种不需要下载安装即可使用的应用  3. 小程序刚发布的时候要求压缩包的体积不能大于 1M,，否则无法通过，在2017年4月做了改进，由原来的1M提升到2M； 4. 2017年1月9日0点，万众瞩目的微信第一批小程序正式低调上线。 ###&
Java 学习路线大全，再也不用迷路啦（持续更新）
腾讯全栈-ITCJF
10-14 2980
路线特点 最新，完整一条龙，从入门到入土（⭐ 表示推荐学习） 给出目标、学习建议、关键知识点、最优资源以及各类资源推荐（视频、书籍、文档、项目、工具等） 划分阶段、更有计划，且在最后给出持续学习的方向、探索 Java 程序员发展的无限可能 前言 首先呢，我们要了解 Java 的应用场景和就业方向，看看和自己的学习目的是否一致，目前，Java 的岗位需求多，是后台开发的主流编程语言，功能强大，还是很值得学习的。 阶段 1：Java 入门 目标 培养兴趣、快速上手 前期准备 准备好一款在线、随时随地
C++面试整理
csdn609387481的博客
11-07 3033
最近开始准备找实习了，收到某位大佬的指导，说可以上牛客网把相关的面经都刷一遍，记录下考点各个击破。大佬是搞java的，已经把java的刷完了，看了一下觉得很受用，因此也准备刷下c++的。顺带附上大佬的java总结：https://zhuanlan.zhihu.com/p/266362976 ...
Java多线程（二）、线程的生命周期和状态控制
11-28
Java多线程（二）、线程的生命周期和状态控制
Python 接口并发测试详解
悦分享
10-23 7247
性能测试是通过自动化测试工具模拟多种正常、峰值及异常负载条件对系统的各项性能指标进行的测试。负载测试和压力测试都属于性能测试，两者可以结合进行。通过负载测试，确定在各种工作负载下系统的性能，目标是测试当负载逐渐增加时，系统各项性能指标的变化情况。压力测试是通过确定一个系统的瓶颈或者不能接受的性能点，来获得系统能提供的最大服务级别的测试。性能测试的重点是测试在并发条件下服务或系统的瓶颈所在，从而优化相关功能，可能涉及软件及硬件的多方面改进。由此可见，性能测试对整个产品非常重要，甚至可以决定一个产品是否能长久发
【微信小程序】小程序的双线程架构，为什么要设计成双线程的，双线程之间如何通信
最新发布
qq_17335549的博客
02-18 1109
微信小程序是双线程的，有渲染层和逻辑层两个执行环境，渲染层负责页面的渲染和样式，逻辑层负责小程序的逻辑和数据处理。
【微信小程序】两大线程与微信WXS
'Ablaze 的专栏
01-09 1311
渲染界面的技术 纯客户端原生渲染 缺点：无法动态打包，动态下发。 纯Web技术来渲染 缺点：在一些复杂交互的页面上可能会面临一些性能问题。 同时，在Web技术中，UI渲染跟JavaScript脚本执行都是在一个单线程中执行，容易导致抢占资源。 客户端原生 + Web 界面主要由成熟的Web技术来渲染，辅之以大量的接口提供丰富的客户端原生能力。 同时，每个小程序页面都是用不同的WebView来渲染，更贴近原生体验，避免单个WebView任务过于繁重。 脚本执行的环境 由于JavaScript的灵活性和浏览器的
小程序的底层框架
PHPer技术栈
02-18 2721
前端的框架太多让人眼花缭乱，很多相似的地方，优秀的地方大家都会借鉴，同时又会有各自的一些特点。小程序也好，其他框架也好，理解他们的设计缘由、实现原理，还是能学到很多很多东西的。 一切始于双线程 技术选型 上一节《小程序的诞生》中，我们也提到了小程序的双线程设计。 目前来说，页面渲染的方式主要有三种： Web 渲染。 Native 原生渲染。 Web 与 Native 两者掺杂，也即我...
微信小程序——生命周期、线程架构
从现在开始认真学习的博客
11-16 577
典型的app.js代码 结构如下： //app.js代码 App({ onLaunch: function(){ //启动时执行的初始化工作（生命周期函数） //全局只执行一次，不能在和这个方法中调用getCurrentPage()来获取当前页面的对象 //因为此时page还没生成 }, onShow: function...
今天是学习前端的第一天之小程序的双线程架构
AIpoem的博客
05-07 2330
今天是学习前端的第一天之双线程架构 微信小程序的诞生 小程序是期望的产物。 在没有小程序的时候，企业们都在微信用什么？答案是H5。因为公众号，公众号是小程序的前身，但H5也有自己的缺点，无法自己获取很多底层 APP 拥有的功能。 随着微信提供一系列的JS-SDK给Web开发使用，(JS-SDK就是一套调用微信能力的工具包。比如微信支付等等的微信功能) WebView 的使用频率越来越高。而Webview的加载体验相对比较糟糕。 微信作为一个平台，具有优化用户体验的责任。微信面临的问题是如何设计一个比较好的系
线程的生命周期图（附多线程）
weixin_30736301的博客
05-09 448
转载于:https://www.cnblogs.com/qq2267711589/p/10841329.html
微信小程序：深入解析事件与生命周期管理
微信小程序的事件及生命周期是一个关键的概念，它涉及到用户与小程序交互的核心机制。本文由杰瑞教育撰写，主要从四个方面进行深入讲解： 1. **常用事件和事件冒泡**： - 微信小程序支持多种事件类型，包括点击...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值