wangtao's blog

必读 ECMAScript 6 入门 [电子书]
必读 ES modules: A cartoon deep-dive（中文翻译）
必读 Tasks, microtasks, queues and schedules（宏任务、微任务、队列）
推荐 lodash [文档] (A modern JavaScript utility library delivering modularity, performance & extras)
可选 JavaScript与有限状态机 (阮一峰)
可选 模块化规范之ES Modules && CommonJS 规范 (opens new window)
可选 CommonJS 和 ES6 Module 究竟有什么区别？ (opens new window)
可选 CommonJS和ES6 Module 模块规范原理浅析 (opens new window)
可选 ECMAScript 规范的中文翻译 [文档]
可选 前端基础漫游指南 [电子书]
可选 前端工程师手册 [电子书]
可选 JS内存模型
可选 每周一个 npm 轮子学习之 lru-cache (opens new window)
可选 codemirror [库]
可选 debug [库]
可选 perfect-scrollbar [库]
可选 superagent [库]
可选 jQuery [文档]
可选 zTree [库]( jQuery Tree Plugin)
可选 [译] SuperAgent中文使用文档
可选 InversifyJS 中文文档 [文档]
可选 RxJS 中文 [文档]
可选 RxJS [文档]
可选 Redux-observable [文档]
可选 Redux-observable 中文 [文档]
可选 使用 redux-observable 实现组件自治 (opens new window)
可选 RxJS与Redux结合使用（一）：打造自己的redux-observable (opens new window)
可选 学习 RxJS [电子书]
可选 moroshko/rxviz: Rx Visualizer - Animated playground for Rx Observables (Rx 可视化工具)
可选 RxViz - Animated playground for Rx Observables (Rx 可视化工具)
可选 jaredly/rxvision: visualizer debugger for reactive streams (Rx 可视化工具)
可选 staltz/rxmarbles: Interactive diagrams of Rx Observables (图解 Rx)
可选 RxMarbles: Interactive diagrams of Rx Observables (图解 Rx)
可选 渔人和Rxjs的故事,这次一定教会你前端必会的Rxjs (opens new window)
可选 [译] 看动画，学 RxJS (opens new window)
可选 RxJS in Action [书]
可选 RxJS-CN/rxjs-articles-translation: RxJS 优质文章翻译
可选 RxJS v6 学习指南
可选 RxJS 学习中文资料
可选 全面拥抱 Reactivity: RxJS, RSocket & Svelte
可选 作为前端，你需要知道 RxJS (opens new window)
可选 canvas实践小实例二 —— 扇形
可选 深入浅出JavaScript异步编程
可选 JavaScript异步编程_前端学习
可选 JavaScript 知识图谱：ECMAScript、DOM、BOM、HTML5、计算机网络 [电子书]
可选 从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理 (全面了解JS单线程)
可选 如何实现一个深拷贝 (opens new window)
可选 Object()的方法一览 (opens new window)
可选 Promise之你看得懂的Promise (opens new window)
可选 深入理解 JavaScript 的类型转换 (opens new window)
可选【JS 进阶】你真的掌握变量和类型了吗 (opens new window)
可选 记一次面试题，正则表达式(?=a)是什么意思？ (opens new window)
可选【JS迷你书】类型转换之拆箱操作 (opens new window)
可选《三分钟阅读》7个有用的JavaScript技巧 (opens new window)
可选 我是如何将业务代码写优雅的 (opens new window)
可选 JS中的null和undefined,undefined为啥用void 0代替? (opens new window)
可选 async/await 优雅的错误处理方法 (opens new window)
可选 JavaScript 代码简洁之道 (opens new window)
可选 一个日期处理类库 moment.js (opens new window)

# HTML

推荐 Web Components
可选 浏览器沙盒是什么
可选 浏览器沙箱模型
可选 Web Components 入门实例教程 (阮一峰)
可选 你真的了解回流和重绘吗 (opens new window)
可选 浏览器的回流与重绘 (Reflow & Repaint) (opens new window)

# CSS

