2023 年前端大事记

avatar
fe @字节跳动（大量HC 欢迎来撩）

大家好，我是 ConardLi，一年一度的年更系列又来了，每到年末我会对前端生态在这一年的重大变化做一次总结，之前的总结：

下面我们一起来看看 2023 年前端发生了哪些值得关注的事情吧：

[1-25] 新的 JavaScript 事件：scrollend

在网页开发过程中，我们可以通过 onscroll 事件来监听浏览器是否发生了滚动，但很难知道滚动何时完成。以前，我们可能会使用 setTimeout 来预估滚动可能在一定时间后完成，但这可能导致回调函数在滚动过程中或滚动结束一段时间后触发，用户体验不佳。

addEventListener("scrollend", (event) => {
  // 滚动结束
});

aScrollingElement.addEventListener("scrollend", (event) => {
  // 滚动结束
});

有了 scrollend 事件后，这个问题就简单多了。scrollend 事件会在以下情况触发：浏览器动画结束或滚动完成、用户的触摸被释放、用户的鼠标释放了滚动键、用户的按键被释放、滚动到片段完成、滚动捕捉完成、scrollTo() 完成、用户滚动了可视视口。但在用户的手势没有导致任何滚动位置变化或 scrollTo() 没有产生任何位置变化的情况下，scrollend 事件不会触发。

了解更多：一个全新的 JavaScript 事件！

[1-26] TypeScript 5.0 - 支持全新的装饰器写法

装饰器模式是一种经典的设计模式，它可以在不修改被装饰者（如某个函数、某个类等）源码的前提下，为被装饰者增加 / 移除某些功能（收集用户定义的类/函数的信息，例如用于生成路由表，实现依赖注入等等、也可以对用户定义的类/函数进行增强，增加额外功能）。一些现代编程语言在语法层面都提供了对装饰器模式的支持，并且各语言中的现代框架都大量应用了装饰器。

在之前，我们想要在 TypeScript 中使用装饰器，需要在 tsconfig 中添加 --experimentalDecorators 标志，这其实就是 TypeScript 对最原始的处于 stage1 阶段的装饰器提案的支持，而在今年发布的 TypeScript 5.0 中，对全新的处于 stage3 阶段的装饰器提案提供支持。

class InstanceCollector {
  instances = new Set();
  install = (value, { kind }) => {
    if (kind === 'class') {
      const _this = this;
      return function (...args) {
        const inst = new value(...args); // (B)
        _this.instances.add(inst);
        return inst;
      };
    }
  };
}

const collector = new InstanceCollector();

@collector.install
class MyClass {}

const inst1 = new MyClass();
const inst2 = new MyClass();
const inst3 = new MyClass();

assert.deepEqual(
  collector.instances, new Set([inst1, inst2, inst3])
);

了解更多：TypeScript 5.0 将支持全新的装饰器写法！

[2-16] Signal 的概念在前端爆火

QWik、Angular 框架的作者 Hevery 发表了一篇文章：《useSignal() is the Future of Web Frameworks》，将 Signal 的概念带到了前端开发的世界。

实际上 Signal 在开发领域并不是一个新的概念，它也是前端框架的一种状态管理方式，类似于 React 中的 useState() ，一些知名的前端框架如 Vue、Preact、Solid 和 Qwik 都对它有提供支持。

了解更多：www.builder.io/blog/usesig…

[3-7] View Transitions API 发布

在 Web 上实现平滑的过渡效果是一个非常复杂的任务，我们往往会借助一些三方的动画库去实现，这些库的兼容性和性能往往是比较困扰我们的事情。

新的 View Transitions API 在 Chrome 111 版本中被支持，可以通过快照视图的能力和允许 DOM 在状态之间没有任何重叠的情况下进行渲染来简化这种过渡的实现，比如通过下面这样简单的代码就可以实现一个淡入淡出的效果：

