Web 新兴技术

#前端

目录

1. WebAssembly (Wasm)

1.1. 定义

  • WebAssembly 是一种新的==二进制指令格式==，设计用于浏览器中的高性能执行。
  • 它是一种低级、==类似于汇编语言==的格式，可以与 JavaScript 一起使用。

1.2. 特点

  • 高性能：接近原生代码的执行速度，适用于需要高计算性能的应用。
  • 跨平台：在不同的操作系统和设备上运行一致。
  • 语言无关：支持多种编程语言，如 C、C++、Rust 等。

1.3. 应用场景

  • 游戏开发：高性能的图形渲染和计算。
  • 图像和视频处理：实时的图像编辑和视频编码。
  • 科学计算：复杂的数学运算和模拟。

2. WebXR

2.1. 定义

WebXR 是一种用于构建虚拟现实（VR）和增强现实（AR）体验的标准 API。它是 WebVR 的扩展，提供了更广泛的功能和更好的性能。

2.2. 特点

  • 跨设备支持：
    • 支持多种 VR 和 AR 设备，如 Oculus Rift、HTC Vive、Microsoft HoloLens 等。
  • 高性能：
    • 优化了渲染和交互的性能，提供沉浸式体验。
  • 易于集成：
    • 与现有的 Web 技术（如 WebGL）无缝集成。

2.3. 应用场景

  • 游戏和娱乐：沉浸式游戏和虚拟旅游。
  • 教育和培训：虚拟实验室和模拟训练。
  • 电商和营销：虚拟试衣间和产品展示。

3. 机器学习和 AI

3.1. TensorFlow.js 和 ml5.js

  • TensorFlow.js：
    • 一个用于在浏览器中运行机器学习模型的库。支持训练和推理，允许开发者直接在客户端进行机器学习操作。
  • ml5.js：
    • 基于 TensorFlow.js 的高级库，提供了简单易用的 API，用于实现常见的机器学习任务。

3.2. 特点

  • 实时处理：在浏览器中实时运行机器学习模型，无需服务器端处理。 ===> 端侧模型
  • 隐私保护：数据在本地处理，减少了隐私泄露的风险。
  • 易于使用：提供了丰富的预训练模型和简化的 API，降低了机器学习的入门门槛。

3.3. 应用场景

  • 图像识别：实时的图像分类和对象检测。
  • 自然语言处理：文本分类、情感分析和翻译。
  • 推荐系统：个性化推荐和内容过滤。

4. HTTP/3

4.1. 定义

HTTP/3 是 HTTP 协议的最新版本，基于 QUIC 协议（Quick UDP Internet Connections）。它旨在提高 Web 的传输效率和可靠性。

Chrome、Edge、Firefox 和 Safari 都已经实现了 HTTP/3 支持

4.2. 特点

  • 基于 UDP：使用 UDP 代替 TCP，减少了连接建立的延迟。
  • 多路复用：在一个连接中同时传输多个数据流，避免了“队头阻塞”问题。
  • 内置加密：默认使用 TLS 1.3 提供安全传输。

4.3. 优势

  • 更快的连接建立：减少了握手时间，提高了页面加载速度。
  • 更好的性能：在高延迟和丢包环境下表现更好。
  • 增强的安全性：内置加密提供了更强的安全保障。

详见计算机网络章节 1. 关于HTTP 的一些常见问题汇总

5. WebRTC

5.1. 定义

WebRTC（Web Real-Time Communication）是一个支持浏览器和移动应用进行实时通信的开源项目。它允许音频、视频和数据的直接传输，无需中介服务器。

5.2. 特点

  • 点对点通信：
    • 直接在客户端之间传输数据，减少了延迟。
  • 跨平台支持：
    • 在不同浏览器和设备上运行一致。
  • 高质量传输：
    • 支持高质量的音频和视频传输。

5.3. 应用场景

  • 视频会议：
    • 实时的视频通话和会议。
  • 在线教育：
    • 实时的教学和互动。
  • 游戏和娱乐：
    • 实时的多人游戏和互动体验。

6. Progressive Web Apps (PWA)

6.1. 定义

渐进式 Web 应用（PWA）是一种结合了 Web 和本地应用优点的新型应用形式。PWA 使用现代 Web 技术提供类似本地应用的用户体验。

6.2. 特点

  • 离线访问：通过 Service Worker 实现离线缓存。
  • 推送通知：支持推送通知，保持用户互动。
  • 安装到主屏幕：用户可以将 PWA 安装到主屏幕，像本地应用一样使用。

6.3. 优势

  • 跨平台：在不同操作系统和设备上运行一致。
  • 无需安装：用户通过浏览器访问，无需下载和安装。
  • 自动更新：应用更新自动推送到用户，无需手动操作。

7. JAM stack 架构

更多见 10. JAMstack 架构

7.1. 定义

JAM 代表 JavaScript、APIs、Markup。

  • JavaScript 是网络应用程序使用的编程语言
  • API（应用程序编程接口）是一种从别人的程序或应用程序中请求数据的方式
  • Markup 是向浏览器提供格式化指示的代码（HTML 和 CSS）。

JAMstack 是一种现代 Web 开发架构，强调客户端 JavaScript、可重用 API 和预构建标记（Markup）。它旨在提高 Web 应用的性能、安全性和可扩展性。

7.2. 特点

  • 静态生成：使用静态站点生成器（如 Gatsby、Next.js）预构建页面，提高加载速度。
  • 无服务器：通过 API 调用实现动态功能，减少服务器管理。
  • 分离关注点：前端和后端分离，前端通过 API 获取数据。

7.3. 优势

  • 高性能：静态页面加载速度快，用户体验好。
    • 因为：JAMstack 应用程序中的几乎所有内容都由从 CDN 提供的静态 HTML 文件组成
  • 高安全性：减少了服务器攻击面，提高了安全性。
  • 易于扩展：通过 API 扩展功能，灵活性高。
    • 由于 JAMstack 前端速度快且后端轻量化，因此 JAMstack 应用程序通常具有极强的可扩展性。