推荐 BEM [文档]（Class命名规范）
推荐 CSS [文档]（MDN web docs）
推荐 Flex 布局教程 (阮一峰)
推荐 Less 中文网 [文档]
推荐 Sass [文档]
推荐 PostCSS [文档]
可选 SASS用法指南 (阮一峰)
可选 CSS in JS 简介 (阮一峰)
可选 FLEXBOX FROGGY （学 Flex 的小游戏）
可选 CSSOM视图模式(CSSOM View Module)相关整理（张鑫旭）
可选 CSS相对定位|绝对定位(五)之z-index篇（张鑫旭）
可选 获取元素CSS值之getComputedStyle方法熟悉 - 张鑫旭
可选 我对CSS vertical-align的一些理解与认识 - 张鑫旭
可选 CSS实现单行、多行文本溢出显示省略号
可选 我所知道的几种display:table-cell的应用 (张鑫旭)
可选 [译] 这些 CSS 命名规范将省下你大把调试时间 (opens new window)
可选 等高分栏布局小结
可选 css写作建议和性能优化小结
可选 CSS定位属性详解 (opens new window)
可选 [译] Web 流式文字排版的现状 (opens new window)
可选 真正了解CSS3背景下的@font face规则 (张鑫旭)
可选 Web 字体简介: TTF, OTF, WOFF, EOT & SVG

# React

推荐 React [文档]
推荐 Create React App 中文文档 [文档]
推荐 React Router [文档]
推荐 Redux [文档]
推荐 Redux Toolkit [文档]
推荐 React Lifecycle
推荐 React Hooks 原理
可选 How to fetch data with React Hooks?
可选 React Hooks完全上手指南
可选 React 的性能优化（一）当 PureComponent 遇上 ImmutableJS
可选 React源码解析 [电子书]
可选 React源码系列(一): 总结看源码心得及方法感受 #1
可选 [译] React-Redux 官方 Hooks 文档说明
可选 Redux Toolkit [文档]
可选 reduxjs/cra-template-redux: The official Redux+JS template for Create React App [库]
可选 redux-toolkit-example-ts (示例代码)
可选 如何管理好10万行代码的前端单页面应用 (opens new window)
可选React 的性能优化（一）当 PureComponent 遇上 ImmutableJS
可选 [译] React-Redux 官方 Hooks 文档说明
可选 Immutable 操作在 React 中的实践 (opens new window)
可选 Redux 入门教程（一）：基本用法 (阮一峰)
可选 Redux 入门教程（二）：中间件与异步操作 (阮一峰)
可选 Redux 入门教程（三）：React-Redux 的用法 (阮一峰)
可选 How to fetch data with React Hooks?
可选 2020 年你应该知道的 React 库 (opens new window)
可选 React Hooks 究竟有多慢？ (opens new window)
可选 终于搞懂 React Hooks了！！！！！ (opens new window)
可选 关于Vue和React的一些对比及个人思考（中） (opens new window)
可选 React 开发必须知道的 34 个技巧【近1W字】 (opens new window)
可选 使用70行代码配合hooks重新实现react-redux (opens new window)
可选 使用 React Hooks + Context 打造简版 Redux (opens new window)
可选 2019年了，整理了N个实用案例帮你快速迁移到React Hooks (opens new window)
可选 React Hooks 详解【近 1W 字】+ 项目实战 (opens new window)
可选 React16：Hooks总览，拥抱函数式 (这大概是最全的React Hooks吧) (opens new window)
可选 React hooks实践 (opens new window)
可选 30分钟精通React Hooks (opens new window)
可选 Redux-thunk快速入门 (opens new window)
可选 Immutable 操作在 React 中的实践 (opens new window)
可选 使用 redux-observable 实现组件自治 (opens new window)
可选 React拾遗：从10种现在流行的 CSS 解决方案谈谈我的最爱（下） (opens new window)
可选 React拾遗：从10种现在流行的 CSS 解决方案谈谈我的最爱（上） (opens new window)
可选 [译] 关于 React Router 4 的一切 (opens new window)
可选 React路由鉴权 (opens new window)
可选 react-router4基于react-router-config的路由拆分与按需加载 (opens new window)
可选 快速搭建你的 github pages 个人博客 —— 基于 Create-React-App 的单页面应用实践 (opens new window)
可选 从0到1快速构建基于create-react-app的脚手架 (opens new window)
可选【长文慎入】一文吃透 React SSR 服务端渲染和同构原理 (opens new window)
可选 技术胖的2019新版React全家桶免费视频（84集） (opens new window)
可选 React组件设计实践总结02 - 组件的组织 (opens new window)
可选 React组件设计实践总结01 - 类型检查 (opens new window)
可选 [译] 2019 React Redux 完全指南 (opens new window)
可选 掘金最污的 React16.x 图文视频教程(2万5千字长文-慎入) (opens new window)

# Vue

