liaozq009 / FE_ROAD

现代前端基础知识点

JS基础及进阶

• 《Javascript 高级程序设计》至少完整读一遍，第一遍至少用一个月、最好三遍，。每一遍都会有不同的收获，对每一章内容尝试画出思维导图。

• 《你不知道的JavaScript》 系列

• web-fundamentals

• ECMAScript 6 入门

• 深入浅出E6 ES6 in Depth

• javascript garden

• es6 学习总结

• Generator 函数的含义与用法

• 理解 JavaScript 的 async/await

• 体验异步的终极解决方案-ES7的Async/Await

• 传统 Ajax 已死，Fetch 永生

• 面向对象的JavaScript编程：原理与实践

• JavaScript标准参考教程 Ecmascript DOM BOM 基础

• 前端基础进阶系列

• 前端进阶博客

• es6-features.org

• 读书笔记-你不知道的JavaScript(上)

• 这一次，彻底弄懂 JavaScript 执行机制

• 深入理解javascript原型和闭包系列

• 深入理解浏览器渲染原理：Repaint, Reflow

• JavaScript 模块演化简史

• JavaScript是如何工作的：内存管理 + 如何处理4个常见的内存泄漏

• Canvas 最佳实践（性能篇）

• 非常有用的 48 个 JavaScript 代码片段

• JavaScript函数式编程指南

• JavaScript函数式编程

• javascript柯利化

• 采用MVC模式创建一个简单的javascript App

• 合格的前端系列

• 前端知识汇总

• Javascript有个Unicode的天坑

• ES6走走看看—字符到底发生了什么变化

• Unicode与JavaScript详解

• JavaScript内存泄露和CSS优化相关序列文章

• JavaScript深入系列

• 前端进阶系列

• JavaScript Timers: Everything you need to know

Event Loop

• 深入理解 JavaScript Event Loop
• 从Promise来看JavaScript中的Event Loop、Tasks和Microtasks
• 从Promise来看JavaScript中的Event Loop、Tasks和Microtasks
• 菲利普·罗伯茨：到底什么是Event Loop呢
• Event loop in JavaScript
• 不要混淆nodejs和浏览器中的event loop
• Event Loop

前端库/框架

react （react 版本更新较快，有些设计变动较大，主要是理解**吧）

• react 官网 官网中文版
• react 组件生命周期
• React教程
• React.js 小书
• React 性能优化大挑战
• 虚拟 DOM 内部是如何工作的
• IMMUTABLE 详解
• 重新设计 React 组件库
• 从工程化角度讨论如何快速构建可靠React组件
• React 源码剖析系列 不可思议的 react diff
• 虚拟DOM Diff算法解析
• React 的 diff 算法
• react精髓之一---diff算法
• React 源码剖析系列 － 不可思议的 react diff
• react源码系列
• React 要出新 Context API 了
• React 组件解耦之道
• 深入理解react（源码分析）
• React源码解析
• React 设计中的闪光点
• React 底层揭秘
• 40 行代码内实现一个 React.js

vue

• Vue -渐进式JavaScript框架
• 读懂源码：一步一步实现一个 Vue
• Vue 源码注释版 及 Vue 源码详细解析
• Vue原理解析之Virtual Dom
• Vue原理解析之observer模块
• vue源码解析系列
• vue源码分析
• Vue技术内幕逐行级别的 Vue 源码分析
• Vue.js 技术揭秘

小程序开发

• 官方文档
• mpvue 基于 Vue.js 的小程序开发框架
• WePY | 小程序组件化开发框架

jQuery

• jQuery源码解析（架构与依赖模块）
• jQuery源码解析（DOM与核心模块）
• 【深入浅出jQuery】源码浅析--整体架构
• 【深入浅出jQuery】源码浅析2--奇技淫巧

lodash/underscore(这两个框架功能一样实现不同)

• underscore中文文档
• underscore英文文档
• Underscore源码解析1
• Underscore源码解析2
• Underscore源码解析3
• Underscore源码解析4
• underscore-1.8.3.js 源码解读 & 系列文章

图表可视化

• echart

状态管理库

• redux
• vuex 技术胖的vuex视频教程
• Vuex 学习总结
• mobx

webpack

• 入门Webpack，看这篇就够了
• webpack中文文档
• Webpack 教程
• 使用 webpack3 配置多页应用
• 深度解析create-react-app源码
• React配合Webpack实现代码分割与异步加载
• 前端面试之webpack篇
• webpack面试题有哪些

设计模式

• JavaScript设计模式
• 常用的javascript设计模式

