前端，请回答 2022

前言

一转眼 2023 年已经到来，在 Web 前端这个岗位上也工作了 5 年。回顾 2022，感觉自己变得更加沉稳，专心研究了各种底层技术，也很少跟前端小伙伴们进行摸鱼和吹逼了...这里回答一下 2022 年自我的技术沉淀，并规划一下 2023 年需要做的事情，给大家做一个参考。

2022 技能树总结

温馨提示：如果想要看 2019 年的技能树，可以阅读 2019 前端年度总结 / 技能。如果想要查看 2021 年的技能树，可以阅读 前端杂烩 / 概览。

下图直接查看可能比较模糊，可以通过浏览器的缩放对图片进行放大处理，也可以通过下载 2022 / Xmind 文件后使用 Xmind 工具打开查看。

2022 年主要深耕了一个基础方向、一个调试工具方向、两个框架方向：

温馨提示：为了方便移动端 APP 同学查看，这里把方向内容做一个列表展示。

1、Chromium 基础知识（地狱级）

• 架构（指导 Blink 原理分析 & 微前端隔离技术 & 跨端架构）

  • 多进程架构
  • 线程和任务
  • 沙箱隔离
  • 站点隔离
  • 浏览上下文
  • DOM 渲染（未深入）

• V8（指导微前端隔离技术 & Chrome DevTools Backend 运行 & 跨端 JS 嵌入技术）

  • V8 的编译原理（JIT）
    • 字节码
    • Ignition 解释器
    • TurboFan 优化编译器
    • Sparkplug 非优化编译器
  • V8 的嵌入实践
    • 动态库下载使用
    • 静态库编译
    • C++ 嵌入 Demo 实现
    • V8 绑定（皮毛）
    • JS 绑定
  • V8 的调试支持
    • 断点调试原理（皮毛）

• Blink（指导 Chrome DevTools 和跨端 DOM 绑定技术）

  • 进程：Renerer 进程中的 Mojo 通信技术（未深入）
  • 线程：主线程、Web Workers、Service Worker（未深入）
  • 目录架构
  • 任务调度（皮毛）
  • Web IDL bindings Web & V8 绑定抽象实现（皮毛）

• Node（指导 CLI、VS Code Extension、服务框架等开发）

  • libuv（未深入）
  • 任务调度（未深入）

• 2023 计划

  • C++ 深造
  • V8 绑定技术深入并实现 Demo
  • Event Loop 底层原理深入
  • Blink 和 Node 底层原理深入
  • V8 的调试原理深入

2、微前端（天堂级）

• 了解整体的微服务设计架构

• 深入框架原理实现

  • qiankun
  • single-spa
  • icestark

• 重点了解三方代码的安全隔离技术

  • 浏览器隔离技术
  • V8 隔离技术
  • V8 World (Chrome Extension Isolate 隔离)
  • JavaScript 全局上下文隔离
  • Worker 线程隔离（未深入）
  • WebAssembly 隔离（未深入）
  • JavaScript Mock 隔离（例如 iframe）
  • SES（Secure ECMAScript））
  • proposal-shadowrealm
  • Node.js VM
  • 沙箱逃逸（未深入）
  • 2023 计划
    • 各种隔离技术 Demo 实现
    • SES 深入和对接可行性分析
    • 沙箱逃逸深入

• 微前端方案 Demo 实现

  • iframe
    • 跨站内存表现分析
    • 跨域内存表现分析
  • NPM
    • Create React App 库构建改造
    • Vue CLI 库构建
    • single-spa Demo 分析
  • Web Components（实现中）
  • 框架设计（实现中）
  • 2023 计划
    • 实现 Web Compoennts 以及框架设计
    • 微前端框架 Demo 设计
    • 微前端解决方案设计
    • 微前端应用 Demo 设计

3、Chrome DevTools（人间级）（支撑 H5 远程无线调试 & 跨端调试 & 性能分析 & E2E 测试）

• CDP 协议

  • HTTP 服务发现协议
  • WebSocket
    • Domain
    • Method
    • Event
    • Types
  • 2023 计划
    • 捕捉和分析协议数据
    • 实现移动端模拟页面