推荐 Vue.js 3 中文 [文档]
推荐 Vuex [文档]
推荐 Vue Router [文档]
推荐 Vue CLI [文档]
推荐 Vue Loader [文档]
推荐 Vue.js [文档]
推荐 Vue 插件开发指南 [文档]
推荐 eslint-plugin-vue [文档]
推荐 VuePress [文档] (Vue 驱动的静态网站生成器)
可选 剖析 Vue.js 内部运行机制 [电子书]
可选 DMQ/MVVM (剖析Vue实现原理，如何实现双向绑定mvvm)
可选 深度剖析：如何实现一个 Virtual DOM 算法
可选 Vue.js 技术揭秘 [电子书]
可选 Vue SSR 指南 [文档]
可选 Nuxt [文档] (Vue.js 服务端渲染)
可选 Vue Apollo [文档] (在 Vue.js 应用中集成 GraphQL)
可选 Vue I18n [文档] (国际化插件)
可选 Vue Test Utils [文档] （Vue.js 官方的单元测试实用工具库）
可选 vue-cli-plugin-i18n [库]
可选 nuxt-property-decorator [库]
可选 为什么Proxy可以优化vue的数据监听机制 (opens new window)
可选 Vue.js的computed和watch是如何工作的？ (opens new window)
可选 深入理解Vue的watch实现原理及其实现方式 (opens new window)
可选 vue + typescript 新项目起手式 (Vue 2.x 版本)
可选 vue + typescript 进阶篇 (Vue 2.x 版本)
可选 美团点评点餐 Nuxt.js 实战 (opens new window) (Vue 2.x 版本)
可选 浅谈使用 Vue 构建前端 10w+ 代码量的单页面应用开发底层 (opens new window) (Vue 2.x 版本)
可选 Vue2.0 探索之路——生命周期和钩子函数的一些理解 (Vue 2.x 版本)
可选 vue-cli3 项目从搭建优化到docker部署 (opens new window) (Vue 2.x 版本)
可选 离职后才搞懂vue项目开发流程中的疑惑点 (opens new window) (Vue 2.x 版本)
可选 Vuex 带来全新的编程体验 (opens new window) (Vue 2.x 版本)
可选 vue-cli3 从搭建到优化 (opens new window) (Vue 2.x 版本)
可选 少年，撸猫吗 (opens new window) (Vue 2.x 版本)
可选 结合vue-cli来谈webpack打包优化 (opens new window) (Vue 2.x 版本)

# HTTP

可选 计算机通识 [电子书]
可选 跨域资源共享 CORS 详解（阮一峰）
可选 浏览器缓存知识小结及应用
可选 GET方法与POST方法的区别
可选 图解：HTTP 范围请求，助力断点续传、多线程下载的核心原理 (opens new window)
可选 资源预加载 - 性能优化需知~
可选 用 preload 预加载页面资源 (opens new window)
可选 preload和prefetch (opens new window)
可选 Cookie
可选 彻底明白ip地址，区分localhost、127.0.0.1和0.0.0.0
可选 前端跨域整理 (opens new window)

# Git

推荐 Git教程 (廖雪峰)
推荐 Your AI pair programmer
推荐 git如何修改已提交的commit
推荐 commit_msg (git 钩子文档)
推荐 语义化版本 2.0.0 (语义化版本控制规范)
可选 Git submodule 简明使用指南 (opens new window)
可选 git撤销commit 并保存之前的修改
可选 .gitignore 无效解决办法
可选 Git 钩子：自定义你的工作流
可选 Git 分支 - 变基
可选 cz-cli (cz工具)
可选 cz-customizable (cz适配器)
可选 @commitlint/config-conventional (cz适配器)
可选 commitlint (cz校验工具)
可选 commitlint-config-cz (cz校验工具的校验规则)
可选 validate-commit-msg (cz校验工具)
可选 conventional-changelog (cz日志生成器)
可选 如何让你的 GitHub 项目表面上更专业 (opens new window)
可选 git-flow 的工作流程
可选 如何使用 Issue 管理软件项目？(阮一峰)
可选 Git 工作流程 (阮一峰)
可选 为无线前端团队打造高效git工作流 (opens new window)

# Node.js

