小程序和h5深度分析

news2024/11/24 0:15:36

你写过小程序/H5,那你知道他们的区别在哪里吗? 为什么说小程序的性能通常优于 H5? 小程序能访问到 DOM 对象吗? 小程序的原理是什么?

小程序和 H5 都是轻量级的、可直接在移动设备上运行的应用,但它们之间存在一些关键差异。

运行环境

  • 小程序:运行在特定的 APP(如微信,支付宝)内的一个独立的运行环境。📱
  • H5:运行在各种浏览器中的,这些浏览器基本上都遵循相同的 Web 标准,因此 H5 应用可以在任何支持这些标准的浏览器中运行。

开发环境和工具

  • 小程序:开发需要使用特定的开发工具,如微信开发者工具,阿里巴巴的 IDE 等。你只能使用这些工具提供的 API 和组件进行开发,不能使用大部分的第三方库和工具。🛠️
  • H5:开发工具和库则非常丰富。你可以根据自己的需求和喜好选择最适合的工具进行开发,开发自由度较高。🎨

性能和体验

  • 小程序:由于小程序的代码运行在一个相对封闭和优化过的环境中,因此其运行效率和性能比 H5 更高。而且小程序可以实现类似于原生 APP 的体验,如 离线访问,深度集成 等。🚀
  • H5:H5 的性能和体验则受到浏览器的限制。虽然现代浏览器的性能已经非常好,但是相对于小程序和原生 APP 来说,H5 在运行效率和用户体验上还是有所欠缺。🔍

小程序热启动
  • 小程序:当用户离开小程序或者切换到其他应用,小程序就会被挂起或关闭。如果用户在短时间内回到小程序,通常可以直接恢复之前的状态,这被称为热启动。🔥
  • H5:H5 应用的生命周期取决于浏览器的生命周期。当用户关闭浏览器或者浏览器标签页时,H5 应用也就结束了。只有当用户重新打开浏览器并访问该 H5 应用时,应用才会重新启动。🔄

PS: 补充概念 冷启动: 如果小程序已经被完全关闭(例如用户手动关闭了小程序,或者由于系统资源管理策略导致小程序被关闭),那么用户回到小程序时就需要进行冷启动,即重新加载小程序的代码并启动小程序。此外,小程序的代码在首次打开时会被下载到本地,因此在后续的使用中,可以直接从本地加载代码,无需通过网络下载。

离线访问
  • 小程序:小程序在首次打开时会下载必要的代码和资源文件到本地,因此在后续的使用中,即使没有网络连接,也能够运行基本的功能。这提供了更好的离线体验,尤其在网络环境不佳的情况下。📡
  • H5:相比之下,H5 应用每次打开都需要从服务器获取页面和资源,如果没有网络连接,就无法正常访问。虽然有一些技术(如 Service Worker)可以使 H5 应用具有离线访问的能力,但这需要额外的开发工作,而且在实际使用中可能会受到诸多限制。🏔️

深度集成(系统权限)
  • 小程序:小程序运行在特定的 APP(如微信,支付宝)中,因此可以更深入地集成到这个 APP 的生态系统中。例如,微信小程序可以直接使用微信的支付、分享、登录等功能,这些都是浏览器无法提供的。🌲
  • H5:H5 应用则主要依赖于浏览器提供的标准 Web API,无法直接访问设备的某些功能或特定 APP 的功能。虽然现代的浏览器 API 已经非常丰富,但是在某些特定的场景下,H5 应用可能无法提供和小程序或原生应用同等的用户体验。🌐

更新机制

  • 小程序:小程序的代码包在发布新版本后,需要用户重新打开小程序时才会下载新的代码包。一般来说,小程序平台会在用户打开小程序时进行版本检查,如果发现有新的版本,就会自动下载新版本的代码包。🔄
    • PS: 小程序平台通常支持增量更新,即只下载变更部分的代码,这可以减少下载时间和流量消耗。此外,小程序平台也可能提供一些其他的更新机制,例如预下载、静默更新等,这些都可以帮助提升用户体验。📦
  • H5:H5 应用的更新更为简单,只需要在服务器端更新网页和资源文件即可。当用户下次访问网页时,浏览器就会自动加载新的内容。这种方式的优点是可以即时推送更新,无需用户进行任何操作,但是缺点是每次更新都需要用户重新加载所有的内容,即使只有一小部分发生了变化。🛎️