• Chrome DevTools Frontend

  • 定制 Chrome F12 面板
  • 静态托管
  • 扩展（未深入）
  • React DevTools & Vue DevTools 分析（未深入）
  • 2023 计划
    • 定制调试面板
    • 扩展调试面板

• Chrome DevTools Backend

  • Web 应用 Mock 脚本代理接入
  • Web 应用 Mock 脚本原理（未深入）
  • 实现自定义 Mock 脚本 （未实现）
  • 2023 计划
    • Mock 脚本原理分析
    • 实现 Web 应用的 Mock 脚本定制

• 消息通道

  • Embedder（浏览器 F12）
  • Chrome Extensions（未深入）
  • WebSocket：局域网中转实现无线调试
  • USB / ADB：ADB TCP / IP 转发实现
  • 2023 计划
    • 实现 Andriod 的 ADB通道无线通信
    • 实现 WebSocket 互联网接入

• 其他

  • 小程序调试框架（皮毛）
  • 跨端调试框架（皮毛）
  • 2023 计划
    • 深入了解小程序双线程调试原理
    • 跨端扩展调试框架了解

4、跨端（地狱级）

• JS 引擎跨端嵌入

  • JSI Andriod 嵌入 Demo
  • JS 异步调用的绑定 Demo

• WebAssembly 引擎嵌入

  • C++ 嵌入 Demo
  • WebAssembly 绑定 Demo

• 2023 计划

  • Java & OC & Swift & Rust 熟练
  • Andriod V8 嵌入 Demo
  • Andriod JNI 实现
  • Andriod QuickJS 嵌入 Demo
  • iOS V8 嵌入实践
  • WebAssembly 异步调用绑定（Rust 生态）
  • 参考其他跨端框架冲一冲 DOM 渲染相关的领域
  • JSI Demo 实现（实现一套平滑的 JS 绑定框架）

2022 书签

在 2021 的前端杂烩里已经放置了往年收藏的大量书签，因此 2022 年的书签会在此基础上根据自己的使用活跃度进行补充。

Awesome

温馨提示：Awesome 是学习一门技术最好的查漏补缺方式，

• awesome
• awesome-awesome
• awesome-vue
• awesome-react
• awesome-javascript
• awesome-nodejs
• awesome-css
• awesome-javascript-cn （JavaScript 资源大全中文版）
• awesome-wechat-weapp (微信小程序开发资源汇总)
• awesome-graphql
• Awesome Redux
• awesome-github-vue
• awesome-github-wechat-weapp (微信小程序开源项目库汇总)
• awesome-nuxt
• awesome-nextjs
• awesome-ui-component-library
• awesome-react-components
• awesome-mac
• awesome-vscode
• Awesome-Design-Tools
• awesome-webpack
• awesome-gulp
• awesome-github
• awesome-npm
• awesome-chrome-devtools （Chrome DevTools 生态清单）
• Font Awesome
• awesome-resume （程序员简历例句）
• awesome-interview-questions
• awesome-webpack-cn （webpack 优秀中文文章）
• awesome-architecture （架构师技术图谱）
• awesome-books （开发者推荐阅读的书籍）
• awesome-programming-books （经典技术书籍推荐）
• awesome-bookmarks
• awesome-wasm（WebAssembly 生态清单）

基础知识

• [标准/科普] Shebang（解释器指令，制作 CLI 使用）
• [提案/文档] import-maps（浏览器 ES Module 导入映射）
• [标准/文档] Chrome DevTools Protocol（调试协议）

语言

• [WebAssembly/文档] AssemblyScript
• [C++/博客] C++ 入门教程
• [Java/博客] Java 教程（廖雪峰）
• [Rust/仓库] rust

辅助工具

• [代理/文档] Header Editor（请求响应头处理的 Chrome 插件）
• [代理/文档] iHosts（Mac 域名代理的 App 应用）
• [代理/仓库] lightproxy（系统代理的 App 应用）
• [代理/仓库] ClashX（科学上网的 App 应用）
• [代理/仓库] whistle（抓包调试）
• [提效/官网] Alfred（Mac 提效 App 应用）
• [提效/官网] Raycast（Mac 提效 App 应用）
• [提效/官网] Wox（Windows 版 Alfred）
• [提效/官网] Magnet（Mac 窗口分屏 App 应用）
• [搜索/官网] Can I Use（查询浏览器兼容性的网页应用）
• [网页/官网] draw.io（画图工具）
• [制作/仓库] mkcert（本地 HTTPS 证书制作的 CLI 工具）
• [下载/仓库] Homebrew（Mac 包管理 CLI 工具）