推荐 Node.js [文档]
推荐 ts-node [库]
推荐 NodeJS 开发工具栈 [Awesome]（开发工具箱）
推荐 awesome-nodejs [Awesome]
可选 mongoose [文档]
可选 mongoose 中文 [文档]
可选 ORM 实例教程
可选 TypeORM [库]
可选 TypeORM 中文 [文档]
可选 linkerd2 [文档]
可选 Express [文档]
可选 Koa [文档]
可选 Egg [文档]
可选 Socket.io [文档]
可选 Node Redis [文档]
可选 Midway [文档]
可选 GraphQL [文档]
可选 Prisma OSS Documentation [文档]
可选 Apollo Client [文档]
可选 阿里 Midway 正式发布 Serverless v1.0，研发提效 50%
可选 浅析 Node.js 的 vm 模块以及运行不信任代码
可选 node-inspector [库]（Node.js debugger based on Blink Developer Tools）
可选 深入理解Node.js 中的进程与线程 (opens new window)
可选 execa [库]
可选 parse-json [库]
可选 gitbeaker [库]
可选 node-fetch [库]
可选 node-inspector [库]
可选 Forcing Garbage Collection in node.js and JavaScript (强制垃圾回收)
可选 Mongoose the Typescript way…?
可选 mongoose Population 连表／关联使用
可选 Node.js环境性能监控 (opens new window)
可选 使用 TypeScript 开发 Node.js (opens new window)
可选 30分钟理解GraphQL核心概念
可选 Open Sourcing GraphQL Middleware - A Library to Simplify Your Resolvers
可选 RPC vs REST vs GraphQL
可选 GraphQL从入门到实战 (opens new window)
可选 手把手教你做爬虫
可选 关于爬虫，就此封键盘
可选 PHP, Python, Node.js 哪个比较适合写爬虫？
可选 简单高效的nodejs爬虫模型

# CI/CD

推荐 大公司里怎样开发和部署前端代码？(张云龙)
可选 GitHub Actions [文档]
可选 GitHub Actions 入门教程（阮一峰）
可选 pm2 (The Most Advanced Production Process Manager for Node.js)
可选 GitHub 新出的 Actions 是什么? 用他做自动测试? (opens new window)
可选 Jenkins
可选 jenkins 如何做到触发远程构建
可选 jenkins构建触发器详解-不登录触发远程构建详解
可选 Jenkins记录二：远程构建
可选 Jenkins+Node.js持续集成
可选 nginx [文档]
可选 Nginx开发从入门到精通 [电子书]
可选 前端必会的 Nginx入门视频教程(共11集) (opens new window)
可选 前端开发者必备的Nginx知识 (opens new window)
可选 如何使用 docker 部署前端应用 (opens new window)
可选 前端开发如何让持续集成/持续部署(CI/CD)跑起来
可选 从零搭建docker+jenkins+node.js自动化部署环境 (opens new window)
可选 从零搭建docker+jenkins+node.js自动化部署环境 (opens new window)

# Font

可选 Font Awesome
可选 Font Awesome
可选 Free Icons
可选 [译] 深入浅出 SVG (opens new window)

# 测试

推荐 Jest [文档]
推荐 javascript-testing-best-practices
推荐 JavaScript 程序测试 (阮一峰)
可选 Nightwatch.js [文档]
可选 Mocha [文档]
可选 Chai [文档]
可选 Karma [文档]
可选 awesome-jest [Awesome]
可选 测试驱动开发（TDD）总结——原理篇 (opens new window)
可选 前端测试框架 Jest (opens new window)
可选 刚开始接触前端测试？那就从金字塔顶端开始吧！
可选 ui-testing-best-practices
可选 测试框架 Mocha 实例教程 (阮一峰)
可选 测试覆盖（率）到底有什么用？

# Chrome DevTools

推荐 Chrome DevTools Protocol [文档]
推荐 Chrome DevTools Frontend 运行原理浅析 [电子书]
可选 Chrome DevTools 中文手册 [电子书]
可选 Chrome 开发工具指南 [电子书]
可选 Chrome 开发者工具中文手册
可选 Node 调试指南 - Inspector 协议 (opens new window)
可选 chii（远程调试工具）
可选 devtool
可选 [译] 在 Chrome 开发者工具中调试 node.js
可选 深入理解 Node.js 的 Inspector
可选 devtools-protocol [库]
可选 chrome-remote-interface [库]
可选 awesome-chrome-devtools [Awesome]
可选 devtools-frontend [库]
可选 揭秘浏览器远程调试技术

# Service Worker

可选 Service Worker 从入门到出门 (opens new window)
可选 同构项目 Service Worker 离线化实践
可选 用PWA构建一个完全离线的网站

# 扩展

推荐 什么是微内核架构设计？
推荐 插件开发指南 | 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 [文档]

# 性能优化

可选 压缩11000条 key 减少 7.2M，飞书如何实现 i18n 前端体积优化
可选 让老板虎躯一震的前端技术 (opens new window)
可选 前端优化不完全指南

# 工程化