渲染机制

小程序双线程架构
  • 小程序:采用的是一种分离的渲染机制。双线程架构,逻辑层和渲染层是分开的,它们运行在两个不同的线程中。
    • 逻辑层运行在 JavaScriptCore 中,负责数据处理和事件处理等逻辑;
    • 而渲染层则运行在 WebView 中,负责页面的渲染。
    • 这两个线程通过一个数据桥进行通信,JS 线程将需要渲染的数据发送到渲染线程,然后由渲染线程根据这些数据来渲染页面。
    • 性能提升:由于小程序的渲染过程并不依赖于 JS,因此即使 JS 线程发生阻塞,页面的渲染也不会受到影响。这种机制有利于提高渲染效率,减少卡顿,提升用户体验。🚦
    • 小程序由于不支持直接操作 DOM,因此所有的页面更新都是通过数据驱动的,这使得代码更为简洁,易于维护。📝
  • H5:使用的是传统的浏览器渲染机制。当页面的数据或状态发生变化时,JavaScript 会直接操作 DOM,修改页面的内容。浏览器会监听这些操作,当 DOM 发生变化时,会重新计算样式,生成新的布局,然后绘制到屏幕上。这种方式的优点是灵活,可以实现各种复杂的效果和交互,但是缺点是性能开销比较大,如果操作不当,可能会导致页面卡顿或闪烁。🖥️

DOM 访问
  • 小程序:中访问不到 DOM:小程序的宿主环境是基于浏览器内核重构的内置解析器,它并不是一个完整的浏览器,官方文档中重点强调了脚本内无法使用浏览器中常用的 window 对象和 document 对象,就是没有 DOM 和 BOM 的相关的 API,这一条就干掉了 JQ 和一些依赖于 BOM 和 DOM 的 NPM 包。也造成再实现一些负责动画的情况下,小程序优势不如 H5🧐

开发成本

生态 & 学习成本
  • 小程序:小程序脱离 W3C 标准,很多第三方库不能直接使用了。小程序本身会增加学习成本。📚
兼容性
  • 小程序:小程序的兼容性主要取决于小程序平台。由于每个小程序平台(例如微信、支付宝)都有自己的 API 和规范,所以一个小程序可能需要针对不同的平台进行适配或修改。此外,小程序也需要考虑不同的设备和操作系统,例如不同的手机型号、屏幕大小、系统版本等。🔄
  • H5:H5 的兼容性主要取决于浏览器。由于存在大量不同的浏览器和版本,H5 开发者需要确保他们的应用能在各种浏览器中正常运行。这可能涉及到一些复杂的问题,如浏览器差异、特性检测、降级策略等。此外,H5 应用也需要适应各种不同的设备和屏幕,这可能需要使用响应式设计或其他技术。🌟

知识点补充

小程序增量更新是如何做的?

小程序的增量更新机制主要依赖于小程序平台的设计。具体实现可能因不同的小程序平台(如微信、支付宝等)而有所不同。以下是一种可能的实现方式:

  • 当小程序开发者发布新版本时,小程序平台会比较新旧两个版本的差异,并生成一个包含差异信息的补丁文件。
  • 然后,当用户打开小程序时,小程序平台会检查用户设备上的小程序版本。如果发现用户的版本落后于服务器上的版本,那么就会下载补丁文件,而不是整个新版本的代码包。
  • 接着,小程序平台会应用补丁文件,将用户设备上的小程序更新到新版本。

这种增量更新的方式可以大大减少需要下载的数据量,从而提高更新速度,节省用户的网络流量。此外,因为补丁文件只包含差异信息,所以它通常比完整的代码包要小得多,这使得小程序可以更快地启动和运行。

