010-67952968
时光荏苒，2023 年已如白驹过隙般过去。虽然在 2023 年的前端大舞台上并没有出现革命性的明星项目，但在各个细分的技术领域都有一定的拓展与深耕，而且 2023 年 AI 大模型的迅猛发展也为前端领域注入了活力，接下来让我们一起乘坐时光机重回 2023，盘点 2023 年在前端行业发生的哪些重要的事情吧：
注：此处开始文章中所有” 今年 “代指 2023 年，明年代指”2024 年 “
1、首先在被誉为大模型元年的今年，大模型的应用能力持续完善，并逐渐开始在前端多个领域中落地。
2、在前端语言与标准领域，今年 JavaScript 和 CSS 都有一些新的变化，在 TypeScript 已成为前端项目标配的如今，今年社区为何频频出现了不一致的声音？
3、在前端框架领域，前端框架的四家马车 React、Vue、Svelte 和 Angular 继续领跑，它们都在按照自己的特色不断发展与进步。此外 Qwik 和 Htmx 在今年也广受前端社区喜爱，成为年度前端框架的黑马。
4、在前端基础建设领域，Rust 在前端的影响力越来越大：基于 Rust 的构建工具 Respack 和 代码检查工具 Oxlint 正式发布、 Vite 官方也正式宣布计划使用 Rust 重构 Vite，替换掉原有的 Esbuild 和 Rollup。此外，前端全能工具包 Bun 正式发布 1.0 版本，成为 JavaScript 年度明星项目。
5、在低代码领域，低代码社区建设持续完善，基于源代码驱动和与大模型结合的低代码引擎于今年首次亮相。
6、在 D2C 领域，出现了 C2D2C 这个新的解决方案，大模型为 D2C 赋能未来可期。
8、此外在浏览器、 WASM、音视频等与前端息息相关的底层能力领域也有新的发展。
根据 StackOverflow 2023 年度流行语言报告中统计显示， 前端三剑客（HTML/CSS/JavaScript）依然位居榜首。而 JavaScript 已连续 11 年成为最流行的编程语言，而 TypeScript 也上升到第五的位置。整体而言，前端社区依旧充满朝气与活力。接下来让我们回顾一下 2023 年前端在语言与标准的领域上有哪些变化吧。
近年来，由于 TypeScript 提供的类型安全性、更好的工具支持以及与 JavaScript 生态系统的兼容性，它所带来的对代码质量和可维护性方面的价值已被前端社区所认可，目前已经成为开发 Web 应用程序的主要编程语言之一。从 GitHub 2023 年度报告显示，今年 TypeScript 首次超过 Java，成为 GitHub 上 OSS 项目中第三大最受欢迎的语言，其用户群体增长了 37%。
今年 3 月 16 日 TypeScript 5.0 正式发布，该版本更新了许多令人激动的新特性，例如支持全新的装饰器、extends 支持多配置文件、引入 const 类型参数等。笔者认为 TypeScript 5.0 最大提升应该是在一直令人诟病的包体积大小和编译构建速度上的优化。
首先，TypeScript 从命名空间转移到了模块中，这使我们能够利用现代构建工具来执行优化，如作用域提升，此外还删除了一些废弃的代码。优化后，TypeScript 5.0 相较于 TypeScript 4.9 ，包体积从约 63.8 MB 减少到约 37.4 MB，降低了约 42%。
具体更多的有关模块迁移描述可参考相关的官方文档：typescript/…
其次，TypeScript 5.0 还对代码的数据结构以及算法实现上进行优化，例如 TypeScript 5.0 会现有对一些常用的机制进行了缓存，以便在编译操作之间重复使用。TypeScript 5.0 相较于 TypeScript 4.9 编译速度上有着明显的提升。
在一些编程语言中，比如 C#，使用 using 关键字可以确保在使用完资源后，会自动释放这些资源。然而，在 JavaScript 中，开发者需要手动释放一些资源，比如打开的文件、数据库连接等。这就导致了在代码中需要显式地处理资源的释放，容易出现忘记释放、异常时未能释放等情况。
尽管目前 TypeScript 如日中天，取得了前所未有的成功。然而，在今年 8 月份，Ruby on Rails 的创建者 David Heinemeier Hansson（DHH） 从即将发布的 Turbo 框架第 8 版中删除了 TypeScript，并发文称 “通过添加微不足道的类型技巧，让我的开发体验变得更加糟糕，而且频繁引发很多困扰。本应简单的事情反而变得很困难。”
其实，Turbo 并不是第一个放弃 TypeScript 的前端框架，今年 3 月，Svelte 团队计划将会从目前使用的 TypeScript 迁移到 JSDoc。Svelte 创始人 Rich Harris 曾在推特上说道：Svelte 并没有放弃类型安全，而是改用 JSDoc，以减少包体和代码编译时间，依旧支持使用 tsc 编译器检查类型。
在日常业务开发中，我们通常只会使用类型定义、泛型以及简单的类型推导，并不会使用到所谓的 “TypeScript 类型体操 “，但是 TypeScript 强类型所带来的类型安全能够大幅度提高项目的代码质量和可维护性。而在类库和框架的开发中，抛弃 TypeScript 转向 JavaScript 的只是少数开发者，目前绝大部分的主流前端开源项目都是在拥抱 TypeScript，这也足以证明社区肯定 TypeScript 所带来的价值。
此外，虽然 TypeScript 原生编译器速度较慢，但是笔者认为这个是可以通过更换 esbuild 或则 swc 等性能更加优异的编译器来解决的。
没有任何一门语言是十全十美的，TypeScript 也毫不例外。笔者认为 TypeScript 的确会引入了一定的复杂度，但是其所提供的类型系统能够大幅度提高项目的健壮性和可维护性，在绝大部分前端开发场景下，都是利大于弊的，能够很好地规避 JavaScript 弱类型带来的大部分陷阱。
回顾完前端语言明日之星 TypeScript，让我们将目光转到 JavaScript 上。今年 6 月 27 日，第 125 届 ECMA 大会正式批准了 ECMAScript 2023 语言规范。总而言之，本次 ECMAScript 2023 并没有新增大的改动点，更多是对 JavaScript 原来语法的完善与增补。而笔者认为其中比较有意义的更新主要有以下两个：
目前大多数的数组方法都是非破坏性的，当然也存在一些对原数组具有破坏性的方法，例如 reverse ()、sort () 以及 splice () 。当我们想要使用这些方法又不想对原数组造成影响的话，通常需要先拷贝一份数组再调用相应的方法，由此可见，这种开发体验不友好的。因此在今年的 ECMAScript 2023 优化了开发体验，新增了相应的非破坏性方法。
今年除了 JavaScript 以外，CSS 也同样迎来了一系列新特性，这些特性不仅增强了样式和布局的能力，还提升了开发者的效率和用户体验。下面笔者仅介绍个人认为比较重要的两个 CSS 新特性，具体更多新特性的详情可以参考文章：【第 3144 期】2023 年 CSS 新特性盘点
CSS 支持嵌套一直是 Sass 中最受开发者喜爱的功能点之一，它允许让开发者在编写样式的时候更加整洁、内聚。据上一年 State of CSS 统计，CSS 嵌套是受访者认为 CSS 最需要补充的功能之一。
而在今年 CSS 2023 新特性中，原生 CSS 正式支持嵌套写法，在高版本浏览器中，无需依赖额外的编译器即可享受 Sass 嵌套语法，很大程度上优化了开发者体验，提高了 CSS 的可读性和可维护性。
除了 CSS 嵌套外，父选择器也是受访者认为 CSS 最需要补充的功能之一。简单来说，CSS 父选择器的作用能通过子元素选中其父元素。既然是万众期待且如此实用的选择器，为什么各大浏览器迟迟没有支持呢？
浏览器的渲染模式是以流的方式，一个元素接一个元素进入。因此当一个元素在浏览器渲染出来时，其父元素的样式计算已经完成并且也已经渲染好了。在此之后，通过子元素选择父元素并应用样式触发重绘时，需要对父元素和子元素都进行重新绘制，这样的计算对于当时的渲染引擎而言是昂贵的。
与其他选择器而言，父选择器触发重绘的性能开销很大，如果有一个父选择器，那将很容易成为低效率选择器中的新老大。
近几年浏览器的渲染引擎有了很大的改进，目前浏览器可以有效地确定哪些需要渲染或更新，而哪些不需要。因此在今年众望所归的父选择器 :has 也正式被各大浏览器所支持。
回顾 2023 年前端框架，最受欢迎的四大主流框架依旧是 React、Vue、Angular 和 Svelte。从 2023 年 NPM 包下载量来看，React 框架依旧一骑绝尘，遥遥领先。Vue 则处于第二的位置，而 Svelte 已连续两年超过 Angular，成为前端第三大最受欢迎的 UI 框架。
除了上述前端框架的四架马车以外，今年还有两个黑马框架正式发布 1.0 版本，他们分别是 Qwik 和 Bun，接下来让笔者带你们盘点 2023 年期间这些框架到底发生了什么值得回顾的重要事情吧。
在 2023 年期间，React 官方整整一年都没有发布新的 release 版本，上一次发布 release 版本还是在 2022 年的 6 月，而 React 19 也似乎遥遥无期，最近一次更新已经是在一年前了。那么今年 React 官方到底在忙些什么呢？
答案是将 RSC（React Server Component，服务端组件）接入当前 React 体系中，目前绝大部分前端开发者只是把 React 当作前端 view 库所使用，并不会直接使用 RSC 相关功能，因此 React 团队与 Next.js 团队进行合作，以 React RSC 规范落地于 Next.js 框架内部。所以 React 需要由面向开发者的前端框架渐渐转型为支持面向上层框架的元框架。
早期，React 作为前端框架，为了满足广大开发者在 UI 开发的需求，所以绝大部分的面向开发者的改动都能在 React 官方文档中体现，因此开发者也能通过文档直观感受到 React 不断迭代。而今年更新优化绝大多数都是面向上层框架，例如一些面向上层框架的新特性以及重构优化，这些普通开发者日常很少使用。具体更多可阅读下面的文章：为什么 React 一年不发新版了？
与此同时，今年 React 团队引入了名为 Canary 版本的发布渠道，从而使其可以在新功能的设计接近完成时就可以选择使用这些功能，而不必等到它们发布为稳定版本，React 团队也是主要通过此方式为上层框架提供相应的 API 支持。
而笔者则重点介绍一下尤大曾在 2023 新年展望中首次提到的 VaporMode。
VaporMode 是 Vue3 受 Solid.js 启发新的编译模式。它不依赖于虚拟 DOM，而是更多地利用 Vue 的内置响应性系统。简而言之通过将代码编译为更高效的 JavaScript，减少运行时开销，以获取更好的页面性能。Vue 之所以支持实现与 Solid 类似的编译策略，是因为 Vue 与 Solid.js 具有类似的响应式系统，它们都通过使用代理的方式实现响应式，并具有基于读取的自动跟踪。
VaporMode 目前仍处于开发阶段，从 VueConf 2023 中可得知目前的进展与规划如下，具体更多介绍请观看上述提到的 Vue Conf 2023 视频进行了解，笔者在此处简单概括一下：
这一阶段的主要重点是在 Vue 核心功能的运行时引入并支持 VaporMode，该阶段目标如下：
这一阶段的主要重点是确保可以使用 Vue 模板或 JSX 并将其转换为运行时可以处理的内容，该阶段目标如下：
这一阶段的主要重点是两方面，一是 VaporMode 能够无需对当前的设置进行任何修改，可以无缝地融入现有的应用，降低接入成本；二是支持在组件级别进行选择性接入 VaporMode，以便于开发者可以根据需要灵活地使用 VaporMode，例如在性能关键的区域中使用，该阶段的目标如下：
总结而言，尤大在会议中如此说道：“这个策略只是一个实验性的产品，并不一定会上线，更不会是破坏性的更新，将来会提供可选的编译模式提供给开发者进行自行选择”。VaporMode 新特性可以理解成 Vue 在性能和包体积缩减方面的进一步探索与发展，其灵活的采用策略在保持与现有特性的兼容性，为不同场景需要提供了不同编译选择。
随着 2023 年接近尾声， Vue2 也将在 2023 年 12 月 23 日到达它的生命周期的终点（EOL），目前 Vue2.7 是当前、同时也是最后一个 Vue2.x 的版本。Vue 2 的终止支持时间是 2023 年 12 月 31 日。在此之后，Vue 2 在已有的分发渠道 (各类 CDN 和包管理器) 中仍然可用，但不再进行更新，包括对安全问题和浏览器兼容性问题的修复等。
今年 6 月，Svelte4 正式发布，Svelte4 主要是一个维护版本，该版本提高了最低版本要求并加强了特点领域的设计，为未来的 Svelte 5 的发布奠定了基础。Svelte 4 的主要亮点在于包体积大小优化上，从原来的 10.6 MB 减少到 2.8 MB，降低约 75%。
除此以外，Svelte 宣布将在 Svelte 5 将引入新的响应式 API：runes。Runes 本质上是作用于 Svelte 编译器的特殊语法，通过$state可以将值定义为响应式，不仅可以在 Svelte 组件内使用，也可以在外部的 JavaScript 文件中使用，实现跨组件的状态共享。此外，Runes 还提供了运行时响应式$derived和$effect的语法。
今年 5 月 4 日，Angular 16 正式发布，开发者预览版引入全新的 Angular 响应式模型和基于 Esbuild 的构建系统，并无显著的新特性，更像是一个 “垫脚石” 版本。而在 2023 年的 11 月 8 日，Angular 17 正式发布，该版本引入了许多重要的更新：
在前后端分离和单页面应用（SPA）已经形成大局的 2023 年，却有一款基于动态服务器页面（ASP）思想的框架 htmx 意外走红。它在 2023 年 JavaScript 明星前端框架中排名第二，仅此 React。接下来就让笔者带大家了解一下 Htmx 究竟是何方神圣以及 Htmx 的爆火是否意味着前端要开历史的倒车重回 ASP 时代呢？
htmx 是一款基于 ASP 思想的前端框架，也可以理解成增强型的 HTML。它允许开发者通过增强 HTML 的特写属性来实现页面的实时交互和动态更新，而不是编写大量的 JavaScript 代码，所以因其小巧的文件体积和能够与现有的服务端框架无缝集成而受到赞誉。Htmx 的实现原理是通过 AJAX、HTML5 和 WebSocket 等技术，将前端和后端的交互方式从传统的请求 - 响应模式转变为增量更新模式。更多具体的介绍可以参考文章 htmx - 使 HTML 更强大 - 知乎，p/653008546
如今，React、Vue 等前端主流框架使用的都是单页面应用（SPA），目前也是创建 Web 应用程序的主流方式，前后端采用 JSON 数据进行交互。
而 Htmx 则是由服务端处理页面交互和响应，例如 UI 事件会被发送至服务端进行处理，并生成 html 本体返回客户端。
但是笔者认为 Htmx 虽然有它的优点所在，但是在生产环境的使用上还是存在非常大的局限性：
由于需要向 HTML 代码中添加非常多的 “增强属性”，HTML 会变得非常臃肿，可读性和可维护性会变得非常差，不适用于大型项目的开发。
目前 React、Vue 等 SSR 直出渲染已经能够具有非常好的首屏性能了，笔者认为服务端只需要做好首屏渲染就好了，所有渲染逻辑统一收归服务端渲染后返回 HTML 片段会造成更大的服务器压力。
总而言之，Htmx 的意外走红并不是 Web 应用开发模式开倒车的征兆，是各自适应场景不同，适合简单的页面，或者前端经验缺乏的人使用。
除了上述框架以外，2023 年还有号称历史上第一个 O (1) 的前端 SSR 框架的 Qwik 正式发布 1.0 版本。Qwik 虽然是今年才正式发布 1.0 版本，但是它已经凭借其惊艳的性能数据，斩获 2022 年 JavaScript 明星项目的前端框架排行榜第二名，当时仅次于 React。
为了保证页面首屏可见的性能，对于动态页面一般会采用 SSR 的方式来优化首屏可见耗时。目前主流的支持 SSR 的框架，例如 react、vue 等，从用户请求到页面可交互需要经历以下四个阶段：
服务端渲染时将所有必需的信息序列化成 HTML 模板，包括 WHAT（事件处理函数内容）、WHERE（哪些节点需要哪些事件处理函数）、APP_STATE（应用状态）和 FRAMEWORK_STATE（框架状态）。
依赖于事件冒泡来拦截所有事件进行全局处理，无需在特定 DOM 元素上单独绑定事件。
点击函数会触发视图更新，并动态加载渲染函数并执行，从而完成了恢复性渲染。
简而言之，Qwik 将 HTML 中序列化所有必需的信息，以及使用全局事件处理程序来拦截和处理事件，而不必显式将事件处理程序附加到特定的 DOM 元素上，这样可以避免的水合过程，并采用更加极致的懒加载策略和可恢复性操作，从而做到” 直出即可用 “的状态。
当然，任何框架的优势和劣势都不是绝对的。首先，Qwik 由于需要在服务端渲染时进行信息序列化操作，因此会给服务器带来更大的压力。其次，qwik 在触发用户行为时再惰性加载并执行响应的 JS 脚本，这样需要在用户触发交互时动态生成对应的事件处理函数进行执行，造成一定的交互响应上的延时。
从 Github 2023 年度报告显示，Rust 增长率位于所有语言榜首，其年增长率到达 40%，并连续第八年被 2023 年 Stack Overflow 开发者调查评为最受赞赏的语言。
从 StackOverFlow 2023 年度开发者报告也显示，超过 80% 的开发人员希望在明年继续使用它。
由此可见，在 2023 年之间 Rust 受到了广大开发者的青睐，虽然整体使用率相较于其他语言较低，但是其增长势头非常迅猛，值得我们持续关注。
回顾 2023 年前端基建相关的开源工具来看，这个预言仿佛在一步步接近现实，在前端基础建设领域不断出现 Rust 的身影
Rust 因为其出色的性能，在编译、打包构建等前端基建的方向所带来的性能数据提升令人震撼。在 JavaScript 性能提升挖掘缓慢的今天，不少前端基础建设框架 / 库的开发者为追求更高的性能开始逐渐将目光转向了 Rust。由此可以预测，Rust 工具将会更加深度地融入前端生态，说不定会掀起新一轮的前端基础建设浪潮，让我们拭目以待。
在前端基础建设方面，已经连续两年登顶 JavaScript 明星项目的 Bun 于今年 9 月 8 日正式发布 1.0 版本。Bun 不仅是一个专注性能与开发者体验的全新 JavaScript 运行时，还是一个转译器、构建工具、包管理器以及测试库的全能工具包，旨在无感替代现有的 JavaScript 运行时（Node.js 和 Deno），并成为浏览器外执行 JS 的主流环境，为用户带来性能和复杂性的提升的同时，以更好更简单的工具提高开发者的效率。
Bun 比 Node.js 和 Deno 更快，尤其是在启动时间和运行时性能方面。Bun 的写入速度比 Node.js 和 Deno 快三倍，在读取文件的速度也快将近三倍。此外，Bun 的处理并发链接的速度也明显优于 Node.js 和 Deno。有关三者更多的性能方面的比较数据请参考官方 Github 仓库中的介绍，此处不再赘述。oven-sh/bun
之所以 Bun 在性能上会有如此优异的表现，主要是因为作者在实现上对方方面面进行了精细的优化，特别值得提及的两个优化点是：一是 Bun 使用性能更好的 Zig 和 C++ 实现了 Node 中使用 JavaScript 编写的重要内置库，而且 Zip 支持进行低级内存控制和消除隐藏控制流，性能优化更好。二是 Bun 与使用基于 V8 引擎编写的 Node 和 Deno 不同，它使用的是 J必博首页avaScriptCore 引擎，该引擎在性能上优于 V8 引擎。
随着 JavaScript 不断发展，各种工具被逐渐添加进来，JavaScript 的工具链变得越来越庞大与复杂，但是目前前端并没有统一的工具包，使用时需要开发者手动添加各种工具以满足开发编译需要。而 Bun 设计初衷除了性能优化外，还希望作为一个全能的工具包的形式，消除 JavaScript 工具链的复杂性，为前端开发者提供一个开箱即用的开发体验。
早在前两年，Chrome 已经计划全面弃用第三方 Cookie 了，但是如果直接弃用很可能会导致大量网站功能无法正常使用。而在今年 Chrome 更新的 113 和 114 版本中，Chrome 稳定推出了 Cookie 第一方集和 Cookie 独立分区两项功能，并随即在今年 10 月 11 日于 Chrome 的官方博客上宣布计划从 2024 年第一季度开始对 1% 的用户禁用第三方 Cookie，并在第三季度将禁用范围扩大至 100%。接下来笔者将对此进行解读一下。
首先 Cookie 是一种浏览器保存在用户电脑的持久化数据，通常用于帮助网站记住用户相关的信息。所谓的第三方 Cookie 是指用户当前访问的网站域名之外的其他域名下通过 Cookie 的形式所存储的内容数据，简而言之，与当前访问的网站非同源的 Cookie。这个也在我们的生活中非常的常见。例如，第三方 Cookie 允许记录用户在不同网站上的行为，以便于提供个性化广告和内容，利用第三方 Cookie 支持跨网站追踪的能力，让广告商能够根据用户的喜欢和习惯推送更加符合其口味的广告。
但是由于第三方 Cookie 所记录的信息允许被携带其他网站，因此这样无形之中就有用户隐私被泄露的风险。这种担忧不仅来自用户，也来自于法规如如欧盟的通用数据保护条例（GDPR）和加州消费者隐私法案（CCPA）。因此目前 Safari、Mozilla 等其实已经推行禁用第三方 Cookie 的措施了，而如今迫于隐私泄露的压力，第三方 Cookie 不得不逐步退出历史舞台。
首先 Chrome 114 版本提供 Cookie 独立分区（CHIPS）的能力，它允许开发者将 Cookie 按照分区进行存储，每一个顶级域名都有独立的 Cookie 存储分区，因此顶级域的页面可以访问其通过 iframe 嵌入的网站所存储到独立分区中的 Cookie，而不同顶级域之间的 Cookie 存储分区并不互通。
再者 Chrome 提供 Cookie 第一方集（First-Party Sets）用于解决自定义 Cookie 集合的问题。通常而言，许多公司或者组织都会使用多个域名，虽然它们的域名不同源，但是按道理来讲都是属于第一方的，此时开发者可以将需要共享 Cookie 的不同域名放到一个集合中提交给 Chrome 进行审核，审核通过后便可以通过 Chrome 提供的特殊方式读取这些域名下共享的 Cookie。
Manifest V2 是 Chrome 早期制定的、用于开发浏览器扩展的一套技术标准，多年来已经成为行业标准。但随着人们对数据、隐私安全的重视，其允许扩展修改用户请求、权限模型较为简单、CSP 实现较为宽松等安全隐患也逐渐暴露出来。
Manifest V3 标准在 2018 年发布以来，相较于 V2 版本主要做了如下优化：
Manifest V3 引入了一种新的权限模型，它允许用户在安装扩展时选择授予扩展哪些权限，从而提高了用户的隐私和安全性。
Manifest V3 禁止扩展执行远程代码，所有的代码都必须包含在扩展的包中。这可以防止扩展被用来执行恶意代码。
长期以来，Chrome 为兼容历史扩展，一直保持两套标准并存。然而在 2023 年，Chrome 终于宣布将于 24 年 6 月份全面禁用 V2 扩展，这将大大提高 Chrome 数据和隐私的安全性。
2023 年低代码仍然是前端领域非常火热的线 低代码厂商全景报告》显示，2023 年中国低代码市场规模为 50.2 亿元人民币，年增速为 39.9%，行业发展迅猛，同时低代码开始向更深入、更垂直的场景和应用渗透，要求低代码技术的发展趋势倾向于满足行业的需求。因此基于低代码引擎底座至上实现垂类定制的低代码解决方案逐渐成为了社区的基本共识。继 2022 年阿里开源了 lowcode-engine 后，网易和华为在今年也分别相继开源了 Tango 低代码引擎和 TinyEngine 低代码引擎，进一步丰富了低代码的社区生态。在技术实现上，前者基于源代码驱动实现，后者在低代码底层能力上集成了人工智能，接下来让我们一起看看它们有哪些亮点与不足吧。
服务热线 010-67952968 