2024 前端主流框架演进与性能优化实践总结

2024 年，前端领域经历了显著的变革。React、Vue、Svelte 以及新兴的 Qwik 等框架在性能优化、开发体验和架构模式上都有了新的突破。回顾这一年，技术栈的迭代不仅提升了应用效率，也重新定义了我们对构建 Web 应用的思考方式。

React 框架

2024 年，React 继续稳坐前端框架的'流量顶流'位置。React 18 的自动批处理更新机制、并发流及服务端组件等新特性持续深化，更新重点围绕性能优化、开发效率提升以及更深入的服务端渲染（SSR）集成。

React 优化

Server Components（RSC）的流式渲染 Server Components 支持流式渲染，使得组件可以像流水线一样逐步加载。用户不再需要等待整个页面加载完成才能看到内容，而是可以逐步看到页面的各个部分。在网络较慢的情况下，这一功能显著提升了用户体验，减少页面白屏时间。
减少客户端 JavaScript 体积 通过将逻辑转移到服务端执行，React Server Components 能够显著减少客户端需要加载的 JavaScript 体积。这不仅提升了页面的加载速度，还减轻了客户端设备的负担。
并发渲染的完善 React 的并发渲染功能在 2024 年得到了进一步的完善。复杂的 UI 交互能够更流畅地进行，允许 React 在处理高优先级任务（如用户输入）时，暂停低优先级任务（如数据获取），确保应用的交互性始终保持在高水平。
Suspense 回退处理的优化 React 19 引入了 useOptimistic 钩子，使得乐观更新的实现变得更加容易。同时，React 对 Suspense 的回退处理进行了优化，使得加载时的占位状态更加细腻，页面切换时更自然。
动态导入性能提升 React 对 React.lazy 进行了优化，提高了动态加载组件的效率，让开发者能更灵活地按需加载组件。

开发效率提升

增强的异步操作管理工具 React 19 引入了'动作'（Action）和'异步转换动作'的概念，以及 useTransition 和 useActionState 钩子，显著简化了复杂的异步操作管理。开发者可以更轻松地处理数据突变、等待状态、错误处理和乐观更新。
更智能的批量更新机制 在 React 并发模式中，默认以批量更新方式执行 setState。这意味着多次执行 setState 只会触发一次渲染过程，减少了不必要的渲染次数，代码也更加简洁。

服务端渲染（SSR）集成

Server Components 的稳定性加强 React 19 加强了 Server Components 的稳定性，使得开发者能够更可靠地实现服务端渲染。

// Server 端组件
export default async function UserProfile({ userId }) {
  const user = await fetch(`/api/user/${userId}`).then(res => res.json());
  return <div>{user.name}</div>;
}

// 客户端集成
<UserProfile userId="123" />

新的错误处理机制 React 19 引入了 onCaughtError、onUncaughtError 和 onRecoverableError 等新的错误处理机制，为开发者提供了更细粒度的错误捕获和管理能力。

其他重要优化和功能支持

增强的样式表和脚本管理 React 19 提供了对可控优先级的样式表的内置支持，确保异步脚本在组件树中按预定顺序执行，降低了管理复杂样式和脚本冲突的难度。
React DevTools 的更新 React DevTools 在 2024 年进行了多次更新，其中最为重要的版本是 React DevTools 6.0.0。Server Components 的调试功能成为亮点，能够在组件树中显示 Server Components，方便开发者调试服务器端渲染的组件。此外，函数检查速度和元素检查性能也得到了改进。

React DevTools 界面

TypeScript 支持的改进 React 19 对 TypeScript 的支持进行了改进，使得响应式对象和计算属性的类型推断更加智能，减少了类型错误的发生。

Vue 框架

Vue 框架示意图

Vue 版本与维护方面

Vue 2 生命周期结束：2023 年底，Vue 2 停止开源维护，2024 年标志着 Vue 2 生命周期的正式完结，这促使开发者向 Vue 3 及更高版本过渡。

性能优化与增强

1. Vue 3.3