然而,值得注意的是,增量更新需要小程序平台提供相应的支持,如果小程序平台不支持增量更新,那么小程序在更新时就需要下载整个新版本的代码包。此外,即使小程序平台支持增量更新,也可能存在一些限制或要求,例如对代码包的大小或结构有特定的规定等。

以上是一种可能的实现方式,具体的增量更新机制可能会因不同的小程序平台而有所不同。要获取更准确的信息,建议参考具体的小程序平台的官方文档或者资源。

小程序的双线程架构的原理?

小程序的双线程架构是指其在运行时有两个主要的线程负责处理不同的任务:一个是渲染线程(Render Thread),另一个是逻辑线程(Logic Thread)。

  • 渲染线程 主要负责页面的渲染工作,包括解析和展示 HTML、CSS 以及处理用户的交互事件(如点击、滑动等)。在小程序中,渲染线程通常是在 Webview 中运行的,这使得小程序能够利用 Web 技术进行页面的渲染。
  • 逻辑线程 则主要负责处理应用的逻辑,包括处理 API 调用、请求数据、处理数据等。在小程序中,逻辑线程通常是在 JSCore 中运行的,这使得小程序能够利用 JavaScript 来编写应用逻辑。

这两个线程是相互独立的,它们在运行时并不共享任何 JavaScript 对象或函数。这意味着,小程序在进行页面渲染和处理应用逻辑时,可以利用多核 CPU 的并行计算能力,提高运行效率。

然而,这两个线程之间仍然需要进行通信。这是通过一种称为数据桥(Data Bridge)的机制实现的。逻辑线程将需要渲染的数据通过数据桥发送到渲染线程,然后由渲染线程根据这些数据来渲染页面。这种通信机制有利于隔离渲染和逻辑处理,防止 JS 的阻塞影响到页面的渲染,从而提高用户体验。

双线程架构的优点是可以提高效率,提升用户体验。但是,由于渲染线程和逻辑线程是分离的,因此小程序不能直接操作 DOM,所有的页面更新都是通过数据驱动的,这使得小程序在处理复杂的页面布局和交互时可能会有些限制。

伪代码模拟

小程序的双线程架构是由小程序的运行环境所支持的,并非可以简单通过一段 JavaScript 代码来模拟实现。实际上,要实现这样的架构,你需要一个可以运行两个独立 JavaScript 环境的运行时,并且还需要一个数据桥来在这两个环境之间进行通信。这涉及到很多底层的实现细节,一般来说,无法在浏览器环境中直接实现。

但是,为了帮助你理解这个概念,我可以提供一个基本的模型,来说明渲染线程和逻辑线程是如何工作和交互的。请注意,这只是一个简化的模型,真实的小程序架构会更加复杂。

首先,我们可以假设有两个线程:renderThreadlogicThread,它们都是异步运行的。

// 渲染线程
async function renderThread(dataBridge) {
  let data = await dataBridge.receive()
  render(data)
}

// 逻辑线程
async function logicThread(dataBridge) {
  let data = await fetchData()
  dataBridge.send(data)
}

这两个线程通过一个 dataBridge 进行通信。这个 dataBridge 需要有 sendreceive 两个方法,用于在两个线程之间发送和接收数据。

// 数据桥
class DataBridge {
  constructor() {
    this.queue = []
    this.listeners = []
  }

  send(data) {
    this.queue.push(data)
    this.listeners.forEach((listener) => listener(data))
  }

  receive() {
    return new Promise((resolve) => {
      if (this.queue.length > 0) {
        resolve(this.queue.shift())
      } else {
        this.listeners.push(resolve)
      }
    })
  }
}

然后,我们可以创建一个 dataBridge,并将它传给 renderThreadlogicThread,让它们开始运行。

let dataBridge = new DataBridge()

renderThread(dataBridge)
logicThread(dataBridge)

logicThread 处理完逻辑并获取到数据后,它会通过 dataBridge 将数据发送给 renderThread,然后 renderThread 就可以根据这些数据来渲染页面。