推荐 Git 中文 [文档]
推荐 Webpack 中文 [文档]
推荐 Gulp 中文 [文档]
推荐 npm 中文 [文档]
推荐 yarn 中文 [文档]
推荐 Lerna 中文 [文档]
推荐 Lerna 文档 [电子书]
推荐 Babel [文档]
推荐 飞冰 - 基于 React 的研发解决方案 [文档]
推荐 ESLint (可组装的 JavaScript 和 JSX 检查工具)
推荐 Prettier (An opinionated code formatter)
可选 深入浅出Webpack [电子书]
可选 webpack-chain [库] (生成和修改 Webpack 配置信息的链式API集)
可选 CKEditor 4 (Smart WYSIWYG HTML editor)
可选 75 Best Node.js Command Line Apps & Utilities | FireBear [Awesome]
可选 Node.js CLI modules
可选 入门 Webpack，看这篇就够了
可选 Webpack 入门指迷
可选 Webpack 大法之 Code Splitting (缩小打包体积)
可选 彻底解决 Webpack 打包性能问题
可选 让你的Webpack起飞—考拉会员后台Webpack优化实战
可选 import、require、export、module.exports 混合使用详解
可选 前端构建秘籍 (opens new window)
可选 结合vue-cli来谈webpack打包优化 (opens new window)
可选 html-webpack-plugin 使用总结 (opens new window)
可选 带你深度解锁Webpack系列(优化篇) (opens new window)
可选 玩转 webpack，使你的打包速度提升 90% (opens new window)
可选 看完这篇，面试再也不怕被问 Webpack 热更新 (opens new window)
可选 webpack4入门 (opens new window)
可选 @vue/babel-preset-app (Vue CLI3 的Babel插件集)
可选 @babel/preset-env (Babel插件集)
可选 你真的会用Babel吗？ (opens new window) (全面了解Babel)
可选 再见，babel-preset-2015
可选 Deploying ES2015+ Code in Production Today
可选【建议改成】读完这篇你还不懂Babel我给你寄口罩 (opens new window)
可选 从 0 构建自己的脚手架/CLI知识体系（万字） (opens new window)
可选 前端工程化实战 - 企业级 CLI 开发 (opens new window)
可选 前端工程化实战 - 可配置的模板管理 (opens new window)
可选 详解前端脚手架开发排坑全指南【前端提效必须上干货】 (opens new window)
可选 Node.js+commander开发命令行工具
可选 Node.js 命令行程序开发教程 (阮一峰)
可选 这是看过最优秀的Vue-cli源码分析，绝对受益匪浅 (opens new window)
可选 Vue ClI 源码探索 | Vue Learn Share [电子书]
可选 rollup.js 中文 [文档]
可选 gulp-typescript [库]
可选 你所需要的npm知识储备都在这了 (opens new window)
可选 如何 npm 发布特定文件夹作为包根目录
可选 Why your company shouldn’t use Git submodules
可选 浅谈 ES 模块和 Webpack Tree-shaking
可选 Tree-Shaking进阶之路
可选 Tree-Shaking性能优化实践 - 原理篇 (opens new window)
可选 Tree Shaking：从原理到实现 (opens new window)
可选 你的Tree-Shaking并没什么卵用 (opens new window)
可选 聊聊 package.json 文件中的 module 字段
可选 热重载原理研究和探索
可选 揭秘Flutter Hot Reload（原理篇）
可选 Flutter的Hot Reload是如何做到的
可选 看完这篇，面试再也不怕被问 Webpack 热更新 (opens new window)
可选 webpack 插件拾趣 (1) —— webpack-dev-server
可选 打破砂锅问到底：详解Webpack中的sourcemap
可选 package.json 中你还不清楚的 browser，module，main 字段优先级
可选 peerDependencies介绍及简析
可选 Prettier看这一篇就行了
可选 Module Federation
可选 你所不知道的模块调试技巧 - npm link
可选 关于你想知道的package-lock.json的一切
可选 使用ESLint ＆ Prettier美化Vue代码
可选 eslint prettier的配置选项（参数）官网直译
可选 Prettier 介绍与基本用法 (opens new window)
可选 [译] npm 的经济风云 —— 上半部分 (opens new window)
可选 前端工程化（5）：你所需要的npm知识储备都在这了 (opens new window)
可选 Workspaces in Yarn
可选 Why you should use a single repository for all your company’s projects (多项目单仓库思考)
可选 Open Sourcing CloudFlare’s UI Framework (使用 Lerna 开源的 UI 框架设计)
可选 monorepo 新浪潮 | introduce lerna （Lerna 介绍）
可选 Why is Babel a monorepo?
可选 lerna管理前端packages的最佳实践 (opens new window)

# 监控 & 稳定性

可选 7 天打造前端性能监控系统
可选 把前端监控做到极致 (opens new window)
可选 全景还原报错现场 | 应用实时监控 ARMS 上线用户行为回溯功能 (opens new window)
可选 “前端+应用”两大监控利器商业化首发 ARMS领跑APM市场 (opens new window)
可选 通过页面埋点做监控却不影响性能？解密ARMS前端监控数据上报技术内幕 (opens new window)
可选 UEM“探针”技术及用户体验管理 (opens new window)
可选 有赞前端质量保障体系 (opens new window)
可选 前端代码质量-圈复杂度原理和实践 (opens new window)
可选 要进大厂？前端灰度发布必须要知道 (opens new window)
可选 从前端程序员的视角看小程序的稳定性保障 (opens new window)