性能优化：虚拟 DOM 的处理和组件渲染方面进行了优化，内部算法优化减少了不必要的重渲染。
Composition API 增强：代码结构更加清晰和模块化，新增了更多的钩子函数。
TypeScript 支持加强：类型推断更加准确，提供了更好的类型定义。
内置指令：新增了内置指令如 v-memo，用于优化性能。例如，当列表项的状态发生变化时，使用 v-memo 后只有状态发生变化的项目才会重新渲染。

<template>
  <div v-for="item in list" :key="item.id" v-memo="[item.selected]">
    <p>ID:{{ item.id }} - selected:{{ item.selected }}</p>
    <p>...more child nodes</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { id: 1, selected: false },
        { id: 2, selected: false }
      ];
    };
  }
};
</script>

2. Vue 3.4

模板解析器重写：完全重写，速度提高了 2 倍，SFC 构建性能提升。
响应式系统重构：实质性的重构，提高了计算属性的重新计算效率。
defineModel 稳定：作为 <script setup> 宏，旨在简化支持 v-model，在 3.4 中升级为稳定状态。
v-bind 同名速记：允许更简洁的 v-bind 语法。
错误消息改进：对水合不匹配错误消息进行了多项改进。

3. Vue 3.5

响应式属性解构的稳定性：允许在使用 defineProps 宏时进行属性解构，而不会损失响应性。
useTemplateRef 功能：简化了模板引用的声明过程。
useId 函数：引入新函数，为服务端渲染和客户端渲染生成唯一且稳定的 ID。
性能优化：内存使用量减少近 60%，处理大型响应式数组时表现得更加高效。

Svelte 框架

Svelte 框架示意图

迅速崛起

提到前端开发框架，大家第一时间想到的通常是 Vue、React 和 Angular。但最近几年，一个新的前端框架逐渐出现在人们眼前，它就是后起之秀 Svelte。虽然暂时无法撼动三大主流框架的霸主地位，但其恐怖的 star 增速值得我们关注和思考。

Vue 作者对其评价

尤雨溪指出，Svelte 的核心思想在于'通过静态编译减少框架运行时的代码量'。传统框架如 React、Angular 或 Vue，在使用时都需要引入框架本身的运行时。而 Svelte 则不同，一个 Svelte 组件编译后，所有需要的运行时代码都包含在里面了，除了引入这个组件本身，不再需要额外引入一个框架运行时。

Svelte 比较有优势的地方在于编译可独立分发的 Web Components。传统框架和 Web Components 结合时，运行时是一个问题。单独分发的 Web Components 如果直接打包框架运行时，会导致每个组件都要复制一份框架；如果不打包，又做不到开箱即用。而 Svelte 受这个问题的限制最小。

特点案例

Svelte 是一种新兴的前端 JavaScript 框架，它的主要特点是在构建阶段进行大量的优化工作，将组件的模板编译为高效的原生 JavaScript 代码，从而避免了运行时的虚拟 DOM 开销。这种独特的编译策略使得 Svelte 应用在性能方面具有显著的优势。

Svelte 的组件语法相对简洁。一个基本的 Svelte 组件通常由三个部分组成：script 标签用于定义组件的逻辑，style 标签用于定义组件的样式，最后是组件的模板部分。

<script>
  let name = 'World';
</script>
<h1>Hello {name}!</h1>
<style>
  h1 { color: blue; }
</style>

性能优势

加载速度快 由于 Svelte 在编译时就将模板转换为高效的 JavaScript 代码，避免了在浏览器中加载和解析大量框架代码的过程。在移动设备或者网络条件较差的环境下，这种加载速度的优势更加明显。

运行时性能高 没有虚拟 DOM 的开销使得 Svelte 在运行时的性能表现出色。在处理复杂的用户交互和频繁的 DOM 更新场景下，Svelte 能够直接更新真实 DOM，减少了中间环节的性能损耗。

生态系统与工具支持

生态方面，Svelte 的生态系统在不断发展壮大。已经有了一系列的插件、组件库和工具。例如，Svelte Material UI 是一个基于 Svelte 的材质设计组件库。还有 SvelteKit，它是一个用于构建全栈 Svelte 应用的框架。

开发工具支持方面，VS Code 对 Svelte 有良好的支持。通过安装 Svelte 相关插件，可以获得语法高亮、代码自动补全等功能。

Qwik 框架

Qwik 框架示意图

