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

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

其他重要优化和功能支持

1. 增强的样式表和脚本管理 React 19 提供了对可控优先级的样式表的内置支持，确保异步脚本在组件树中按预定顺序执行，降低了管理复杂样式和脚本冲突的难度。

2. React DevTools 的更新 React DevTools 在 2024 年进行了多次更新，其中最为重要的版本是 React DevTools 6.0.0。Server Components 的调试功能成为亮点，能够在组件树中显示 Server Components，方便开发者调试服务器端渲染的组件。此外，函数检查速度和元素检查性能也得到了改进。

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

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 框架

迅速崛起

提到前端开发框架，大家第一时间想到的通常是 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 框架

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 代码案例

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;

详细分析

1. 渲染机制与性能优化

   • Qwik：采用 Resumable Streams 技术，支持服务器端预渲染和客户端按需加载，能够显著提高页面的首次加载速度。通过减少初始 JavaScript 的下载和执行量，只加载和渲染用户当前需要的内容。
   • Vue 和 React：使用虚拟 DOM，通过差异算法高效更新 DOM，减少了不必要的 DOM 操作。

2. 状态管理与数据流

   • Qwik：强调使用可观察的数据流来管理状态，使得状态的变化能够自动触发组件的重新渲染。
   • Vue：提供 Vuex 作为中心化状态管理解决方案，使得状态的管理和共享变得更加容易和可控。
   • React：与 Redux 或 Context API 等一起使用，能够灵活地管理状态。

3. 组件化与复用

   • Qwik：支持组件化开发，组件可以独立开发、测试和复用。
   • Vue：提供丰富的组件复用机制，如 Mixins、HOCs 和 Slots 等。
   • React：支持组件化开发，组件可以独立开发、测试和复用。

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

简述

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

结语

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