# 客户端

推荐 Flutter中文网
可选 Flutter实战 [电子书]
可选 国内大厂在移动端跨平台的框架接入分析 (opens new window)
可选 flutter凉了吗?
可选 打破重重阻碍，Flutter 和 Web 生态如何对接？
可选 简述Chromium, CEF, Webkit, JavaScriptCore, V8, Blink (opens new window)
可选 从用 AngularJS 开发 PC 客户端说起
可选 互联网:桌面客户端框架技术选型
可选 漫谈windows桌面客户端的UI框架
可选 小白必看，JSBridge 初探 (opens new window)
可选 分享这半年的 Electron 应用开发和优化经验 (opens new window)
可选 Electron 从零到一 (opens new window)
可选 浅谈Native、Web App、Hybrid、RN 和 Weex优劣 (opens new window)
可选 用JS开发跨平台桌面应用，从原理到实践 (opens new window)
可选 Hybrid APP架构设计思路
可选 前端构造桌面级应用（QQ音乐） (opens new window)
可选 Hybrid 开发：JsBridge - Web 和客户端的桥 (opens new window)
可选 JSBridge实战 (opens new window)
可选 高并发IM系统架构优化实践 (opens new window)
可选 给客户端同学的一份前端学习指南 (opens new window)
可选 2000万日订单背后：美团外卖客户端高可用建设体系 (opens new window)
可选 指尖下的js —— 多触式web前端开发之三：处理复杂手势
可选 H5 键盘兼容性小结 (opens new window)
可选 再学Android之WebView (opens new window)
可选 web移动端布局的那些事儿 (opens new window)
可选 移动端布局适配 (opens new window)
可选 关于移动端适配，你必须要知道的 (opens new window)

# 微前端

推荐 微前端的核心价值
推荐 Thinking in Microfrontend (微前端的那些事儿)
推荐 Micro Frontends
推荐 qiankun [文档]
推荐 single-spa [文档]
可选 可能是你见过最完善的微前端解决方案
可选 探索微前端的场景极限
可选 微前端入门 (opens new window)
可选 了解什么是微前端 (opens new window)
可选 [译] 微前端 (opens new window)

# 小程序

可选 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

# 可视化

可选 OpenLayers [文档]
可选 OpenLayers 3 Primer [电子书] (OpenLayers 3使用的入门教程)
可选 颜值即正义！这几个库颠覆你对数据交互的想象 (opens new window)

# 低代码

可选 第三届搞搭建|洛尘 - 如何设计实现 PC 站点搭建系统 - Schema (opens new window)
可选 第三期 |《早早聊搞搭建》搞过搭建的我收获了什么？（上篇） (opens new window)
可选 第三期 |《早早聊搞搭建》搞过搭建的我收获了什么？（下篇） (opens new window)
可选 React无门槛实现拖拽布局、表单设计器 (opens new window)
可选 格式校验利器：JSON Schema 简介 (opens new window)
可选 JSON Schema与表单验证 (opens new window)
可选 json-schema 可视化编辑器发布了 (opens new window)

# 风格指南

推荐 JSDoc 中文 [文档]
推荐 TypeDoc [文档]
可选 Google JavaScript 代码风格指南 (opens new window)
可选 JavaScript 代码简洁之道 (opens new window)
可选 前端团队代码评审 CheckList 清单 (opens new window)

# 编程指南