Chromium

• [架构/博客] Inside look at modern web browser (part 1)
• [架构/博客] Inside look at modern web browser (part 2)
• [架构/博客] Inside look at modern web browser (part 3)
• [架构/博客] Inside look at modern web browser (part 4)
• [架构/博客] Chromium 中文文档
• [架构/文档] 多进程架构（Chromium 原理）
• [架构/文档] 沙箱隔离 （Chromium 原理）
• [架构/文档] 站点隔离（Chromium 原理）
• [架构/文档] How Blink works
• [工具/仓库] depot_tools（Chromium 工具集）
• [调试/仓库] devtools-frontend（Chrome DevTools Frontend）
• [调试/仓库] chii（Chrome DevTools 远程调试 CLI 工具）
• [调试/仓库] chobitsu（配套 chii 的前端 CDP Mock 库）
• [调试/仓库] chrome-remote-interface （Node.js 的 CDP 协议接口库）
• [调试/仓库] ios-webkit-debug-proxy（Safari 调试协议转 CDP 协议）
• [调试/博客] remote_inspect_web_on_real_device（各种真机远程调试方法汇总）
• [调试/仓库] vConsole（轻量的移动端调试工具）
• [工具/仓库] event-loop（深入了解 Event Loop 运行）

CSS

温馨提示：2022 年没有新增任何相关的书签内容。

前端库

• [通用/仓库] highlight.js（网页代码高亮）
• [通用/仓库] es-module-shims（ES Module 规范垫片）
• [通用/仓库] history（历史会话管理）
• [通用/仓库] path-to-regexp （动态路径转换为正则表达式）
• [通用/仓库] polyfills（Web Components 垫片）
• [通用/仓库] licia（类似于 Lodash 的工具库）

库制作

• [通用/仓库] tsup（Bundle TypeScipt 库工具）
• [通用/仓库] typescript-lib-starter（TypeScipt 库脚手架创建）
• [通用/仓库] create-react-library（React 组件库脚手架创建）

前端框架 & 生态

• [React/仓库] react-app-rewired（覆盖 Create React App 的 Webpack）
• [React/仓库] customize-cra（覆盖 Create React App 的 Webpack）
• [React/仓库] React Query（React Hook 请求库）
• [React/仓库] swr（React Hook 请求库）
• [Vue/仓库] vitepress（静态文档生成）

组件库

• [表单/仓库] Formliy（可拓展组件库的动态表单解决方案）
• [表单/文档] form-render（动态表单解决方案）
• [组件/文档] xy-ui（面向原生 Web Components 的 UI 组件库
• [组件/文档] react-error-boundary（React 错误边界组件）
• [组件/仓库] ant-motion（React 动效库）
• [组件/仓库] pro-components（Ant Design Pro）

检查 & 格式

• [Lint/文档] 层叠配置 (Monorepo 需要注意)
• [Lint/仓库] typescript-eslint（TypeScript 的 ESLint 和 Prettier 工具集）
• [Prettier/仓库] eslint-config-prettier（检查格式规则配置是否存在冲突）
• [Lint/仓库] lint-staged（Git 暂存区代码检查）

微前端

• [框架/仓库] icestark（微前端解决方案）
• [框架/仓库] qiankun（微前端框架）
• [通用/仓库] import-html-entry（HTML Entry）
• [框架/仓库] single-spa（微前端框架）
• [示例/仓库] single-spa-login-example-with-npm-packages（Single SPA 的 NPM 方案实例）
• [框架/仓库] micro-app（微前端框架）
• [示例/博客] micro-frontends（微前端示例）
• [示例/仓库] micro-frontends（微前端示例）
• [沙箱/仓库] proposal-shadowrealm（隔离提案）
• [沙箱/文档] SES（Secure ECMAScript 垫片）
• [沙箱/仓库] Endo (还在开发)（分布式安全沙箱）
• [沙箱/仓库] LavaMoat（安全沙箱）
• [沙箱/博客] Secure Modular Runtimes（JS 安全运行时）
• [沙箱/博客] Security, Modules and Node.js (Node.js 安全运行时)
• [沙箱/博客] Import Maps（导入映射）隔离提案
• [沙箱/仓库] Jailed — flexible JS sandbox（浏览器和 Node.js 沙箱库）

