前端，请回答 2022

子弈
29,438 阅读15分钟

前言

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

广告

子弈在掘金平台的课程里发布了一本小册，可以看下阅读指南看看是否值得购买哈，如有打扰请多多包涵。

2022 技能树总结

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

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

2022 年度总结.png

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

2022 深入方向总结.png

温馨提示：为了方便移动端 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 是学习一门技术最好的查漏补缺方式，

基础知识

语言

辅助工具

  • [代理/文档] 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

CSS

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

前端库

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

库制作

前端框架 & 生态

  • [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）

检查 & 格式

微前端

构建工具

  • [前端/文档] 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 产品的底层框架）

扩展

跨端

  • [引擎/博客] 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 掘金文章

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

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

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

2023 年度计划

学习计划

方向细分计划优先级
Chromium 基础知识架构DOM 渲染原理了解低
Chromium 基础知识V8C++ 绑定技术深入并实现Demo高
Chromium 基础知识V8断点调试原理中
Chromium 基础知识Blink任务调度（Event Loop 原理）中
微前端隔离技术各种隔离技术深入 & SES 可行性分析高
微前端方案设计各种方案技术深入 & Demo 实现高
微前端方案设计基于 Web Components 的框架设计 Demo 实现高
Chrome DevToolsCDP 协议捕捉分析 & 移动端调试模拟页面高
Chrome DevToolsFrontend定制 & 扩展调试面板高
Chrome DevToolsBackendMock 脚本原理分析 & 定制高
Chrome DevTools消息通道ADB 无线通信 & WebSocket 服务高
跨端JS 引擎Andriod & iOS 嵌入 & 异步绑定技术高
跨端JS 引擎Andiroid & iOS 绑定接口实现高
跨端WebAssembly 引擎Andiroid & iOS 异步绑定实现低
跨端框架跨端框架 UI 绑定 & 渲染深入低

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

文章计划

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

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

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

最后

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

avatar
文章
阅读
粉丝
相关推荐
前端面试知识点（二）
29k阅读
 · 
504点赞
技术文章的写作技巧分享
16k阅读
 · 
304点赞
2019 前端年度总结
27k阅读
 · 
456点赞
个人前端资源汇集
22k阅读
 · 
509点赞
前端杂烩
56k阅读
 · 
1.2k点赞
2022年中总结 ｜ 一位深圳事业单位的前端总结
7.4k阅读
 · 
92点赞
【招聘】❤️ 淘宝买菜前端团队诚邀你的加入
313阅读
 · 
2点赞
我最喜欢高效学习前端的两种方式
39k阅读
 · 
213点赞
996 前端人该如何持续学习
30k阅读
 · 
497点赞