请注意,这只是一个非常简化的模型,真实的小程序架构会更加复杂。在实际的小程序环境中,还需要处理很多其他的问题,如数据同步、错误处理、资源管理等。并且,由于小程序的运行环境与浏览器环境不同,因此在处理一些特定的问题时,可能需要使用不同的方法和技术。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2196701.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C语言的类型提升机制

概念 在C语言中,整数类型按照其大小可以分为以下几类(从小到大): charshortintlonglong long 当在表达式中涉及这些类型的混合运算时,较小的类型会被提升为较大的类型。具体规则如下: ①char 和 short …

【NLP自然语言处理】02 - NLP简介/NLP发展历史/应用场景

1.什么是自然语言处理 (NLP) 自然语言处理(Natural Language Processing, NLP)是人工智能的一个重要分支,旨在通过计算机实现对人类自然语言的理解、生成和互动。其核心任务包括分析、生成和转换人类语言,涉及语法、语义、语音识…

Mapsui绘制WKT的示例

步骤 创建.NET Framework4.8的WPF应用在NuGet中安装Mapsui.Wpf 4.1.7添加命名空间和组件 <Window x:Class"TestMapsui.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winf…

基于单片机的烧水壶系统设计

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于STC89C52RC单片机&#xff0c;采用四个按键&#xff0c;通过DS18B20检测温度&#xff0c;开机显示实时温度 第一个按键为切换功能按键&#xff0c;按下后&#xff0c;可以设置烧水温度的大小&…

codetop标签双指针题目大全解析(三),双指针刷穿地心!!!!!

复习比学习更重要&#xff0c;更需要投入时间&#xff0c;更需要花费精力 1.字符串的排列2.找出字符串中第一个匹配的下标3.最大连续1的个数II4.数组中的山脉5.移除元素6.两个数组的交集II7.有序数组的平方8.删除有序数组中的重复项II9.寻找重复数10.水果成篮 1.字符串的排列 …

HUAWEI_HCIA_实验指南_Lib1.4_配置通过Telnet登录系统

一、原理概述 Telnet(Telecommunication Network Protocol)起源于ARPANET,是最早的Internet应用之一。 Telnet 通常用在远程登录应用中&#xff0c;以便对本地或远端运行的网络设备进行配置、监控和维护。如网络中有多台设备需要配置和管理&#xff0c;用户无需为每一台设备…

C++ 算法学习——7.4.1 优化算法——双指针

双指针法&#xff08;Two Pointers&#xff09;是一种常用的算法技巧&#xff0c;通常用于解决数组或链表中的问题。这种技巧通过维护两个指针&#xff0c;通常分别指向数组或链表的不同位置&#xff0c;来协同解决问题。双指针法一般有两种类型&#xff1a;快慢指针和左右指针…

查询计算移出数据库用 Java 太慢咋办

很多现代应用会把数据计算和处理任务从数据库移出来采用 Java 实现&#xff0c;这样能获得架构上的好处&#xff0c;而且 Java 有完善过程处理能力&#xff0c;应对日益复杂的业务逻辑比 SQL 更得心应手&#xff08;虽然代码不短&#xff09;。不过&#xff0c;我们常常会发现&…

为什么没有能够处理 Python 字节码的 CPU?

问题 有没有能够处理Python字节码&#xff08;Python bytecode&#xff09;的CPU&#xff1f;众所周知&#xff0c;CPU靠执行字节码指令运作。那有没有能够处理Python字节码&#xff08;Python bytecode&#xff09;的CPU&#xff1f;如果没有&#xff0c;为什么&#xff1f;不…

OpenHarmony(鸿蒙南向开发)——轻量系统内核(LiteOS-M)【内存管理】

往期知识点记录&#xff1a; 鸿蒙&#xff08;HarmonyOS&#xff09;应用层开发&#xff08;北向&#xff09;知识点汇总 鸿蒙&#xff08;OpenHarmony&#xff09;南向开发保姆级知识点汇总~ 持续更新中…… 基本概念 内存管理模块管理系统的内存资源&#xff0c;它是操作系…