必读 函数式编程指北 [电子书]
推荐 可伸缩的同构 Javascript 代码
推荐 界面之下：还原真实的 MV* 模式
可选 函数式编程初探 (阮一峰)
可选 函数式编程入门教程 (阮一峰)
可选 Pointfree 编程风格指南 (阮一峰)
可选 简明 JavaScript 函数式编程——入门篇 (opens new window)
可选 函数式编程，真香 (opens new window)
可选 这一次，教你从零开始写一个 IoC 容器
可选 浅谈IOC--说清楚IOC是什么
可选 IoC和DI的基本概念及InversifyJS入门 (opens new window)
可选 Java SPI机制详解 (opens new window)
可选 InversifyJS [文档]
可选 InversifyJS/ecosystem.md
可选 如何基于 TypeScript 实现控制反转 (opens new window)
可选 Reflect Metadata
可选 reflect-metadata [库]
可选 Reflect
可选 Decorators for ES6 classes
可选 编程范式（Programming Paradigm）
可选 What is the precise definition of programming paradigm?
可选 主要的编程范例
可选 Programming paradigms for dummies: what every programmer should know | the morning paper
可选 基于数学的大统一编程理论：纯函数管道数据流和基于原则的仓库/车间模型
可选 再谈编程范式—程序语言背后的思想 (opens new window)
可选 面向接口编程详解（一）
可选 那些年我们错过的响应式编程
可选 响应式编程的实践
可选 什么是响应式编程（Reactive Programming） (opens new window)
可选 函数式编程 - 实现响应式框架 (opens new window)
可选 什么是响应式编程？
可选 Reactive响应式/反应式编程
可选 响应式编程到底是什么？
可选 响应式编程总览 (opens new window)
可选 面向 Model 编程的前端架构设计
可选 Understanding JavaServer Pages Model 2 architecture
可选 GUI Architectures
可选 javascript 设计模式系列
可选 [译] 什么将会替代 JavaScript 呢？ (opens new window)

# 解决方案

推荐 迈入现代 Web 开发（GMTC 2021 演讲《字节跳动的现代 Web 开发实践》全文）
推荐 漫画：什么是中台？ (opens new window)
推荐 IaaS，PaaS，SaaS 的区别 (阮一峰)
可选 中台是什么，到底要解决什么问题？ (opens new window)
可选 MicroSoft Power Platform (低代码)
可选 领域驱动设计在互联网业务开发中的实践
可选 DDD 模式从天书到实践
可选 微服务架构入门
可选 微服务简介
可选 微服务下使用GraphQL构建BFF
可选 大前端架构思考与选择
可选 支撑日活百万用户的高并发系统，应该如何设计其数据库架构？【石杉的架构笔记】 (opens new window)
可选 Serverless 掀起新的前端技术变革
可选 云计算的三种服务模式：IaaS，PaaS和SaaS
可选 「真®全栈之路」Web前端开发的后端指南 (opens new window)

# 编译器相关

推荐 前端编译原理浅析及应用场景(Babel、PostCSS)分析
推荐 ANTLR 4简明教程 [电子书]
可选 ANTLR [文档]
可选 MiniDecaf 编译实验 [电子书]
可选 antlr4 [库]
可选 grammars-v4 [库]
可选 antlr4ts [库]
可选 riscv-pk [库]
可选 minidecaf [库]
可选 RISC-V GNU Compiler Toolchain [库]
可选 homebrew-riscv [库]
可选 ANTLR：在浏览器中玩语法解析 (opens new window)
可选 深入理解基于RISC-V ISS Spike的仿真系统：探索Spike，pk和fesrv
可选 Antlr4 简介
可选 antlr4-demo
可选 Antlr4简明使用教程
可选 访问者模式及其在 Java Parser 中的应用
可选 Antlr4简易快速入门
可选 用 ANTLR4 和 python 十多行代码写一个计算器
可选 Antlr4 前端应用与实践 (opens new window)
可选 ANTLR：在浏览器中玩语法解析

# 工具

推荐 Google翻译 (Chrome 插件)
推荐 Vue.js devtools (Chrome 插件)
可选 Homebrew [文档]
可选 sindresorhus/emoj: Find relevant emoji from text on the command-line [库]
可选 uTools
可选 WoX
可选 Alfred
可选 O'RLY Cover Generator（书籍封面生成器）
可选 Octotree (Chrome 插件)
可选 马克飞象 (Chrome 插件)
可选 Can I use (查询浏览器兼容性)
可选 ESLint (VS Code 插件)
可选 Prettier (VS Code 插件)
可选 Vuetur (VS Code 插件)
可选 函数图像绘制工具
可选 Desmos
可选 coolors (颜色搭配设计)
可选 ohmyzsh
可选 iterm2
可选 dash
可选 Worktile - 团队协作
可选 图表秀
可选 从前端开发攻城狮的角度打造更好用的 Mac OS
可选 oh-my-zsh让终端好用到飞起~ (opens new window)
可选 简明 VIM 练级攻略

# 算法

可选 《算法导论》答案 [电子书]
可选 目錄：演算法與資料結構 [电子书]
可选 javascript-algorithms [库]
可选 CLRS [库]
可选 MathJax与LaTex公式简介 (转载)
可选 MathJax basic tutorial and quick reference
可选 为什么算法渐进复杂度中对数的底数总为2
可选 前端该如何准备数据结构和算法？ (opens new window)
可选 LeetCode 攻略 - 2019 年 7 月上半月汇总（55 题攻略） (opens new window)

# 小技能

推荐 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代理

# 总结