构建工具

• [前端/文档] esbuild（ES6+ 构建）
• [前端/仓库] esno（类似于 tsx 的 esbuild 增强）
• [前端/文档] Vite（esbuild + Rollup）
• [前端/文档] SWC（基于 Rust）
• [前端/文档] minidev（支付宝小程序构建工具）
• [C++/博客] GCC vs. Clang/LLVM（构建工具科普）
• [C++/文档] GCC（构建工具）
• [C++/文档] Clang（构建工具）
• [C++/文档] CMake（构建系统）
• [C++/文档] GN（构建系统，Chromium 使用）
• [C++/文档] Ninja（构建系统，Chromium 使用）

Git 版本管理

• [工具/仓库] husky（Git 钩子配置工具）
• [工具/仓库] commitizen（Git 提交说明 CLI 工具，包含一系列的适配器）
• [通用/仓库] Simple Git（Node.js 的 Git 命令封装）

NPM / Yarn 包管理器

• [CLI命令/文档] npm ci（CI / CD 依赖安装）
• [CLI命令/文档] npm update（依赖升级）

后端框架

温馨提示：2022 年没有新增任何相关的书签内容。

Node 库

• [终端/仓库] shelljs（Shell 脚本封装）
• [终端/仓库] tasklist（Windows tasklist 命令封装）
• [终端/仓库] taskkill（Windows taskkill 命令封装）
• [终端/仓库] execa（child_process 增强）
• [终端/仓库] open（打开浏览器 URL、文件和可执行文件）
• [网络/仓库] ws（WebSocket 通信）
• [网络/仓库] node-http-proxy（代理转发）
• [网络/仓库] ngrok（内网穿透 & 代理）
• [网络/仓库] download（下载提取文件）
• [网络/仓库] abort-controller（取消请求）
• [网络/仓库] portfinder（空闲端口发现器）
• [网络/仓库] node-ip（IP 地址工具）
• [网络/仓库] http-proxy-middleware（网络代理中间件）
• [网络/仓库] AnyProxy（Node.js 网络代理工具）
• [文件/仓库] decompress（文件解压缩）
• [文件/仓库] compression（文件压缩）
• [文件/仓库] form-data（表单数据流，可用于上传文件）
• [打印/仓库] node-progress（进度条打印）
• [打印/仓库] winston（日志）
• [通用/仓库] find-root（发现 package.json 所在目录层级）
• [通用/仓库] dotenv（环境变量处理）
• [通用/仓库] ejs（模板引擎）
• [通用/仓库] uid（固定长度的 id 生成器）
• [通用/仓库] parse-json（解析 JSON 携带详细的错误信息）
• [通用/仓库] markdown-it（Markdown 解析为 HTML）
• [通用/仓库] node-qrcode（二维码生成器）
• [通用/仓库] cheerio（JQuery API 的服务端实现）
• [通用/仓库] normalize-package-data（规范化 package.json 元数据）
• [通用/仓库] strip-ansi（去除 ANSI 转义码）
• [通用/仓库] url-join（URL 规范化拼接）
• [通用/仓库] node-regedit（Windows 注册表）
• [通用/仓库] htmlparser2（HTML & XML 解析器）
• [通用/仓库] parse5（HTML 解析器）

温馨提示：部分通用库和环境没有关系，也可以在前端环境使用。

Node CLI

• [工具/仓库] nvm（Node 版本管理工具）
• [工具/仓库] lint-md（Markdown 格式校验工具）
• [通用库/仓库] minimist（轻量的命令参数解析）
• [工具/仓库] zx（Google 出品的 Shebang 助力器）

IDE

• [框架/仓库] OpenSumi（快速搭建 CloudIDE 及 桌面端 IDE 产品的底层框架）