LeetCode 刷题基础 -- 模板原型Ⅰ

模板原型 - 基础篇 学习网站一、进制转换二、二分查找① 查找指定元素② 查找第一个大于等于 x 值的序列下标③ 查找第一个大于 x 值的序列下标④ 单峰序列 三、双指针① 两数之和② 序列合并③ 集合求交④ 集合求并 四、其他高效技巧与算法① 区间和② 01 对③ 左小数 五、数学…

【每日刷题】Day134

【每日刷题】Day134 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;每日刷题&#x1f34d; &#x1f33c;文章目录&#x1f33c; 1. 1218. 最长定差子序列 - 力扣&#xff08;LeetCode&#xff09; 2. LCR 116. 省份数量 - 力扣&…

掌握这17个Python自动化操作,简化你的日常工作流程,提升工作效率!

Python是一种流行的编程语言&#xff0c;以其简单性和可读性而闻名。因其能够提供大量的库和模块&#xff0c;它成为了自动化各种任务的绝佳选择。让我们进入自动化的世界&#xff0c;探索17个可以简化工作并节省时间精力的Python脚本。 目录&#xff08;上篇&#xff09; 1.自…

小型数控铣床助力职业教育教学模式

小型数控铣床是在普通铣床上集成了数字控制系统&#xff0c;可以在程序代码的控制下较精确地进行铣削加工的机床。与普通小型铣床相比&#xff0c;小型数控铣床通过数字控制系统实现了自动化加工&#xff0c;提高了加工精度和效率。 小型数控铣床的引入推动了教育装备的现代化进…

基于单片机的书库环境监测

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于51单片机&#xff0c;采用DHT11湿度传感器检测湿度&#xff0c;DS18B20温度传感器检测温度&#xff0c; 采用滑动变阻器连接数模转换器模拟二氧化碳和氧气浓度检测&#xff0c;各项数值通过lc…

Trickle流量限速工具使用示例

简介&#xff1a;trickle 是一个轻量级的流量限速工具&#xff0c;允许用户限制应用程序的网络带宽使用&#xff0c;以便更好地管理网络资源和优化网络性能。本文将介绍 trickle 的安装和使用方法&#xff0c;并通过 Python 封装示例展示如何使用 trickle 控制网络带宽。 历史…

关于PPT生成的开源大模型总结

目前需要开源的PPT生成模型&#xff0c;在这里对github上的一些模型进行筛选 搜索关键词&#xff1a;ppt generate&#xff08;more starts&#xff09; williamfzc/chat-gpt-ppt: 支持直接生成PPT支持中英文需要调用ChatGPT&#xff08;Add your token (official openai api k…

使用正则表达式删除文本的奇数行或者偶数行

用智谱清言和kimi搜出来的结果都没法在notepad生效&#xff0c;后面在overflow上找到的答案比较靠谱。 查找&#xff1a;^[^\n]*\n([^\n]*) 替换&#xff1a;\1 删除偶数行 查找&#xff1a;^([^\n]*)\n[^\n]* 替换&#xff1a;\1 代码解释 ^&#xff1a;这个符号代表字符…

Excel日期导入数据库变为数字怎么办

在Excel导入到数据库的过程中&#xff0c;经常会碰到Excel里面的日期数据&#xff0c;导进去过后变成了数字。 如下图&#xff1a; 使用navicate等数据库编辑器导入数据库后&#xff1a; 原因分析&#xff1a;这是因为日期和时间在excel中都是以数字形式存储的&#xff0c;这个…

重学SpringBoot3-集成Redis(二)之注解驱动

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞&#x1f44d;收藏⭐评论✍ 重学SpringBoot3-集成Redis&#xff08;二&#xff09;之注解驱动 1. 为什么选择 Redis 作为缓存&#xff1f;2. 如何在 Spring Boot 中启用 Redis 缓存&#xff1f;2.1 …