现代 Web 技术现状

#前端

1. 当前前端技术现状

当前的技术状态

单页应用（SPA）：
- 单页应用通过动态加载内容，使用户体验更加流畅。常用框架有 React、Angular 和 Vue.js。
- 使用虚拟 DOM 技术，提高了性能和响应速度。
  - 正在无虚拟 DOM 化
渐进式 Web 应用（PWA）：
- PWA 结合了 Web 应用和本地应用的优点，提供离线访问、推送通知和安装到主屏幕等功能，使 Web 应用具有更好的性能和用户体验。
- 通过 Service Worker 实现离线缓存和后台同步。
- 其实这几年不怎么提了
Web 组件：
- Web 组件是一种封装 HTML、CSS 和 JavaScript 的技术，允许开发者创建可重用的自定义元素。
- 标准技术包括 Custom Elements、Shadow DOM 和 HTML Templates。
CSS-in-JS：
- 将 CSS 样式直接写在 JavaScript 中，方便样式的动态生成和管理。
- 常用库有 styled-components 和 Emotion。

无服务器架构（Serverless Architecture）：
- 开发者可以将代码部署到云服务提供商（如 AWS Lambda、Azure Functions），无需管理服务器。
- ==按需收费==，自动扩展，适合事件驱动的应用程序。
  - 按使用量收费
微服务架构：
- 将大型应用拆分为多个小型、独立的服务，每个服务负责单一功能
- 提高了应用的可扩展性和维护性
  - 常用技术包括 Docker 和 Kubernetes （k8s）
GraphQL：
- 由 Facebook 开发的一种查询语言，允许客户端指定所需的数据结构
- 减少了冗余数据传输，提高了数据获取的灵活性和效率

持续集成和持续部署（CI/CD）：
- 自动化代码测试、构建和部署流程，提高了开发效率和代码质量。
- 常用工具有 Jenkins、GitHub Actions、GitLab CI/CD。
容器化和编排：
- 使用 Docker 将应用打包成独立的容器，确保在不同环境中的一致性。
- 使用 Kubernetes 管理和编排容器，提供自动扩展、负载均衡和故障恢复。

内容安全策略（CSP）：
- 通过设置 HTTP 头，防止跨站脚本攻击（XSS）和数据注入攻击
- 限制资源加载的来源，提高应用的安全性
HTTP/2 和 HTTP/3：
- HTTP/2 提供多路复用、头部压缩和服务器推送，显著提高了 Web 性能
- HTTP/3 基于 QUIC 协议，进一步减少了延迟和提高了传输效率。
  - QUIC (Quick UDP Internet Connections)
Web 性能优化：
- 使用懒加载（Lazy Loading）和代码分割（Code Splitting）减少初始加载时间
- 通过使用 CDN（内容分发网络）加速资源传输

WebAssembly (Wasm)：
- 一种新的==二进制指令格式==，允许开发者用 C、C++、Rust 等语言编写高性能的 Web 应用。
- 提高了 Web 应用的计算性能，适用于游戏、图像处理等高性能需求的应用。
WebXR：
- 用于构建虚拟现实（VR）和增强现实（AR）应用的标准 API。
- 提供了在 Web 浏览器中体验沉浸式内容的能力。
机器学习和 AI：
- TensorFlow.js 和 ml5.js 等库使得在浏览器中进行机器学习和人工智能应用成为可能。
- 实现图像识别、自然语言处理等功能，增强用户体验
- 端侧推理，与端侧智能

下文还有详细介绍