RichTalk 快报第 11 期这里是Tech 快报，每两周为你带来新鲜的技术资讯，如果想第一时间收到更新请关注本知

你能认出多少个标志？🤔

这里是Tech 快报，每两周为你带来新鲜的技术资讯，如果想第一时间收到更新请关注本知识库。本期快报速览：

第 93 次 TC39 会议
Vite 4.0 is out！
图解浏览器的多进程渲染机制
哔哩哔哩 Web 首页重构——回首2021
JavaScript 最佳实践：如何写出更可靠、更高性能的代码
First Principles Thinking for Software Engineers：软件工程师的第一原则

头条

第 93 次 TC39 会议

Stage 4：

Intl Enumeration API：国际法定枚举API

github.com/tc39/propos… 支持返回国际法定的枚举值，比如：日历（calendar）、排序规则（collation）、货币（currency）、编号系统（numberingSystem）、时区（timeZone）和计量单位（unit）的所有支持集。

// 日历：佛教历、阴历、伊斯兰教历、……
Intl.supportedValuesOf("calendar").forEach(function(calendar) {
   // 'buddhist', 'chinese',  ... 'islamicc'
});

// 货币
Intl.supportedValuesOf("currency").forEach(function(currency) {
   // 'AED', 'AFN', 'ALL', ... 'ZWL'
});

// 编号系统
Intl.supportedValuesOf("numberingSystem").forEach(function(nu) {
  // 'adlm', 'ahom', 'arab', ...  'wara', 'wcho'
});

// 时区
Intl.supportedValuesOf("timeZone").forEach(function(timeZone) {
  // 'Africa/Abidjan', 'Africa/Accra', ... 'Pacific/Wallis'
});

// 计量单位
Intl.supportedValuesOf("unit").forEach(function(unit) {
  // 'acre', 'bit', 'byte', ... 'year'
});

Stage 3：

Set Methods：Set 对象的一些新方法

github.com/tc39/propos… 主要用来处理不同的 Set 对象（或者拥有Set相关特性的对象）之间交、并、补集等关系。

Set.prototype.intersection(other)
Set.prototype.union(other)
Set.prototype.difference(other)
Set.prototype.symmetricDifference(other)
Set.prototype.isSubsetOf(other)
Set.prototype.isSupersetOf(other)
Set.prototype.isDisjointFrom(other)

Explicit Resource Management：显式的资源管理

github.com/tc39/propos… 使用using关键字来定义资源。

import { ReaderWriterLock } from "...";
const lock = new ReaderWriterLock();

export async function readData() {
  // wait for outstanding writer and take a read lock
  using lockHandle = await lock.read();
  ... // any number of readers
  await ...;
  ... // still in read lock after `await`
} // release the read lock

export async function writeData(data) {
  // wait for all readers and take a write lock
  using lockHandle = await lock.write();
  ... // only one writer
  await ...;
  ... // still in write lock after `await`
} // release the write lock

Iterator Helpers：迭代器的一些工具方法

github.com/tc39/propos… 给迭代器新增一些工具方法（很有意思的方法）：

map：迭代器返回的每个元素都要应用map的函数

function* naturals() {
  let i = 0;
  while (true) {
    yield i;
    i += 1;
  }
}

const result = naturals()
  .map(value => {
    return value * value;
  });
result.next(); //  {value: 0, done: false};
result.next(); //  {value: 1, done: false};
result.next(); //  {value: 4, done: false};

filter：迭代器可以跳过不符合 filter 传入函数条件的返回结果

function* naturals() {
  let i = 0;
  while (true) {
    yield i;
    i += 1;
  }
}

const result = naturals()
  .filter(value => {
    return value % 2 == 0;
  });
result.next(); //  {value: 0, done: false};
result.next(); //  {value: 2, done: false};
result.next(); //  {value: 4, done: false};

take：定义迭代器最多迭代的次数

function* naturals() {
  let i = 0;
  while (true) {
    yield i;
    i += 1;
  }
}

const result = naturals()
  .take(3);
result.next(); //  {value: 0, done: false};
result.next(); //  {value: 1, done: false};
result.next(); //  {value: 2, done: false};
result.next(); //  {value: undefined, done: true};

drop：跳过前 n 次迭代

function* naturals() {
  let i = 0;
  while (true) {
    yield i;
    i += 1;
  }
}

const result = naturals()
  .drop(3);
result.next(); //  {value: 3, done: false};
result.next(); //  {value: 4, done: false};
result.next(); //  {value: 5, done: false};