HTTP

• 软件工程师需要了解的网络知识：从铜线到HTTP（一）—— 前言
• 软件工程师需要了解的网络知识：从铜线到HTTP（二）—— 以太网与交换机
• 软件工程师需要了解的网络知识：从铜线到HTTP（三）—— TCP/IP
• 软件工程师需要了解的网络知识：从铜线到HTTP（四）—— TCP 和路由器
• 软件工程师需要了解的网络知识：从铜线到HTTP（五）—— HTTP 和 HTTPS
• 浏览器HTTP缓存机制
• Cookie/Session机制详解
• 浅谈Web缓存
• 我知道的跨域与安全
• 你知道一次HTTP请求响应涉及了哪些知识吗？
• HTTP状态码->HTTP Status Code
• Https的前世今生
• 一篇文章带你详解 HTTP 协议（网络协议篇一） 一篇文章带你熟悉 TCP/IP 协议（网络协议篇二）

前端监控 与性能优化

• 输入url之后 流程图
• 从无到有 <前端异常监控系统 > 落地
• 使用HMTL5 API监控前端性能
• 浏览器端JS异常监控探索与实践
• 前端数据监控到底在监控什么？

NodeJS

• Node进阶

• Node.js调试指南

• 深入浅出NodeJS

• nodeJS 学习笔记

• Node.js 知多少

• express

• koa进阶学习

• NodeJS调试指南

• Node.js 子进程：你需要知道的一切

• 《深入理解Node.js：核心**与源码分析》

• 使用 Google V8 引擎开发可定制的应用程序

• node源码详解

• Node.js挖掘

• node 源码粗读系列

• Node.js 流: 你需要知道的一切

• Node.js 子进程：你应该知道的一切

WebAssembly

• 来谈谈WebAssembly是个啥？为何说它会影响每一个Web开发者
• WebAssembly 系列（一）生动形象地介绍 WebAssembly
• WebAssembly 系列（二）JavaScript Just-in-time (JIT) 工作原理
• WebAssembly 系列（三）编译器如何生成汇编
• WebAssembly 系列（四）WebAssembly 工作原理
• WebAssembly 系列（五）为什么 WebAssembly 更快？
• WebAssembly 系列（六）WebAssembly 的现在与未来
• WebAssembly 那些事儿
• 《C/C++面向WebAssembly编程》——Emscripten工程实践 https://3dgen.cn/cppwasm-book
• WebAssembly(wasm)资源精选
• WebAssembly 后 MVP 时代的未来：卡通技能树
• 在 JavaScript 和 WebAssembly 之间调用执行速度终于快了
• WebAssembly 系列（第一部分） - 用卡通形式介绍 WebAssembly
• WebAssembly 系列（第二部分） - 即时编译器（JIT）速成课
• WebAssembly 系列（第三部分） - 汇编（assembly）速成课

TypeScript

• 深入理解TypeScript
• TypeScript Handbook（中文版）
• typescript入门教程

Go

• GO高级语言编程
• Go语言圣经中文版

hybrid

• Hybrid APP基础篇(一)->什么是Hybrid App
• Hybrid APP基础篇(二)->Native、Hybrid、React Native、Web App方案的分析比较
• Hybrid APP基础篇(三)->Hybrid APP之Native和H5页面交互原理
• Hybrid APP基础篇(四)->JSBridge的原理*
• 浅谈Hybrid技术的设计与实现
• 浅谈Hybrid技术的设计与实现第二弹
• 浅谈Hybrid技术的设计与实现第三弹——落地篇
• Hybrid App技术解析 -- 原理篇
• Hybrid App技术解析 -- 实战篇

react native

• 如何评价reactnative

Flutter

• http://flutter-dev.cn/
• https://flutter-io.cn/
• https://flutterchina.club/
• https://juejin.im/tag/Flutter
• SDK
• Flutter 跨平台移动应用开发实战
• awesome-flutter
• flutter-community
• FLutter实战

数据结构和算法

• 数据结构基础(北京大学)
• 算法基础(算法基础)
• Leetcode 题解
• 剑指Offer——名企面试官精讲典型编程题
• 七月在线算法公开课
• 编程之法
• 数据结构和算法 掌握线性表(队列、栈、链表)，二叉树,了解多叉树和图
• javascript-algorithms
• LeetCode with Javascript
• awesome-algorithm

服务端渲染 (了解即可)

• 教你如何搭建一个超完美的服务端渲染开发环境
• 为什么现在又流行服务端渲染html？

其他工具

