前端杂烩

本文是作者的 Web 前端阅读资源汇总，根据个人阅读的认可度给出以下标签分类：​

• 可选：文章内容不具备普适性，阅读该文或许可以扩展知识面
• 推荐：文章内容具有普适性，但不一定具备实用性，阅读该文或许可以获得必要的知识面提升
• 必读：文章内容具备普适性，且具备实用性，阅读该文或许可以获得必要的技能提升
• 进阶：文章内容具备一定深度，阅读该文需要扎实的基础知识

温馨提示：文中列出的标签不一定精准，例如作者文章给出的标签有 BUFF 加成~

广告

概览

温馨提示：图片较大，加载可能比较缓慢。

作者文章

面试

Awesome

TypeScript

JavaScript

HTML

CSS

React

Vue

HTTP

Git

Node.js

CI/CD

Font

测试

Chrome DevTools

Service Worker

扩展

• 推荐 什么是微内核架构设计？
• 推荐 插件开发指南 | Vue CLI [文档]
• 可选 Chrome Extension 官方 [文档]
• 可选 How to build a plugin system on the web and also sleep well at night
• 可选 大型 Web 应用插件化架构探索

组件库

• 推荐 Ant Design [文档]
• 推荐 Element Plus [文档]（基于 Vue 3，面向设计师和开发者的组件库）
• 推荐 Element [文档] (基于Vue2.0的饿了么桌面端组件库)
• 推荐 Ant Design Vue [文档]
• 推荐 Ant Design Pro [文档] (开箱即用的中台前端/设计解决方案)
• 推荐 Antd ProComponents [文档]
• 可选 Salt UI [文档] (高效、简洁的移动端UI组件库)
• 可选 Ant Design Mobile 5.0 [文档]
• 可选 ant-design-pro-vue [文档] (开箱即用的中台前端/设计解决方案)
• 可选 vue-antd-admin [库] (一个开箱即用的中后台前端/设计解决方案)
• 可选 Fusion [文档]
• 可选 Muse-UI [文档] (基于 Vue 2.0 优雅的 Material Design UI 组件库)
• 可选 Vue Material [文档]
• 可选 Bootstrap [文档]
• 可选 Bootstrap Table [文档]
• 可选 Bulma [文档]

性能优化

工程化

监控 & 稳定性

客户端

微前端

小程序

• 可选 Minifish

Rust

• 推荐 Rust [文档]
• 推荐 The Rust community’s crate registry
• 推荐 Rust 程序设计语言(简体中文版)
• 推荐 Rust by Example
• 推荐 Command line apps in Rust
• 可选 rustfmt [库]
• 可选 Rust Blog
• 可选 This Week in Rust

可视化

低代码

风格指南

编程指南

解决方案

编译器相关

工具

算法

小技能

• 推荐 CMD 命令速查手册
• 可选 macOS/Linux 环境变量设置
• 可选 Shell脚本编程30分钟入门
• 可选 Mac 上“磁盘工具”中可用的文件系统格式（是否区分文件名大小写）
• 可选 ESLint couldn't determine the plugin uniquely.
• 可选 编程中 #！ 这个梗是什么意思？
• 可选 127.0.0.1 vs 0.0.0.0 vs localhost vs 主机IP
• 可选 SCP or SFTP：用哪个？
• 可选 理解 CRLF，LF
• 可选 UML建模之时序图（Sequence Diagram）
• 可选 程序员必备画图技能之——时序图
• 可选 UML系列
• 可选 Windows安装Charles并设置HTTPS代理

总结

V8 引擎

编译原理

• 推荐 V8: 连接 Ignition 与 Turbofan [PPT]
• 推荐 Ignition: 快速启动的 V8 解释器 [PPT]
• 推荐 Ignition: V8 解释器 [PPT]
• 推荐 Firing up the Ignition interpreter
• 推荐 Understanding V8’s Bytecode
• 推荐 V8 中推测优化机制的介绍
• 推荐 TurboFan 编译器概述
• 推荐 V8 中的反优化
• 推荐 TurboFan: V8 新的代码生成架构
• 推荐 Launching Ignition and TurboFan（全面使用 Ignition + TurboFan 以及带来的优势说明）
• 可选 深入研究 TurboFan JIT
• 可选 TurboFan 的故事
• 可选 Ignition + TurboFan 以及 ES2015
• 可选 TurboFan IR
• 可选 TurboFan’s JIT 设计
• 可选 动态语言的快速算法
• 可选 代码缓存
• 可选 关于懒惰（laziness）机制的实习经历：去优化函数的延迟取消链接
• 可选 惰性优化的实习经历 [PPT]
• 可选 后台编译（多线程编译提升编译速度）
• 可选 改进代码缓存
• 可选 JIT-less V8
• 可选 Blazingly fast parsing, part 1: optimizing the scanner（扫描器性能优化）
• 可选 Blazingly fast parsing, part 2: lazy parsing（预解析性能优化）

垃圾回收

• 可选 免费获取垃圾回收
• 可选 Jank 克星第一部分（如何提升垃圾回收机制的性能）
• 可选 Jank 克星第二部分: Orinoco
• 可选 Orinoco：新生代垃圾回收
• 可选 V8 的并发标记
• 可选 谈谈 GC：新的 Orinoco 垃圾收集器
• 可选 C++ 的高性能垃圾回收（GC）

性能优化