……

Vite 4.0 is out！

访问入口 Vite 4.0 更新内容：

**升级 **Rollup 3
新增 @vitejs/plugin-react-swc，在构建时使用 esbuild，开发时用 SWC 替换 Babel
- 注：保留 @vitejs/plugin-react ，用户可自行选用
将 css 作为字符串导出
- 注：解决导入.css文件的默认导出可能会引入 CSS 的双重加载问题
现代浏览器的构建目标默认为 safari14
- 注：支持构建 BigInt 数据类型
升级 dotenv 16、dotenv-expand 9
- 注：用于将.env文件中的配置内容写入 process.env
CLI 快捷键
预构建支持 patch-package
- 注：这个包是支持给NPM包打补丁的，比如你想使用更高版本的 Antd，但是更高版本的 Antd 废弃 Input 组件的某个API，于是你又想继续使用低版本的 Input 组件。此时这个包就可以帮你给新版本包打补丁，使用局部代码替换的方式，既可以使用低版本 Antd 的 Input 组件，又可以使用高版本的 Antd 其他组件
优化构建日志输出，单位切换到 kB
改进 SSR 期间的错误信息
与 Vite 3.2.5 相比，Vite 4 的安装包大小减少了 23%
plugin 包移出 core 仓库

精选

图解浏览器的多进程渲染机制

访问入口这是一篇纯技术干货，主要讲述了多进程浏览器中的进程分类以及它们的工作模式。这篇文章基本从前端层面完整的回答了 “单进程浏览器和多进程浏览器的区别” 以及 “从输入URL到页面渲染完毕，这中间发生了什么？” 这两个问题，读者可以通过阅读这种图形化的方式深化对页面完整渲染流程的理解和记忆。

哔哩哔哩 Web 首页重构——回首2021

访问入口哔哩哔哩的 Web 首页重构的实战文章，但是这篇文章不是那种完全 show code 的模式，而是综合了目标分析和痛点分析，再对痛点进行逐个击破的整个流程。可以通过阅读这篇文章来重温一些响应式适配以及性能优化的方案，同时，作者分析与解决问题的思路也非常值得借鉴，可以把第三点几个小标题抽象为：实现产品目标、代码可复用性、兜底处理、平衡投入与产出以及平衡用户体验、可维护性与性能。这也是我们在完成一项任务时需要综合考虑的因素。

拓展

JavaScript 最佳实践：如何写出更可靠、更高性能的代码

访问入口在阅读这篇文章时，发现了一个有趣的概念：达夫设备。于是查到了这篇讲解“达夫设备”的文章。这是一种加速循环语句的方法，基本思路是通过切割循环体，每次循环过程中执行多项循环项，减少循环的次数来完成的。从表达上可能不好理解，举个例子，下面的代码中每次循环将执行多条循环语句：

let iterations = Math.ceil(values.length / 8)
let startAt = values.length % 8
let i = 0
do {
  switch (startAt) {
    case 0:
      process(values[i++])
    case 7:
      process(values[i++])
    case 6:
      process(values[i++])
    case 5:
      process(values[i++])
    case 4:
      process(values[i++])
    case 3:
      process(values[i++])
    case 2:
      process(values[i++])
    case 1:
      process(values[i++])
  }
  startAt = 0
} while (--iterations > 0);

在做大量数据循环的时候，这种方法可以在一定程度上提升循环效率，节省机器资源。当然，它的缺点也很明显，这并不符合开发者的开发习惯，看起来不像是逻辑不正常的代码。

First Principles Thinking for Software Engineers

addyosmani.com/blog/first-… 介绍第一原则思维。第一原则思维是解决复杂问题的有力工具，他把问题分解成核心要素，然后系统地建立解决方案。可以分 4 步：

识别和解构问题，最重要的部分是什么
问为什么（合理利用 5Why），列出障碍
质疑你的假设，假设是解决方案的基础，他可能正确也可能错误
专注于你的目标，不要被细节所干扰。

动态

聚变·第十七届 D2 终端技术大会回放地址：访问入口
最近ChatGPT大火，其核心是 OPEN AI，这是使用 Node.js + OPEN AI 实现一个自动生成图片项目：访问入口
【VueConf 2022】尤雨溪：Vue的进化历程。Vue 计划未来将借鉴 Solid ，使用模板编译策略，输出不再依赖 Virtual DOM 运行时。访问入口

Pasted Graphic 4.tiff

RichTalk 快报 第 11 期

头条