• Chrome 开发者工具使用
• GitHub&Git入门基础 版本管理工具介绍—Git篇
• 移动应用抓包调试利器Charles
• Linux达人养成计划I
• Linux 达人养成计划 II
• Linux Guide for Developers
• vi编辑器的使用
• nginx 初始
• nginx 基本入门
• Nginx 的缓存配置与其他配置
• caniuse jsperf Can I Use是一个检测浏览器对JS、HTML5、CSS、SVG或者其他Web前端相关特性支持程度的列表。可以检测的浏览器包括桌面和移动版的主流浏览器：IE, Firefox, Chrome, Safari和 Opera等 你可以从列表中直接查看某个特性相关的浏览器支持程度，或者搜索
• 使用Benchmark.js和jsPerf分析代码性能

CSS

• 移动前端开发之viewport的深入理解
• 使用Flexible实现手淘H5页面的终端适配
• 再聊移动端页面的适配
• 通过动图形象地为你介绍 flexbox 是如何工作的
• 【原创】移动端高清、多屏适配方案

单元测试

• Node.js 单元测试：我要写测试
• 测试框架 Mocha 实例教程
• 用Mocha和Chai对JavaScript进行单元测试
• 理解前端开发中的 unit test 和 e2e test
• E2E 测试之 Cypress
• Puppeteer: 更友好的 Headless Chrome Node API
• headless浏览器 Puppeteer 初探

面试

• 写给前端面试者

• 前端面试题整理（定期更新

• 各大互联网公司前端笔试面试题–HTML,CSS篇

• 前端 2018 届校招笔试面经【百度，阿里，腾讯，阿里文娱，携程，美团，拼多多】

• 前端面试那些坑之HTML篇

• 前端面试题整理

• web前端面试题整理（CSS篇）

• 大厂前端面试考什么

• 2017年秋季校招前端面经（百度，腾讯，网易，华为，乐视等）

• 2018春招前端面试: 闯关记

• 轮播实现

• 2019年前端面试都聊啥？一起来看看

• 图片懒加载、按需加载 网页图片加载优化方案

• 前端路由实现原理

• 双向绑定实现

• canvas与svg区别

• margin折叠

• 观察者模式实现(事件模式)

• 实现 querystring 解析

• fastclick 原理

    var str = 'foo=bar&abc=xyz&abc=123';
    querystring.parse(str)
    // { foo: 'bar', abc: [ 'xyz', '123' ] }
  

• 函数节流 7 个基本的 JS 函数

• 红绿灯

• 50道CSS基础面试题

• CSS 一像素解决方案

• Promise 实现

• 使用Vue的nextTick引发的执行顺序之争

• JavaScript 异步、栈、事件循环、任务队列

• BAT及各大互联网公司2014前端笔试面试题--JavaScript篇

• 编程面试的10大算法概念汇总

• 前端面试——css篇

• 算法 快速排序、判断回文、数组去重、寻找最长回文串、判断一个数是不是2的幂

• 前端常见算法

• 剑指offer算法题

• 全排列 全排列

• 征服JavaScript面试系列：类继承和原型继承的区别

• 只有20行Javascript代码！手把手教你写一个页面模板引擎

• 前端面试之webpack篇

• webpack面试题有哪些

• 牛客网前端面经

• Front End Interview Handbook

• 面试题

web性能优化

正则表达式

• 正则表达式30分钟入门教程
• https://regexr.com/
• JavaScript正则进阶之路——活学妙用奇淫正则表达式
• 正则表达式-MDN

其他

• DOM 导图
• DOM API
• BOM API

Reactive

• What is Reactive Programming?
• Functional Reactive Programming
• 响应式编程介绍
• Reactive编程（一）:Reactive编程的背景
• Reactive编程（二）:代码演示
• Reactive编程（三）:一个简单的HTTP服

RX.js

• RxJS 入门指引和初步应用
• 通俗的方式理解RxJS
• RxJS: 简单入门
• Rxjs--基础篇
• RXJS详解
• 构建流式应用—RxJS详解
• 异步事件管理：从Promise与async/await到RxJS

系统设计

• 系统设计入门

• DOM 继承关系

浏览器缓存

• 性能优化

基础书籍推荐

• 深入理解计算机系统
• 操作系统之哲学原理
• 图解TCP/IP
• 算法导论
• web性能权威指南
• 人类简史
• 未来简史
• 系统化思维导论
• 代码整洁之道
• 从小工到专家 程序员修炼之道
• 重构
• 设计模式 GOF
• 数学之美
• 编程之美

React Native 、Weex