小程序和h5有什么差别
差别
微信小程序和H5应用在实现原理上的差异主要体现在架构、渲染方式、数据通信、运行环境和API接口等方面。以下是详细的对比：
1. 架构和运行环境
微信小程序：
架构：微信小程序主要分为逻辑层（JavaScript）和视图层（WXML、WXSS）。逻辑层运行在小程序的JSCore中，而视图层运行在WebView（它是基于浏览器内核重构的内置解析器，它并不是一个完整的浏览器，官方文档中重点强调了脚本内无法使用浏览器中常用的
window对象和document对象，就是没有DOM和BOM的相关的API，这一条就干掉了JQ和一些依赖于BOM和DOM的NPM包）中，两者通过平台提供的桥接机制进行通信。运行环境：逻辑层在微信提供的JS引擎中运行，视图层在微信内置的WebView中渲染。
H5 应用：
架构：H5应用是一个整体。HTML、CSS和JavaScript共同构成了一个Web页面。
运行环境：H5应用在浏览器中运行，所有代码都在浏览器的环境中解析和执行。
2. 渲染方式
微信小程序：
微信小程序采用双线程模型，将逻辑层和视图层分离，分别运行在不同的线程中（两者通过平台提供的桥接机制进行通信）：
逻辑层：运行在小程序的JSCore环境中，负责处理业务逻辑、数据计算和API调用。
视图层：运行在WebView中，负责渲染用户界面和处理用户交互。( 性能提升：由于小程序的渲染过程并不依赖于JS，因此即使JS线程发生阻塞，页面的渲染也不会受到影响。这种机制有利于提高渲染效率，减少卡顿，提升用户体验。)
通信桥接机制
逻辑层和视图层之间不能直接访问和操作对方的数据和界面，因此需要通过微信小程序框架提供的桥接机制来进行通信。这种通信机制通常包括以下几个方面：
1. 数据绑定和响应式更新（逻辑层--->视图层）
逻辑层通过数据绑定的方式将数据传递给视图层，视图层根据数据变化自动更新界面。数据绑定的过程如下：
设置数据：逻辑层通过
Page或Component实例的setData方法，将数据传递给视图层。更新视图：视图层接收到数据变化的消息后，根据新的数据重新渲染界面。
2. 事件处理（视图层--->逻辑层）
视图层中的用户交互（如点击、输入等）会触发事件，这些事件通过桥接机制传递给逻辑层进行处理。事件处理的过程如下：
事件绑定：在视图层（WXML）中定义事件处理函数。
事件触发：用户在界面上进行交互时，触发相应的事件。
事件传递：视图层将事件信息通过桥接机制传递给逻辑层。
事件处理：逻辑层的事件处理函数接收到事件信息，执行相应的业务逻辑。
3. 消息传递
逻辑层和视图层之间的通信实际是通过消息传递的方式实现的。微信小程序框架负责在两个层之间传递消息，包括：
逻辑层到视图层的消息：如数据更新、视图更新等。
视图层到逻辑层的消息：如用户交互事件、视图状态变化等
通信桥接机制具体实现
依赖于微信小程序框架内部的设计和优化，开发者无需直接接触底层的通信细节。以下是桥接机制的一些关键点：
消息队列：逻辑层和视图层之间维护一个消息队列，用于存储待传递的消息。
消息格式：消息以JSON格式进行编码，包含消息类型、数据内容等信息。
消息处理：逻辑层和视图层各自维护一个消息处理器，负责接收、解析和处理消息。
异步通信：消息传递通常是异步进行的，以确保界面和逻辑的流畅性和响应性
H5 应用：
H5应用的逻辑层和视图层通常是在同一线程（主线程）中运行，直接通过JavaScript代码操作DOM来更新界面。主要的通信方式包括：
直接DOM操作：通过JavaScript直接操作DOM元素，更新界面。
事件监听和处理：通过JavaScript监听DOM事件（如点击、输入等）并处理。
数据绑定：使用现代前端框架（如Vue.js、React.js）的数据绑定和响应式机制，实现视图的自动更新。
3. 数据通信
微信小程序：
通信机制：逻辑层和视图层之间的通信通过小程序框架提供的机制来实现，通常是通过事件和数据绑定。
后台通信：可以通过小程序提供的API与服务器通信，例如wx.request等。
H5 应用：
通信机制：页面内的通信可以通过DOM事件、JavaScript函数调用等方式实现。
后台通信：可以使用标准的AJAX请求、Fetch API、WebSocket等方式与服务器通信。
4. 运行机制
微信小程序
启动
如果用户已经打开过某小程序，在一定时间内再次打开该小程序，此时无需重新启动，只需将后台态的小程序切换到前台，整个过程就是所谓的
热启动如果用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动，就是
冷启动
销毁
当小程序进入后台一定时间，或系统资源占用过高，或者是你手动销毁，才算真正的销毁
h5：解析HTML CSS形成DOM树和CSSOM树，两者结合形成renderTree，js运行，当然中间存在一系列的阻塞问题，还有同源策略等等
5. 系统权限方面（特定功能）
微信小程序依托于微信平台，能够利用微信提供的特有功能和API，实现许多H5应用无法直接实现或不易实现的功能，如微信支付、微信登录、硬件接口（如摄像头、麦克风、蓝牙、NFC等）、微信特有功能等。
6.更新机制
h5更新后访问地址即可
微信小程序需要审核
开发者在发布新版本之后，无法立刻影响到所有现网用户，要在发布之后 24 小时之内才下发新版本信息到用户
小程序每次
冷启动时，都会检查有无更新版本，如果发现有新版本，会异步下载新版本代码包，并同时用客户端本地包进行启动，所以新版本的小程序需要等下一次冷启动才会应用上，当然微信也有wx.getUpdateManager可以做检查更新
7. 开发工具和调试
微信小程序：
开发工具：微信提供了专门的开发者工具，集成了调试、预览、上传等功能，方便开发者进行开发和测试。
调试：可以使用微信开发者工具进行实时调试，并提供丰富的日志和调试信息。
H5 应用：
开发工具：可以使用任何Web开发工具和IDE（如VS Code、WebStorm等），以及浏览器的开发者工具进行调试。
调试：依赖浏览器的开发者工具（如Chrome DevTools），可以进行断点调试、查看网络请求、分析性能等。
总结来说，微信小程序和H5应用在实现原理上的差异主要是由于它们的架构设计、运行环境和生态系统的不同。小程序依托于微信平台，提供了许多平台专属的优化和功能，而H5应用则更加开放和灵活，依赖于浏览器的标准和特性。
小程序为什么使用双层架构
微信小程序采用双线程架构的原因主要是为了优化性能和用户体验。双线程架构将逻辑层和视图层分离，使得业务逻辑处理和视图渲染在不同的线程中进行，从而提高了小程序的运行效率和响应速度。以下是采用双线程架构的具体原因和优势：
提高性能：
将逻辑处理和页面渲染分离到不同的线程中，可以避免互相干扰，提高整体性能。例如，在复杂的业务逻辑计算过程中，视图层仍然可以保持流畅的界面更新和响应。
逻辑层和视图层通过消息机制进行异步通信，可以避免阻塞和卡顿。这样即使逻辑层的操作较为耗时，也不会影响界面的即时响应。
安全性： 视图层无法直接操作逻辑层的数据和代码，这样可以避免一些潜在的安全风险和漏洞。
XSS
由于逻辑层和视图层分离，视图层不能直接执行逻辑层的JavaScript代码。这种隔离使得即使视图层（WXML）中存在注入的恶意代码，也不能直接影响逻辑层的数据和操作。
逻辑层和视图层之间的通信通过统一的API进行，传递的数据会经过平台的安全检查和过滤，进一步减少了XSS攻击的风险。
CSRF
小程序通过平台的统一API进行请求，这些请求包含了平台自动添加的安全令牌（如
session_key等），确保请求的合法性。由于逻辑层和视图层的分离，用户在视图层进行操作时，逻辑层的业务逻辑和数据处理经过平台的校验，减少了CSRF攻击的风险。
DOM篡改:视图层的DOM结构由WXML和WXSS定义，不能直接通过逻辑层的JavaScript代码进行操作，这种隔离减少了DOM篡改的可能性。
安全权限管理：小程序的API权限由平台统一管理和控制，开发者需要申请和用户授权后才能使用特定的API。
用户体验： 微信小程序在启动时可以并行加载逻辑层和视图层资源，减少初始加载时间，提升启动速度。同时，微信平台会对小程序进行预加载和缓存优化，进一步提升加载性能。
rpx
微信的自适应单位，可以根据屏幕宽度进行自适应。
在微信小程序中，1 rpx 表示屏幕宽度的 1/750，因此 rpx 和 px 的换算关系是动态的，基于设备的实际屏幕宽度。
作者：let_code
来源：juejin.cn/post/7389168680747614245