2023 年 5 月 2 号 Builder 官方 Qwik 研发团队对外宣布追求极致性能的前端框架 Qwik 1.0 正式发布。

Qwik 介绍

Qwik 是一个超快的 JavaScript 框架。Qwik 使用一种细粒度的模型来隔离应用程序的分段，这些分段根据需要进行水合。Qwik 是'零基线 JavaScript'框架趋势的一部分。

Qwik 没有依靠 hydration 为服务端生成的页面增加互动性，而是使用一种叫做 resumability 的技术来提供即时互动的 HTML。它的原理在 HTML 中序列化应用程序的状态。

该项目由 Miško Hevery 领导，他是 AngularJS 的创建者，而 Qwik 是'HTML 优先框架'。

核心不同点比较

	Qwik	Vue	React
渲染机制与性能优化	采用 Resumable Streams 技术，支持服务器端预渲染和客户端按需加载。	使用虚拟 DOM，通过差异算法高效更新 DOM。	使用虚拟 DOM，通过差异算法高效更新 DOM。
状态管理与数据流	强调使用可观察的数据流来管理状态。	提供 Vuex 作为中心化状态管理解决方案。	通常与 Redux 或 Context API 一起使用。
组件化与复用	支持组件化开发，组件可以独立开发、测试和复用。	支持 Mixins、HOCs 和 Slots 等机制。	支持 Hooks、HOCs 和 Render Props 等机制。

代码案例

Qwik 代码案例

import { html, component$, useStore } from '@builder.io/qwik';

const useCounterStore = () => useStore({ key: 'counter', initial: 0 });

export default component$('CounterComponent', () => {
  const counter = useCounterStore();
  return html`
    <div>
      <p>Count: ${counter.value}</p>
      <button onClick$={() => counter.value++}>Increment</button>
    </div>
  `;
});

Vue 代码案例

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>
<script>
export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

React 代码案例

import React, { useState } from 'react';
function CounterComponent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
export default CounterComponent;

详细分析

渲染机制与性能优化
- Qwik：采用 Resumable Streams 技术，支持服务器端预渲染和客户端按需加载，能够显著提高页面的首次加载速度。通过减少初始 JavaScript 的下载和执行量，只加载和渲染用户当前需要的内容。
- Vue 和 React：使用虚拟 DOM，通过差异算法高效更新 DOM，减少了不必要的 DOM 操作。
状态管理与数据流
- Qwik：强调使用可观察的数据流来管理状态，使得状态的变化能够自动触发组件的重新渲染。
- Vue：提供 Vuex 作为中心化状态管理解决方案，使得状态的管理和共享变得更加容易和可控。
- React：与 Redux 或 Context API 等一起使用，能够灵活地管理状态。
组件化与复用
- Qwik：支持组件化开发，组件可以独立开发、测试和复用。
- Vue：提供丰富的组件复用机制，如 Mixins、HOCs 和 Slots 等。
- React：支持组件化开发，组件可以独立开发、测试和复用。

综上所述，Qwik、Vue 和 React 在核心不同点上各有优劣，选择哪个框架取决于项目的具体需求和开发者的偏好。

简述

2024 年收获颇丰，涵盖小程序开发、Vue 项目实战、React 项目探索、服务端渲染技术实践、脚手架源码搭建经历、三维模型、前端面试经验总结等。这些经历记录了成长的足迹。

项目截图

结语

至此，2024 年的篇章渐入尾声。回望这一年，满载着经历与成长，我们满怀希望地迈向新的一年。愿 2025 年更加辉煌灿烂，让我们携手并进，共同书写更加美好的未来。

React 框架

React 优化

Server Components（RSC）的流式渲染 Server Components 支持流式渲染，使得组件可以像流水线一样逐步加载。用户不再需要等待整个页面加载完成才能看到内容，而是可以逐步看到页面的各个部分。在网络较慢的情况下，这一功能显著提升了用户体验，减少页面白屏时间。
减少客户端 JavaScript 体积 通过将逻辑转移到服务端执行，React Server Components 能够显著减少客户端需要加载的 JavaScript 体积。这不仅提升了页面的加载速度，还减轻了客户端设备的负担。
并发渲染的完善 React 的并发渲染功能在 2024 年得到了进一步的完善。复杂的 UI 交互能够更流畅地进行，允许 React 在处理高优先级任务（如用户输入）时，暂停低优先级任务（如数据获取），确保应用的交互性始终保持在高水平。
Suspense 回退处理的优化 React 19 引入了 useOptimistic 钩子，使得乐观更新的实现变得更加容易。同时，React 对 Suspense 的回退处理进行了优化，使得加载时的占位状态更加细腻，页面切换时更自然。
动态导入性能提升 React 对 React.lazy 进行了优化，提高了动态加载组件的效率，让开发者能更灵活地按需加载组件。

