什么是 PWA（Progressive Web App 渐进式网络应用）

PWA 是一种结合了 Web 与原生应用优势的前端技术架构，核心能力包括：

• 离线访问：即使断网也能使用应用
• 可安装：可以被添加到手机主屏幕，像 App 一样运行
• 性能优化：资源按需缓存，提高加载速度
• 自动更新：通过 Service Worker 实现静默或提示式资源更新

引言

服务器端渲染（Server-Side Rendering，简称 SSR）是指在服务器端生成 HTML 内容并发送到客户端的过程。与客户端渲染（Client-Side Rendering，简称 CSR）相比，SSR 可以提高首屏加载速度和 SEO 友好性。
如需更高级的集成框架可以使用nuxtjs

1. 设计理念

特性	Vue	React
定位	渐进式框架	UI 库
编程范式	选项式（Option API） + 组合式（Composition API）	函数式
架构设计	内聚（内建路由、状态管理）	解耦（核心只管视图，其他靠社区）
组件形式	vue文件（模板 + JS）	JSX（JS + XML）

Vue 更强调易用性和渐进增强，适合快速开发。其内置了黑魔法，例如：SFC、宏函数、指令、scoped等；

React 更强调灵活性和函数式编程，更适合复杂业务需求。

1. 性能提升

• 模板编译器优化

  • Vue 2：模板编译结果中包含了较多的运行时代码，运行时成本较高

  • Vue 3：通过静态提升（Static Hoisting）和静态节点标记（Patch Flag）优化了虚拟 DOM 的 patch 过程，减少了运行时的开销

• diff算法优化

  • Vue 2：在比较新旧虚拟DOM树时，采用的是深度优先遍历，逐层比较节点，这种方式在处理大量节点时可能会有性能问题

  • Vue 3：编译时标记静态节点，减少运行时开销

    • 静态提升：将静态节点提升到编译阶段，避免在每次渲染时重新创建这些节点
    • 缓存优化：缓存一些计算结果，避免重复计算
    • 块级优化：将模板分成多个块，每个块只包含动态内容，静态内容会被提升到块外部。这使得块内的比较更加高效

• Tree-shaking 支持

  • Vue 2：整体打包，无法按需引入

  • Vue 3：基于 ES Module 架构，支持 Tree-shaking，减小打包体积