推荐 2021 JavaScript Rising Stars（包含 2016 年 ~ 2021 年的 Github 明星项目）
推荐 State of JS 2020
推荐 State of JS 2021
可选 16年毕业的前端er在杭州求职ing (opens new window)
可选 我在淘宝做前端的这三年 — 第一年 (opens new window)
可选 我在淘宝做前端的这三年 — 第二年 (opens new window)
可选 我在淘宝做前端的这三年 — 第三年 (opens new window)
可选 阿里前端社招面试总结一位前端 2018 绝地求生记 (opens new window)
可选 今天聊：你晋升失败的原因是什么 (opens new window)
可选 如何成为公司独当一面的工程师 (opens new window)
可选 一名合格的程序员应该是什么样子 (opens new window)
可选 25 岁，毕业写前端的这三年 (opens new window)
可选 第二届搞基建|堂主 - 如何推动前端团队的基础设施建设 (opens new window)
可选 前端API层架构，也许你做得还不够 (opens new window)
可选 if 我是前端Leader，谈谈前端框架体系建设 (opens new window)
可选 有赞开源项目最佳实践 (opens new window)
可选 技术栈：小菜前端的技术栈是如何规划和演进的 (opens new window)
可选 滴滴后市场前端技术体系 (opens new window)
可选 大型项目前端架构浅谈（8000字原创） (opens new window)
可选 前端生产方式：过去 10 年回顾和未来 10 年展望 (opens new window)
可选 2019年前端大事件回顾：流年笑掷，未来可期 (opens new window)
可选 一套比较完整的前端技术选型，需要规整哪些东西，你知道不？ (opens new window)
可选 前端技术全景展望 (opens new window)
可选 前端技术体系大局观
可选 精读《前端未来展望》 (opens new window)
可选 阿里前端委员会主席圆心：未来前端的机会在哪里？
可选 哪些技术会决定前端开发者的未来发展？ (opens new window)

# 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

# 其他资源

推荐 JavaScript engine fundamentals: Shapes and Inline Caches
推荐 JavaScript engine fundamentals: optimizing prototypes
推荐 浏览器是如何工作的：Chrome V8让你更懂JavaScript
推荐 V8 是怎么跑起来的 —— V8 中的对象表示
推荐 V8 blogs [专栏]
可选 V8 at the BlinkOn 6 conference
可选 Google 漫画
可选 Celebrating 10 years of V8（V8 10 周年历史概述）
可选 JavaScript 是如何运行的？ (opens new window)
可选 [译] 揭开 JavaScript 引擎的面纱 (opens new window)
可选 V8 是怎么跑起来的 —— V8 的 JavaScript 执行管道 (opens new window)
可选 初识 JavaScriptCore JIT (opens new window)
可选 C语言目标文件和可执行文件（ELF文件）
可选 JIT Compilation：理解与实现 (opens new window)
可选 AOT,JIT区别，各自优劣，混合编译
可选 深入理解JVM（七）一一执行引擎（解释器和JIT编译器） (opens new window)
可选 编译器和解释器(Compiler and Interpreter) (opens new window)
可选 JIT 编译器快速入门 (opens new window)
可选 JIT-动态编译与AOT-静态编译：java/ java/ JavaScript/Dart乱谈 (opens new window)
可选 JavaScript-V8引擎 (opens new window)
可选 开篇词 | 如何学习谷歌高性能 JavaScript 引擎V8？
可选 走进chrome内心，了解V8引擎是如何工作的
可选 V8有了全新的超快速非优化JS编译器，性能提高5-15％
可选 V8引擎系列（1）：interpreter/compiler pipeline (opens new window)
可选 TurboProp Mid-Tier Compiler
可选 Ignition Design Doc
可选 03 | 快属性和慢属性：V8是怎样提升对象属性访问速度的？
可选 JavaScript 引擎基础：Shapes 和 Inline Caches
可选 V8中的快属性与内联缓存 (opens new window)
可选 V8 中的快慢属性与快慢数组 | Roger Leung‘s Epcot
可选 奇技淫巧学 V8 之一，对象访问模式优化
可选 V8中Speculative Optimization简介
可选 [译] V8引擎中基于推测的优化介绍
可选 JavaScript到底是解释型语言还是编译型语言?
可选 JavaScript 是如何运行的？ (opens new window)
可选 JavaScript：V8编译过程 (opens new window)
可选 认识 V8 引擎
可选 JAVASCRIPT AST VISUALIZER
可选 JavaScript代码是如何被执行的

# 计算机

可选 寄存器和栈的关系
可选 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
可选 正则表达式

902

已收藏

Last Updated: 8/17/2022, 2:15:13 PM