function spaNavigate(data) {
  // 判断浏览器是否兼容
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // 使用 transition
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

调用 .startViewTransition() 时 ，API 会捕获页面的当前状态。执行完成后，它会将 callback 调用传递给 .startViewTransition()。这时就会更改 DOM ，然后 API 会捕获页面的新状态。

了解更多：developer.mozilla.org/en-US/docs/…

[3-10] Rspack 正式发布

Rspack 是由 ByteDance Web Infra 团队孵化的基于 Rust 语言开发的 Web 构建工具，拥有高性能、兼容 Webpack 生态、定制性强等多种优点，解决了我们在业务场景中遇到的非常多的问题，让很多开发者的体验有了质的提升。

经过官方开发者的验证， Rspack 可以给项目带来 5 ～ 10 倍的编译效率提升，并且随着工具内置了越来越多的常见 features，性能也在逐步的提升中。

了解更多：节跳动自研 Web 构建工具 Rspack 正式发布

[3-16] React 推出全新文档

React 推出全新文档 react.dev，教程中使用函数组件和 Hooks 替代了老久的类组件案例。并且提供了丰富的图表、插图、挑战以及 600 多个新的交互式示例。

之前旧的 React 文档站点现已移至 legacy.reactjs.org。

了解更多：react.dev

[3-28] Import Maps 获得跨浏览器支持！

在我们常见的模块化系统中，模块导入语句通过 Node.js 运行时或相关构建工具映射到特定（版本）的文件。用户只需要在 import 语句中直接编写模块说明符（通常是包名），模块就可以自动处理。由于我们已经熟悉了这种从 npm 导入包的方式，因此必须要先经过一个的构建步骤才能确保以这种方式编写的代码可以在浏览器中运行。

Import maps 就可以解决这个问题，它可以将模块说明符（包名）自动映射到它的相对或绝对路径。从而让我们不使用构建工具也能使用简洁的模块导入语法。我们可以通过 HTML 中的 <script type="importmap"> 标签来指定一个 Import maps。

随着 Safari 16.4 的发布，WebKit 引擎也支持了 Import Mpas ，至此， Import Mpas 已经获得了全部三大浏览器引擎（Blink、Gecko、WebKit）的支持。

<script type="importmap">
{
  "imports": {
    "dayjs": "https://cdn.skypack.dev/dayjs@1.10.7",
  }
}
</script>

了解更多：Import Mpas 目前已获得跨浏览器支持！

[4-4] CSS 支持嵌套语法

CSS 嵌套语法，基本上是大多数人最新换的 CSS 预处理框架（比如 Less、PostCSS）提供的能力之一了。

在以前，我们在原生的 CSS 中每个选择器都需要明确地声明，互相独立。这样会导致编写很多重复的样式，可读性以及编写体验都很差，CSS 的原生嵌套语法在 Chrome 112 版本中正式支持了，支持嵌套的样式规则允许我们将规则嵌套在父选择器中，而不需要重复写父选择器，这样就可以极大简化 CSS 的编写，让代码更具有可读性：

nav {
  background-color: red;
  ul {
    margin: 0;
    padding: 0;
    li {
      list-style: none;
      display: inline-block;
    }
  }
}

了解更多：Chrome 112 版本发布！

[4-4] document.domain 正式禁用

document.domain 在 Chrome 112 版本正式变为只读属性，如果你的业务里有通过更改 document.domain 来进行跨域的场景目前应该不起作用了，建议大家及时用 postMessage 或其他方案替代。

了解更多：Chrome 又搞事情，这种跨域方案要被禁用了！

[4-18] Node.js 20 发布

Node.js 20 算得上是一个相当大的版本了，其中带来了非常多的新特性：

  • 新的权限模型：提供了 Node.js 中敏感 API 的权限管控能力

  • ESM Loader：可以在一个与主线程隔离的专用线程上自定义 ESM Loader

  • import.meta.resolve：可以将特定上下文的元数据共享给 JavaScript 模块

  • url.parse()：可以识别端口号不是数字的 URL，比如 https://conardli.top:abc（ULR 的端口号一定是数字，这里其实是修了个 Bug）

  • url.parse()：一个新的 URL 验证方法，在我这篇文章中有介绍过了：Node.js 支持原生 URL 验证方法，Node.js 14 即将停止维护！

  • test_runner：Node.js 提供了原生单元测试工具，已经稳定可用

  • V8引擎更新到 11.3 版本：支持了下面的方法：

    • String.prototype.isWellFormed：检测字符串格式是否正确
    • reverse、toReversed 等非破坏性数组方法，在我之前的文章中有详细介绍过：ECMAScript 2023 有哪些新东西？
    • ArrayBuffer、SharedArrayBuffer 可以调整容量大小

了解更多：Node.js 20 为啥要搞个权限模型？到底有啥用？

[4-26] Chrome 正式发布 WebGPU

经过多年的开发，Chrome 团队发布了 WebGPU ，允许在 Web 上进行高性能 3D 图形和数据并行计算。

WebGPU 是一种新的Web图形API，具有显著的优势，例如大大减少相同图形的 JavaScript 工作量，以及机器学习模型推断的三倍以上的改进。WebGPU 公开了现代硬件功能，并允许在 GPU 上进行渲染和计算操作，类似于 Direct3D 12、Metal 和 Vulkan 。与 WebGL 系列API 不同， WebGPU 提供了对更高级 GPU 功能的访问，以及对 GPU 上的通用计算提供优秀的支持。

WebGPU 的初始版本已经在支持 Vulkan 的 ChromeOS 设备、支持 Direct3D 12 的 Windows 设备以及 macOS 的 Chrome 113 中可使用。除了在 Chrome 中出现的初步实现之外，Firefox 和 Safari 也正在开发中以支持 WebGPU 。同时，许多广泛使用的 WebGL 库已经在实施 WebGPU 支持的过程中或已经实现。

了解更多：developer.chrome.com/blog/webgpu…

[5-2] Qwik 1.0 发布

Qwik 是一个全栈 Web 框架，它带来了一种全新的方法来大规模交付即时应用程序，它的主要特性如下：

  • 开箱即用的用户体验：通过 JavaScript 流式传输实现即时加载。
  • 推测性代码获取：在用户需要的时候精确交付所需的代码，以确保即时的用户交互。
  • 惰性执行：Qwik 的可恢复技术尽可能延后在浏览器中执行代码，以保持浏览器的主线程自由并能够响应用户交互。
  • 优化渲染时间：Qwik 是响应式的，默认情况下只更新绝对必要的内容，不会进行多余的更新。
  • 数据获取：从服务器开始获取数据，避免瀑布式延迟。

了解更多：www.builder.io/blog/qwik-v…

[5-10] Google I/O 2023

今年 5 月份，Google 在一年一度的开发者大会中带来了诸多更新：

  1. 重新思考 Web 兼容性问题：主流浏览器（Chrome、Edge、Firefox 和 Safari）合作推出了一个名为 Web 基线的概念，将所有向前和向后兼容的核心功能集囊括其中。

  2. Web 平台的最新动态：谷歌介绍了 Web 平台最近新推出的，并且已经支持两个最新浏览器版本的功能。

  3. 提升 Web 核心性能指标的建议：Chrome 团队花费一年的时间确定了每个核心 Web 指标（LCP、CLS、FID）的三项最佳建议。

  4. 使用 DevTools 调试现代 Web 应用：Chrome DevTools 最近改进了使用框架开发的现代 Web 应用的代码调试能力。

  5. 准备好迎接三方 Cookie 的终结：为了保护用户隐私，Chrome 将在不久的未来停止支持第三方 Cookies。

  6. Web UI（CSS）的最新特性：过去几个月谷歌迎来了 Web UI 的黄金时代，大量新的 Web 功能随着浏览器的功能广泛落地。

  7. 高级 Web API 的真实应用：Google 启动了一个名为 Fugu 的项目，目标就是让开发者能够在 Web 生态中做任何事情。

  8. WebGPU 推进 AI 技术在浏览器中的应用：新推出的 WebGPU API 释放了 GPU 硬件的力量，让 Web 真正为 AI 做好准备。

  9. WebAssembly 让 Android 应用在 Web 上运行成为可能：介绍了WebAssembly GC 这项新技术，可以支持现代编程语言直接在 Web 上运行。

  10. Passkeys 可能淘汰传统的 Web 密码登陆方式：我们终于做好弃用传统的密码登陆方式的准备，Passkeys 可让用户在所有主要平台上轻松获得更简单、流畅、安全的登录体验。

感兴趣可以看看我对今年一些重点的方向进行了详细的解读：

[5-30] Cookie CHIPS 进入稳定版本

具有独立分区状态的 Cookie (CHIPS) ，它允许开发者将 Cookie 选择到“分区”存储中，每个顶级站点都有单独的 Cookie jar。

Chrome 官方是这样描述它的：CHIPS 是帮助服务顺利过渡到没有第三方 Cookie 的未来的重要一步。

CHIPS 引入了一个新的 Cookie 属性：Partitioned ，它可以让顶级上下文分决定哪些 Cookie 进行分区。

了解更多：Cookie 的访问方式可能要有大变化了！

[6-6] WWDC 2023

即 Google I/O 2023 之后，又迎来了 Apple 举办的当世最令人瞩目的另一大科技大会：WDC2023。这两场大会无疑都会为大家带来近一年内最热门最前沿的技术，而作为 Web 开发者我们也应该紧跟时代的潮流，及时了解技术的进步，从这些大会上我们也能学习到很多有用的内容。

其中前端需要关注的重点内容包括:

  1. Vision Pro 的 Web：Vision Pro 中的 Safari 具有和 WebKit 相同的引擎，对 Web 标准提供了广泛的支持。

  2. Model 元素的引入：提供一种无需任何脚本即可在网页中轻松渲染 3D 内容的方法。

  3. WebXR 的发展：WebXR 提供了在 Web 上创建完全沉浸式体验的技术。

  4. popover 属性的支持：提供了一个用于显示叠加层、弹出窗口、和对话框的框架。

  5. select 元素对 <hr> 的支持：在不需要使用 JavaScript 的情况下创建下拉框元素之间的视觉分隔符变得更加容易。

  6. CSS counter-style 的支持：提供了一种机制来更改 CSS 中计数器的语言或字符集。

  7. font-size-adjust 的能力得增强，引入了 from-font 值和双值语法。

  8. Offscreen Canvas 的引入: 提供了让 <canvas> 元素不再完全依赖于 DOM 的离屏渲染的画布。

  9. Set 对象新增方法：intersection(), union(), difference(), isSubsetOf() 和 isSuperSetOf()。

  10. Gamepad API 的增强：增加了对 Gamepad.prototype.vibrationActuator 的支持，可以在游戏手柄上启用“双隆隆声”触觉反馈。

  11. URL API 的改进：新增 URL.canParse()方法用于检测 URL 是否合法，返回 true 或 false。

  12. 支持 JPEG XL 图像格式：新的图像格式提供了另一种更现代的选择，在图片质量和文件大小之间找到了更适当的平衡。

  13. HEIC 图像的支持：使用 HEVC 视频编解码器压缩算法，是 iPhone 和 iPad 上用于存储用相机拍摄的照片的文件格式。 HEIC 也是在应用程序中使用 WKWebView 时显示图像的理想选择。

了解更多：WWDC2023 — Web 开发者划重点

[6-10] Stack Overflow 2023 年度开发者报告

Stack Overflow 发布了 2023 年度的开发者报告，这份报告基于 2023 年 5 月 8 日至 2023 年 5 月 19 日对来自全球 185 个国家的 89,184 名软件开发者的调查，是大家公认最具权威性的开发者报告之一。

本次报告提到的一些重点内容：

  1. 最流行的技术: JavaScript 连续 11 年成为最常用编程语言，Python 已经取代 SQL 成为第三大最常用语言，Lua 这一嵌入式脚本语言自 2022 年以来排名上升 7 位。

  2. 数据库：PostgreSQL 今年取代 MySQL 成为最受欢迎的数据库，而 MongoDB 则被专业开发人员和学习者广泛使用。

  3. 云服务平台：AWS 仍被所有受访者最常用，使用量几乎是第二位的 Azure 的两倍。

  4. Web 框架和技术：Node.js 和 React.js 是所有受访者最常用的两种 Web 技术。

  5. AI 工具：今年的报告首次增加了 AI 搜索工具的调查，结果显示 ChatGPT 是受访者一年内使用次数最多的工具。

了解更多：Stack Overflow 2023 年度开发者报告出炉！

[6-24] ECMAScript 2023（ES14）发布

ECMA-262 第 14 版，于 2023 年 6 月发布，主要包括以下几个重要更新：

数组查找方法：新的方法名为 {Array, %TypedArray%}.prototype.findLast 和 {Array, %TypedArray%}.prototype.findLastIndex，它们的行为就类似于 Array.prototype.find 和 Array.prototype.findIndex，但是是从后往前查找的。这样一来，就可以避免不必要的突变和复制，同时也可以减少索引计算的复杂度：

// 使用新的 findLast 和 findLastIndex 实现查找
array.findLast(n => n.value % 2 === 1); // { value: 3 }
array.findLastIndex(n => n.value % 2 === 1); // 2

WeakMap 支持 Symbols key：可以更清晰地表明它的键和映射项的角色关系，而不需要创建一个只用作键的新对象，另外在 ShadowRealms 的使用场景中也有所作用。

Change Array by copy：有些数组的方法我们在调用的时候不会改变原始的数组，我们称它们为非破坏性方法，另外有一些方法是会改变原数组本身的，比如：sort、reverse、splice 等方法，而本次更新的就是带来对应这三个方法的非破坏性方法：Array.toSliced(), Array.toSorted() 和 Array.toReversed()。

了解更多：ECMAScript 2023 有哪些新东西？

[7-13] Fenced Frames 被支持

在很多业务场景中，我们可能会使用 iframe 去嵌入一些智能推荐的广告。

我们的顶级站点可以读取到 iframe 的 src 属性，这就意味着顶级站点可以从广告的 URL 推断有关访问者兴趣的信息，这在一定程度上就泄露了用户隐私。

Fenced frames 是一项隐私沙盒提案（github.com/WICG/fenced… Chrome 115 版本中，它得到了支持。

了解更多：

[7-24] groupBy 方法进入 stage3

在日常编程中，我们常常需要对数组的元素进行分类和分组，数组分组是一种极其常见的操作，SQL 的 GROUP BY 语句和 MapReduce 编程就是最好的例子。例如，现在有一组数字，我们可能需要将它们按照奇偶进行分组。为了更方便地完成这类操作，这份提案提出了一种新的方法来简化数组中的分组操作。

Object.groupBy(array, (num, index) => {
  return num % 2 === 0 ? 'even': 'odd';
});

Map.groupBy(array, (num, index) => {
  return num % 2 === 0 ? even: odd;
});

在这个提案中，提供了两个新的方法：Object.groupBy 和 Map.groupBy。前者返回一个无原型的对象，这可以使解构更为方便，并且可以防止与全局 Object 属性冲突。后者返回一个常规的 Map 实例，它允许对复杂键类型进行分组。

了解更多：两个新的 JavaScript 提案

[8-15] 网页画中画 API

Chrome 116 版本中比较值得关注的新增功能就是网页的画中画 API 了（Document Picture in Picture API ）。

它可以打开一个始终位于当前网页顶部的窗口，这个窗口可以填充任意的 HTML 内容。它扩展了现有的 Picture-in-Picture API for <video> （其只允许将 <video> 元素放入画中画窗口中）。

这个 API 还是有挺多实用场景的，首先我们还是可以用它来实现自定义视频播放器，虽然现有的 Picture-in-Picture API for <video> 也可以实现，但是效果非常有限（参数少，样式设置灵活）。现在通过新的画中画 API，网站可以提供一些自定义组件和参数（例如字幕、播放列表、时间控制、喜欢和不喜欢的视频），来改善用户的画中画视频体验。另外我们还可以用它来实现一个体验非常好的网页视频会议功能等等。

了解更多：Chrome 116：网页画中画 API 来了！

[8-16] 网站启用跨域隔离更简单了

COOP（Cross Origin Opener Policy：跨源程序打开策略）可以帮助我们的网站创建一个安全的隔离环境，从而避免一些 Web 安全风险。它主要可以防止两类攻击，第一类是跨站点数据泄漏（又名 XS-Leaks ），还有一类就是臭名昭著的 Spectre（幽灵漏洞）。

本次支持的新的 "restrict-properties" 属性可以在禁用 Opener 信息共享的同时，通过 postMessage 或 closed 进行通信，这实际上提供了一种可信的信息共享方式，同时禁用了有风险的方式。

了解更多：浏览器策略更新：网站启用跨域隔离更简单了！

[8-16] 网站 HTTPS-First 模式开始实验

HTTP 协议在网络上传输的是明文，容易被劫持或篡改，而 HTTPS 协议可以保证请求数据的加密传输，当下，大部分网站都已将 HTTP 协议转为 HTTPS，超过 90% 的用户已经开始使用 HTTPS 协议浏览网站。

Chrome 会自动将所有 http:// 协议的访问默认升级为 https://，即使我们明确使用了 http:// 协议去访问网站。

它比 HSTS 更友好一点，Chrome 会检测这些默认的升级是不是会失败（例如，由于网站提供了无效的证书或返回 HTTP 404），然后自动回退到 http://。这个更改可以确保 Chrome 仅在 HTTPS 确实不可用时才使用不安全的 HTTP，而不是因为我们点击了过时的不安全链接。从 Chrome 115 版本开始启动这一实验，并且努力标准化整个网络的行为，可能很快就会对所有网站默认开启了。

了解更多：这次可能真要和 HTTP 说再见了

[8-24] TypeScript 5.2 支持显式资源管理

TypeScript 5.2 版本中带来了一个全新的关键字 using ，同时它也是一项进入 Stage 3 阶段的 TC39 提案。官方对它的定义为 Explicit Resource Management ，即显式资源管理。

export function doSomeWork() {
    using file = new TempFile(".conardli_temp_file");

    // 文件操作...

    if (someCondition()) {
        // 关闭并删除...
        return;
    }
}

当你在编程中创建一个对象之后，你通常需要进行某种“清理”的动作，如关闭长链接、删除临时文件、释放内存等，这就需要使用到这个新的 “using” 关键字。许多现有类型，如 File Handler、长连接等，都可以使用 Symbol.dispose 和 Symbol.asyncDispose 来进行清理操作，这让现有的一些类型变得更容易使用。

了解更多：TypeScript 引入新的关键字 “using” ！

[8-29] 浏览器支持 scheduler.yield

下次绘制交互 (INP) 是一项新的指标，浏览器计划于 2024 年 3 月将其取代取代首次输入延迟 (FID) ，成为最新的 Web Core Vitals。Chrome 使用数据显示，用户在页面上花费的时间有 90% 是在网页加载完成后花费的，因此，仔细测量整个页面生命周期的响应能力是非常重要的，这就是 INP 指标评估的内容。

使用 scheduler.yield 可以提高对页面上用户输入的响应速度，通过将一个较长的任务分解成多个较小的任务，使得用户交互可以更快地运行，从而提高输入响应速度和 INP。这相当于让浏览器拥有了原生的 “时间切片能力”。

了解更多：浏览器也拥有了原生的 “时间切片” 能力！

[9-2] htmx 发布

HTMX 提供了直接在 HTML 中访问 AJAX、CSS过渡、WebSockets 和服务器发送的事件的能力，只需使用属性即可，让你可以借助超文本的简洁性和强大性构建现代用户界面。HTMX 文件体积小(~14k)，无依赖性，可扩展，支持 IE11，并且与 React 相比，可以减小代码库体积的 67%。

HTMX 尝试挑战和改变一些先前的约束，例如为什么只有 <a> 和 <form> 能发起 HTTP 请求，为什么只有点击和提交事件可以触发它们，为什么只有 GET 和 POST 方法可用，为什么只能替换整个屏幕等等。HTMX 通过移除这些随意的约束，使 HTML 完全化为了超文本。

了解更多：htmx.org/

[9-5] 新一代 Web 预渲染技术 Speculation Rules API

预渲染就是在我们还没有访问页面时提前对页面进行渲染，这样当我们真正访问页面时就不需要再花费额外的时间去渲染页面了，尤其注重最大内容渲染（LCP）的性能指标，这是一个衡量网页当前视口中可见的最大元素的渲染时间的指标。

Chrome 提出的新一代预渲染技术将通过以下三种方式提供：当你在 Chrome 地址栏中输入 URL 或一个关键词时，如果 Chrome 推测你会访问某个页面，它可能会自动为你预渲染这个页面。另外，通过在网页中添加特定 JSON ，可以触发浏览器对指定页面的数据预取或预渲染。

Chrome 团队正在尝试将这种预渲染技术广泛应用于 Web 开发中。例如，借助 Speculation Rules API，开发者可以更具灵活性地使用浏览器的预渲染能力，并根据实际情况动态添加预渲染规则。同时，浏览器对于预渲染的页面数量做了限制，一个页面最多预渲染 10 个子页面。

了解更多：新一代 Web 预渲染技术

[9-8] Bun 1.0 正式发布

自去年夏天发布第一个 Beta 版本以来，Bun 的流行程度不断增长，仅在一个月内，就在 GitHub 上获得了超过两万颗 Star。

Bun 不只是一个运行时，它也是一个包管理器、构建工具和测试运行器。通过读取 package.json 来安装依赖项，对许多 Node.js APIs 有支持，重点是性能，对比 Node.js 和 Deno 提升都非常大，如今，Bun 1.0 终于正式发布了。

了解更多：

[9-12] unload 事件被弃用

从 Chrome 117 开始，unload 事件将开始逐步弃用。这个事件通常在 HTML 文档即将被卸载时被调用，理论上，它可以在用户离开页面时运行一些代码，如保存用户数据、执行清理任务或在离开页面时发送分析数据等。

然而，这个事件在很多浏览器中并不稳定且可靠性差，会影响到网站性能，在一些浏览器中它是先于 bfcache（浏览器的前进后退缓存操作）运行的，这将阻止正常的 bfcache 进行，这是一个历史遗留问题，Safari 也早就对它进行了弃用。

推荐两个替代方案，第一个是 visibilitychange 事件，当用户切换选项卡、最小化浏览器窗口或打开新页面时，都会触发这个事件。第二个是 pagehide 事件，该事件在用户点击跳转其他链接、前进或后退按钮，或关闭浏览器选项卡时触发，能够确定用户何时离开页面，并且不会破坏 bfcache。

了解更多：注意，这个 JavaScript 事件即将弃用！

[9-14] Vercel 推出 v0

v0 是 Vercel 推出的基于 AI 的生成用户界面系统，它可以生成基于 shadc/ui 和 Tailwind CSS 的易于复制粘贴的 React 代码，供人们在他们的项目中使用。

v0 以简单的文本提示为基础，使用 AI 模型生成代码。提交提示后，v0 会为您提供三种 AI 生成的用户界面供你选择。你可以选择其中一个，复制粘贴其代码，或进一步微调。

了解更多：v0.dev/

[9-15] Remix 2.0 发布

全栈 Web 框架 Remix 发布了 2.0 版本。这个版本在 Remix 团队发布 1.0 版本后经过近两年的不断努力，推出了 19 个小版本，发行了 100 多个修补程序版本，并解决了成千上万的问题和拉取请求之后迎来的。

了解更多：remix.run/blog/remix-…

[9-20] Svelte 宣布 "runes"

Svelte 宣布了一项新特性 "runes"，这个特性将在 Svelte5 中大幅改变开发者的体验。Rune 是一种可以影响 Svelte 编译器的符号，Svelt5 中的 runes 使用函数语法实现，达到和现有的声明式语法等效的效果，如 $state 用于声明响应式状态。Rune 的引入，可以让你的 .svelte 文件之外的其他文件也拥有响应式能力。相较于现有的 store API，rune 可以更简单地处理更复杂的事物。

有些用户感觉这个变化使 Svelte 看起来更像 React，但是这正是他们试图摆脱的开发者体验。但另一方面，很多人也对这项更新表示支持，将它们视为框架在正确方向上发展的必要步骤。

了解更多：svelte.dev/blog/runes

[9-25] iOS 17 ：Webkit 带来的更新

iOS 17 是今年苹果公司发布的一个新的大版本，作为 Web 开发者最值得关注的还是 Webkit 的能力更新：

HTML 的更新:

  • 新的 <search> 标签，可以为网站的搜索部分提供正确的无障碍语义;
  • 新的 Popover 属性，提供可以用来实现弹出窗口和对话框的原生内置能力;

CSS 的更新:

  • Font size adjust，是一种用于在网页上调整字体大小的特性，通常使不同字体的视觉大小保持一致;
  • Counter-style，CSS Counter Styles 提供了一种在 CSS 中更改计数器语言或字符集的机制，既适用于有序/无序列表，也适用于 CSS 计数器;
  • Image-set，勇于让浏览器从一组图像中选择最合适的图像来使用。

JavaScript 的更新:

  • Storage API，为网站提供了一种标准方法来获取有关当前存储策略的信息;
  • Canvas 离屏渲染，提供了可以离屏渲染的 Canvas，解耦了 DOM 和 Canvas API，使 <canvas> 元素不再完全依赖于 DOM;
  • Set 新增了 7 个实用的方法，包括交集(intersection)、并集(union)、差集(difference)、对称差集(symmetricDifference)、子集(isSubsetOf)、超集(isSupersetOf)和没有共同元素(isDisjointFrom);
  • URL API，可以直接检测 URL 输入是否可以解析。

了解更多：iOS 17 ：Webkit 更新了哪些新功能？

[10-11] CSS 支持 @scope 规则

@scope at-rule 允许我们将样式规则限定到给定的范围内，并根据这个范围的邻近程度设置样式元素。

在没有 @scope 的情况下，应用的规则是最后声明的样式。使用 @scope，可以书写嵌套的样式，并且我们可以根据邻近度来进行样式覆盖：

并且，@scope 还可以让我们免于编写又长又复杂的类名，并且可以轻松管理较大的项目并避免命名冲突。

@scope(.first-box){
  .main-content {
   color: grey;
  }
}
@scope(.second-box){
  .main-content {
   color: mediumturquoise;
  }
}

了解更多：Chrome 118：CSS @scope 规则 来了！

[10-13] Rspress 1.0 正式发布

Rspress 是由 ByteDance Web Infra 团队孵化的一款静态站点生成器，使用 Rspack 进行构建，基于 React 框架进行渲染，支持 MDX 内容开发，主打高性能、简单易用和定制性强。

Rspress 中内置了一套默认的文档主题，你可以通过 Rspress 来快速搭建一个文档站点，同时也可以自定义主题，来满足你的个性化静态站需求，比如博客站、产品主页等。

了解更多：Rspress 1.0 正式发布，基于 Rspack 的高性能静态站点生成器

[10-14] Chrome 正式宣布三方 Cookie 禁用时间线

三方 Cookie 为 Web 提供了跨站点跟踪的能力，它的存在为 Web 用户的个人隐私带来了巨大威胁。

Chrome 正式宣布了三方 Cookie 禁用时间线，计划从 2024 年第一季度开始对 1% 的用户禁用第三方 Cookie，以方便大家测试。

然后从 2024 年第三季度开始将禁用范围扩大到 100%。如果你的网站还在使用第三方 Cookie，现在就该采取行动了。

了解更多：留给三方 Cookie 的时间，不多了...

[10-23] Yarn 4.0 发布

Yarn 团队经过一年多的努力，中间经过了 53 个候选版本，终于发布了 Yarn 4.x 的稳定发行版本吗，带来如下重要更新：

  • Corepack 的引入：使用 Corepack 可以自动选择正确的包管理器版本，这个工具随 Node.js 16+ 一起提供。
  • Hardened Mode：这是一种新模式，可以保护用户免受一些常见的攻击。在此模式下，Yarn 将额外验证 lock 文件是否正确并和远程注册表的 metadata 一致。这个模式默认被启用，但是可以通过在 yarnrc 文件中显式关闭。
  • 新的约束引擎：Yarn 引入了基于 JavaScript 的约束引擎，使用此引擎可以定义一些规则来限制工作区之间依赖项的版本关系。
  • 优化了命令行界面：改进了一些部分的 CLI 界面，例如，yarn install 现在会告诉我们添加了哪些新的软件包，以及它们的总质量，yarn config 命令也做了优化。
  • 性能提升：4.0 版本的安装速度比 3.6 版本要快，特别是新的包元数据缓存明显提高了重复安装的性能。
  • 新的官网：Yarn 的官方网站也进行了全面改版，包括新的指令和配置文档等。

了解更多：Yarn 4.0 正式发布，性能大幅提升！

[10-26] Next.js 14 发布引巨大争议

Next.js 14 发布的一项新功能 Server Actions 在前端社区引起了巨大的争议。

简单来说， Server Actions 可以直接让我们在 JSX 代码中操作 Server 相关的能力。

不少开发者认为，这项更新把前端开发带回了 PHP 时代，写起来太随意了，代码混乱，没有任何层次感，而且也有很大的安全风险。

了解更多：前端好像在开倒车了？

[11-8] Angular 17 发布

Angular 的本次版本更新带来了非常多的变化，可以说是今年更新最大的一个前端框架了。性能也有很大提升，内置控制流循环使运行速度在公共基准测试中提高了高达 90%。混合渲染和客户端渲染的构建速度分别提高了 87% 和 67%，重点的新特性如下：

  • 全新 Logo 和文档。Angular 团队为 Angular 官方文档开发了一个全新的主页：angular.dev。设计了一个全新的结构、提供了全新的指南、改进了内容质量。
  • 引入了新的块模板语法。内置控制流可以在构建时起作用，同时还引入了内置的 for 循环，改善了开发者体验。
  • 新引入的可延迟的视图。可延迟的视图通过前所未有的便捷性，实现了声明性且强大的延迟加载。
  • 改进的混合渲染体验。在 ng new 中加入了提示，使服务端渲染（SSR）和静态站点生成（SSG）更易于使用。
  • 新项目默认使用 Vite 和 esbuild。新引入的构建体验从开发预览阶段正式推出，并默认应用于所有新应用。
  • DevTools 中的依赖注入调试。实现了全新的调试 API，能够插入框架的运行时并检查注入器树。

了解更多：blog.angular.io/introducing…

[11-16] Vite 5.0 发布

Vite 5.0 的目标是清理 API（移除被废弃的功能），简化了几个功能，解决了一些长期存在的问题。比如，它将 'redefine' 操作从正则表达式转变为了更适当的 AST 代替。

Vite 5.0 采用了 Rollup 4，提升了项目构建性能，并为改善开发服务器的性能提供了新的选项，Node.js 版本需要更新至 18+ ，并已废弃 CJS Node 的 API 。

在今年的早些时间，Vite 4.3 发布。此版本显着提高了开发服务器性能。然是仍然还有很大的改进空间。在 ViteConf 上，Evan You 公布了 Vite 在 Rolldown 上的长期计划，Rolldown 是 Rollup 的 Rust 端口，具有兼容的 API。一旦准备好，Vite 打算在 Vite Core 中使用它来承担 Rollup 和 esbuild 的任务。这将意味着构建性能的提升，并大大减少了开发和构建之间的不一致。 Rolldown 目前处于早期阶段。

了解更多：vitejs.dev/blog/announ…

[12-5] Vitest 1.0 正式发布

Vitest 是由 Vite 提供支持的下一代测试框架，支持对 Vue、React、Svelte、Lit 等框架进行组件测试。

了解更多：vitest.dev/guide/

[12-19] 新一代 JS Linter Oxlint 发布

Oxc 是用 Rust 编写的 JavaScript 语言的高性能工具集合。他们的目标是构建 JavaScript 的基本编译器工具：解析器、linter、格式化程序、转译器、压缩器和解析器等等，这次他们发布了一个新的 linter 工具。

Oxlint 是一个由 Rust 编写的新一代 JavaScript linter，旨在帮助开发者捕获错误或无用的代码，默认情况下不需要任何配置。

Oxlint 的三大特点：

  • 性能：处理代码的速度比 ESLint 快 50-100 倍。
  • 安全：Rust 的内存安全保证消除了某些类别的错误。
  • 兼容性：目前内置了超过 200 条规则，且列表还在不断增加，来自 eslint、typescript、eslint-plugin-react、eslint-plugin-jest、eslint-plugin-unicorn 和 eslint-plugin-jsx-a11y；支持 .eslintignore 以及 ESLint 的注释忽略规则。。

了解更多：比 Eslint 快 100 倍！新一代 JS Linter 发布！

[12-31] Vue2 走到生命的尽头

Vue 2 的支持将在 2023 年 12 月 31 日结束(EOL)，Vue 2.7 是 Vue 2.x 的当前也是最后一个次要版本。在此日期之后，Vue 2 将继续在所有现有的发布渠道中提供，但不再接收更新，包括安全性和浏览器兼容性的修复。

了解更多：v2.vuejs.org/lts/

最后

大家觉得今年前端的变化怎么样，欢迎在评论区留言讨论～

抖音前端架构团队目前放出不少新的 HC ，又看起会的小伙伴可以看看这篇文章：抖音前端架构团队正在寻找人才！ FE/Client/Server/QA

avatar
文章
阅读
粉丝