开发效率提升

增强的异步操作管理工具 React 19 引入了'动作'（Action）和'异步转换动作'的概念，以及 useTransition 和 useActionState 钩子，显著简化了复杂的异步操作管理。开发者可以更轻松地处理数据突变、等待状态、错误处理和乐观更新。
更智能的批量更新机制 在 React 并发模式中，默认以批量更新方式执行 setState。这意味着多次执行 setState 只会触发一次渲染过程，减少了不必要的渲染次数，代码也更加简洁。

服务端渲染（SSR）集成

Server Components 的稳定性加强 React 19 加强了 Server Components 的稳定性，使得开发者能够更可靠地实现服务端渲染。

// Server 端组件
export default async function UserProfile({ userId }) {
  const user = await fetch(`/api/user/${userId}`).then(res => res.json());
  return <div>{user.name}</div>;
}

// 客户端集成
<UserProfile userId="123" />

新的错误处理机制 React 19 引入了 onCaughtError、onUncaughtError 和 onRecoverableError 等新的错误处理机制，为开发者提供了更细粒度的错误捕获和管理能力。

其他重要优化和功能支持

增强的样式表和脚本管理 React 19 提供了对可控优先级的样式表的内置支持，确保异步脚本在组件树中按预定顺序执行，降低了管理复杂样式和脚本冲突的难度。
React DevTools 的更新 React DevTools 在 2024 年进行了多次更新，其中最为重要的版本是 React DevTools 6.0.0。Server Components 的调试功能成为亮点，能够在组件树中显示 Server Components，方便开发者调试服务器端渲染的组件。此外，函数检查速度和元素检查性能也得到了改进。

React DevTools 界面

TypeScript 支持的改进 React 19 对 TypeScript 的支持进行了改进，使得响应式对象和计算属性的类型推断更加智能，减少了类型错误的发生。

Vue 框架

Vue 框架示意图

Vue 版本与维护方面

Vue 2 生命周期结束：2023 年底，Vue 2 停止开源维护，2024 年标志着 Vue 2 生命周期的正式完结，这促使开发者向 Vue 3 及更高版本过渡。

性能优化与增强

1. Vue 3.3

性能优化：虚拟 DOM 的处理和组件渲染方面进行了优化，内部算法优化减少了不必要的重渲染。
Composition API 增强：代码结构更加清晰和模块化，新增了更多的钩子函数。
TypeScript 支持加强：类型推断更加准确，提供了更好的类型定义。
内置指令：新增了内置指令如 v-memo，用于优化性能。例如，当列表项的状态发生变化时，使用 v-memo 后只有状态发生变化的项目才会重新渲染。

<template>
  <div v-for="item in list" :key="item.id" v-memo="[item.selected]">
    <p>ID:{{ item.id }} - selected:{{ item.selected }}</p>
    <p>...more child nodes</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { id: 1, selected: false },
        { id: 2, selected: false }
      ];
    };
  }
};
</script>

2. Vue 3.4

模板解析器重写：完全重写，速度提高了 2 倍，SFC 构建性能提升。
响应式系统重构：实质性的重构，提高了计算属性的重新计算效率。
defineModel 稳定：作为 <script setup> 宏，旨在简化支持 v-model，在 3.4 中升级为稳定状态。
v-bind 同名速记：允许更简洁的 v-bind 语法。
错误消息改进：对水合不匹配错误消息进行了多项改进。

3. Vue 3.5

响应式属性解构的稳定性：允许在使用 defineProps 宏时进行属性解构，而不会损失响应性。
useTemplateRef 功能：简化了模板引用的声明过程。
useId 函数：引入新函数，为服务端渲染和客户端渲染生成唯一且稳定的 ID。
性能优化：内存使用量减少近 60%，处理大型响应式数组时表现得更加高效。