扩展

• [VS Code/仓库] vscode-extension-samples（VS Code 扩展开发示例）
• [VS Code/博客] VS Code 插件中文开发文档
• [Chrome/仓库] chrome-extensions-samples（Chrome 扩展开发示例）

跨端

• [引擎/博客] JSI，V8 JS引擎优化（UC 的 JSI SDK，V8 & JSC 封装）
• [引擎/仓库] QuickJS（UC 的 JSI SDK，V8 & JSC 封装）
• [引擎/仓库] wasm3（WebAssembly 运行时）
• [引擎/仓库] wasmer（WebAssembly 运行时）
• [引擎/仓库] wasmtime（WebAssembly 运行时）
• [引擎/仓库] WAVM（WebAssembly 虚拟机）
• [引擎/仓库] wabt（WebAssembly 编译、运行时）
• [引擎/仓库] wasm-micro-runtime（WebAssembly 运行时）
• [引擎/仓库] wasm-c-api（WebAssembly C++ 封装）
• [引擎/文档] Design Of V8 bindings（V8 绑定技术）
• [引擎/文档] Getting started with embedding V8（V8 嵌入指南，包含了 JS 绑定介绍）
• [引擎/仓库] WebAssembly Binding（WebAssembly 运行时绑定技术）
• [引擎/博客] JS Binding 技术基础（JS 跨平台的绑定技术基础，配合 V8 嵌入指南）
• [引擎/博客] JS Binding 技术进阶（JS 跨平台的绑定技术进阶）
• [引擎/仓库] v8pp（V8 & C++ 绑定）
• [引擎/仓库] nbind（V8 & C++ 绑定）
• [引擎/仓库] rusty_v8（V8 & Rust 绑定）
• [引擎/仓库] J2V8（V8 & Java 绑定）
• [引擎/仓库] LiquidCore（Node.js 移动端虚拟机）
• [引擎/仓库] nodejs-mobile（Node.js 移动端虚拟机）
• [工具/仓库] emscripten（C++ 编译 WebAssembly 工具）
• [工具/仓库] binaryen（WebAssembly 编译工具链）
• [框架/仓库] Hummer（跨端开发框架）
• [框架/仓库] lynx-native（跨端开发框架）
• [框架/仓库] libuv（跨平台异步 I/O 库，主要被 Node.js 使用）

测试

• [E2E/仓库] Puppeteer（无头浏览器）

低代码

温馨提示：2022 年没有新增任何相关的书签内容。

移动端 & 客户端

温馨提示：2022 年没有新增任何相关的书签内容。

CI / CD

温馨提示：2022 年没有新增任何相关的书签内容。

2022 AdminJS文章

2021 年的年度总结写了两篇文章，然后发了个朋友圈说 2022 年写个一篇文章得了：

• 前端面试知识点（一）（3000+ 赞）
• 前端面试知识点（二） (400+ 赞)

温馨提示：这个系列一直被催更，其实可以一直写下去，但是个人觉得是碎片化的八股文，后续还是根据体系化的内容出更好的系列文章。

我真的破防了，结果 2022 年真就写了一篇文章...

• 前端杂烩（1000+ 赞）

2023 年度计划

学习计划

温馨提示：上述部分方向需要语言熟练度的支撑，例如 Java、OC、Swift、Rust & C++，其中 C++ 是跨平台的重点研究对象。

文章计划

2023 应该回归写文章的道路，陆陆续续将 2022 年学习的知识沉淀下来，预计可以写的内容包括：

• 深入浅出微前端（小册）
• 跨端之 V8 系列（深入浅出）
• Chrome DevTools 系列（深入浅出）
• 跨端之 WebAssembly 系列（浅浅的写一下）
• VS Code Extension 开发指南（浅浅的写一下）
• RxJS 系列（IM 开发实践）
• 面试系列（看看有没有空写点老本行出来）

温馨提示：发现一个特别有意思的事情，之前在某个大佬的 RxJS 文章里做了一下评论，结果陆陆续续被执着于 RxJS 的开发者进行跨年追杀，看看 2023 能否有空补上一篇 RxJS 的深度文章。

最后

祝大家新年快乐，2023 一起进步！