前端,请回答 2022

27,540

前言

一转眼 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 一起进步!