• 必读 V8 中的快属性
• 必读 V8 中的元素种类及性能优化
• 推荐 给 JavaScript 开发者的代码缓存指南
• 推荐 The story of a V8 performance cliff in React
• 可选 V8 extras（创建 V8 内置 JavaScript API）
• 可选 优化 V8 内存消耗
• 可选 How V8 measures real-world performance
• 可选 Temporarily disabling escape analysis
• 可选 Optimizing hash tables: hiding the hash code（哈希表中的索引存储优化）
• 可选 Lazy deserialization（惰性内置和反序列化）
• 可选 从 JS 追踪到 DOM 并返回 （调试内存泄漏的小技巧）
• 可选 Chrome 的一小步，V8 的一大堆（内存泄漏相关）
• 可选 High-performance ES2015 and beyond
• 可选 Fast for-in in V8
• 可选 Embedded builtins（减少内置 API 的运行内存）
• 可选 在 V8 中 提升 DataView 的性能
• 可选 Getting things sorted in V8（V8 中排序算法的性能优化）
• 可选 加速 [...spread] 运算
• 可选 更快的异步函数和 Promise
• 可选 JavaScript 的性能开销(2019版)
• 可选 更轻量的 V8
• 可选 V8 发布 v7.8
• 可选 V8 中的指针压缩
• 可选 更快的 JavaScript 调用
• 可选 超快的 super 属性访问
• 可选 短内置调用

WebAssembly

• 可选 Experimental support for WebAssembly in V8
• 可选 WebAssembly browser preview
• 可选 Liftoff: a new baseline compiler for WebAssembly in V8（WebAssembly 的基线编译器 Liftoff）
• 可选 Code caching for WebAssembly developers
• 可选 Emscripten and the LLVM WebAssembly backend
• 可选 Outside the web: standalone WebAssembly binaries using Emscripten
• 可选 .wasm 是什么？wasm 反编译简介
• 可选 Up to 4GB of memory in WebAssembly
• 可选 Faster JS-to-Wasm calls

ECMAScrit 规范

• 可选 理解 ECMAScript 规范, 第1部分
• 可选 Understanding the ECMAScript spec, part 2
• 可选 Understanding the ECMAScript spec, part 3
• 可选 Understanding the ECMAScript spec, part 4

其他资源

计算机

• 可选 寄存器和栈的关系
• 可选 CPU架构中的栈和寄存器？
• 可选 JVM架构 |栈式指令集与寄存器指令集有什么区别？
• 可选 JVM的架构模型(区分栈的指令集架构和寄存器的指令架构)
• 可选 序列化理解起来很简单
• 可选 DSL 的误区
• 可选 谈谈 DSL 以及 DSL 的应用（以 CocoaPods 为例）
• 可选 前端 DSL 实践指南（上）
• 可选 什么是图灵完备？
• 可选 怎样设计一套程序设计语言？
• 可选 中间表示(Intermediate Representation)
• 可选 编译原理
• 可选 编译原理入门篇|一篇文章理解编译全过程
• 可选 [编译原理]概览
• 可选 开发者应知道的编译原理和语言基础知识
• 可选 漫话CPU指令集架构
• 可选 处理器架构、指令集和汇编语言，三者有何关系？
• 可选 CPU的内部架构和工作原理
• 可选 CPU处理器架构和工作原理浅析
• 可选 DRAM、SDRAM和SRAM的区别
• 可选 CPU 是怎样工作的？
• 可选 彻底搞懂 CPU 中的内存结构
• 可选 计算机缓存Cache以及Cache Line详解
• 可选 浅析CPU高速缓存(cache)
• 可选 指令周期、机器周期和时钟周期
• 可选 计算机组成原理：时钟周期、机器周期和指令周期
• 可选 ROM, FLASH和RAM的区别
• 可选 什么是虚拟机 Virtual Machine ?
• 可选 浅谈STM32的启动过程
• 可选 ARM 之七 主流编译器（armcc、iar、gcc for arm）详细介绍
• 可选 交叉编译
• 可选 Introduction to cross-compiling for Linux

博客

• 可选 Hexo (Hexo 是一个快速、简洁且高效的博客框架)
• 可选 Next (Elegant Theme for Hexo)
• 可选 icarus (A simple, delicate, and modern theme for the static site generator Hexo)
• 可选 LeanCloud （博客评论）
• 可选 Markdown 常用公式(github 编辑公式)

书籍

• 可选 哪本书是对程序员最有影响、每个程序员都该阅读的书？
• 可选 What is the single most influential book every programmer should read?
• 可选 编译器设计 (豆瓣)

周刊

• 可选 This Week In React
• 可选 奇舞周刊
• 可选 HelloGitHub

社区

• 可选 Vue 中文子论坛
• 可选 Vue.js 专业中文社区
• 可选 VueConf (Vue.js 开发者大会)

作者笔记

• 可选 jquery 2.0.3 源码分析笔记
• 可选 设计模式
• 可选 JavaScript 类和继承
• 可选 如何使 JavaScript 提高运行性能
• 可选 ES6 学习笔记
• 可选 JavaScript 高级程序设计
• 可选 JavaScript 权威指南
• 可选 算法导论与 JavaScript 实现
• 可选 数据结构和算法
• 可选 CSS 权威指南
• 可选 CSS 世界
• 可选 精通 CSS
• 可选 正则表达式