Svelte 框架

Svelte 框架示意图

迅速崛起

Vue 作者对其评价

特点案例

<script>
  let name = 'World';
</script>
<h1>Hello {name}!</h1>
<style>
  h1 { color: blue; }
</style>

性能优势

生态系统与工具支持

开发工具支持方面，VS Code 对 Svelte 有良好的支持。通过安装 Svelte 相关插件，可以获得语法高亮、代码自动补全等功能。

Qwik 框架

Qwik 框架示意图

2023 年 5 月 2 号 Builder 官方 Qwik 研发团队对外宣布追求极致性能的前端框架 Qwik 1.0 正式发布。

Qwik 介绍

该项目由 Miško Hevery 领导，他是 AngularJS 的创建者，而 Qwik 是'HTML 优先框架'。

核心不同点比较

	Qwik	Vue	React
渲染机制与性能优化	采用 Resumable Streams 技术，支持服务器端预渲染和客户端按需加载。	使用虚拟 DOM，通过差异算法高效更新 DOM。	使用虚拟 DOM，通过差异算法高效更新 DOM。
状态管理与数据流	强调使用可观察的数据流来管理状态。	提供 Vuex 作为中心化状态管理解决方案。	通常与 Redux 或 Context API 一起使用。
组件化与复用	支持组件化开发，组件可以独立开发、测试和复用。	支持 Mixins、HOCs 和 Slots 等机制。	支持 Hooks、HOCs 和 Render Props 等机制。

代码案例

Qwik 代码案例

import { html, component$, useStore } from '@builder.io/qwik';

const useCounterStore = () => useStore({ key: 'counter', initial: 0 });

export default component$('CounterComponent', () => {
  const counter = useCounterStore();
  return html`
    <div>
      <p>Count: ${counter.value}</p>
      <button onClick$={() => counter.value++}>Increment</button>
    </div>
  `;
});

Vue 代码案例

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>
<script>
export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

React 代码案例

import React, { useState } from 'react';
function CounterComponent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
export default CounterComponent;

详细分析

渲染机制与性能优化
- Qwik：采用 Resumable Streams 技术，支持服务器端预渲染和客户端按需加载，能够显著提高页面的首次加载速度。通过减少初始 JavaScript 的下载和执行量，只加载和渲染用户当前需要的内容。
- Vue 和 React：使用虚拟 DOM，通过差异算法高效更新 DOM，减少了不必要的 DOM 操作。
状态管理与数据流
- Qwik：强调使用可观察的数据流来管理状态，使得状态的变化能够自动触发组件的重新渲染。
- Vue：提供 Vuex 作为中心化状态管理解决方案，使得状态的管理和共享变得更加容易和可控。
- React：与 Redux 或 Context API 等一起使用，能够灵活地管理状态。
组件化与复用
- Qwik：支持组件化开发，组件可以独立开发、测试和复用。
- Vue：提供丰富的组件复用机制，如 Mixins、HOCs 和 Slots 等。
- React：支持组件化开发，组件可以独立开发、测试和复用。

综上所述，Qwik、Vue 和 React 在核心不同点上各有优劣，选择哪个框架取决于项目的具体需求和开发者的偏好。

简述

项目截图

2024 前端主流框架演进与性能优化实践总结

React 框架

React 优化

开发效率提升

服务端渲染（SSR）集成

其他重要优化和功能支持

Vue 框架

Vue 版本与维护方面

性能优化与增强

Svelte 框架

迅速崛起

Vue 作者对其评价

特点案例

性能优势

生态系统与工具支持

Qwik 框架

Qwik 介绍

核心不同点比较

代码案例

详细分析

简述

结语

2024 前端主流框架演进与性能优化实践总结

React 框架

React 优化

开发效率提升

服务端渲染（SSR）集成

其他重要优化和功能支持

Vue 框架

Vue 版本与维护方面

性能优化与增强

Svelte 框架

迅速崛起

Vue 作者对其评价

特点案例

性能优势

生态系统与工具支持

Qwik 框架

Qwik 介绍

核心不同点比较

代码案例

详细分析

简述

结语

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具