前端进阶 & 面试必备，优质资源、好文整理分享！

前言

前端技术日新月异，随着 大前端 的趋势，想要成为一名合格的前端工程师，需要学习掌握的东西更是宽泛。所以我们在寻求进阶的过程中，既要不断夯实前端基础，也要快速响应技术的更新迭代。闲话少说，这次给大家整理分享一些前端进阶的优质学习资源，希望对大家有所帮助！

个人博客地址 ?? fe-code

github 优质项目

frontend-tech-list

前端技术清单，不论你是正在自学前端，还是对前端某些技术熟练掌握但某些还未涉足，我都希望这份清单能帮助你 review 一些前端的基础能力。

• github

• 前端技术清单
  • 0. 年度报告
  • 1. 基础拾遗
    • 1.1. JavaScript
    • 1.2. CSS
    • 1.3. 浏览器
  • 2. 工程化与工具
    • 2.1. webpack
    • 2.2. Gulp
    • 2.3. Linter
    • 2.4. 静态类型（Typescript/Flow）
    • 2.5. Babel
    • 2.6. CSS预处理与模块化
  • 3. 性能优化
    • 3.1. 加载性能
    • 3.2. 运行时性能
    • 3.3. 前端缓存
    • 3.4. 性能调试与实践
    • 3.5. 性能指标
  • 4. 安全
    • 4.1. XSS
    • 4.2. CSRF
    • 4.3. CSP
    • 4.4. HTTPS
    • 4.5. 安全实录
  • 5. 自动化测试
    • 5.1. 单元测试
    • 5.2. 端到端测试 (E2E)
    • 5.3. 其他
  • 6. 框架与类库
    • 6.1. React
    • 6.2. Vue
    • 6.3. Redux
    • 6.4. RxJS
  • 7. 新技术/方向
    • 7.1. PWA
    • 7.2. CSS Houdini
    • 7.3. Web Components
    • 7.4. 微前端（Micro Frontends）
    • 7.5. HTTP/2
    • 7.6. WebAssembly
  • 8. 业务相关
    • 8.1. 数据打点上报
    • 8.2. 前端监控
    • 8.3. A/B测试
    • 8.4. “服务端推”
    • 8.5. 动效
  • 9. 不归类的好文

CS-Notes

? Tech Interview Guide 技术面试必备基础知识、Leetcode 题解、Java、C++、Python、后端面试、操作系统、计算机网络、系统设计

• github
• 摘要

算法	操作系统	网络	面向对象	数据库	Java	系统设计	工具	编码实践	后记
✏️	?	☁️	?	?	☕️️	?	?	?	?

✏️ 算法

• 剑指 Offer 题解
• Leetcode 题解
• 算法

☁️ 网络

• 计算机网络
• HTTP
• Socket

javascript-algorithms

JavaScript 算法与数据结构。本仓库包含了多种基于 JavaScript 的算法与数据结构。每种算法和数据结构都有自己的 README，包含相关说明和链接，以便进一步阅读 (还有 YouTube 视频) 。

算法是如何解决一类问题的明确规范。算法是一组精确定义操作序列的规则。B - 初学者， A - 进阶

• github

• 摘要

  • B Bit 操控 - set/get/update/clear 位、乘以/除以二进制位 、变负等
  • B 阶乘
  • B 斐波那契数 - 经典 和 闭式 版本
  • B 素数检测 (排除法)
  • B 欧几里得算法 - 计算最大公约数 (GCD)
  • B 最小公倍数 (LCM)
  • B 素数筛 - 查找任意给定范围内的所有素数
  • B 判断 2 次方数 - 检查数字是否为 2 的幂 (原生和按位算法)
  • B 杨辉三角形
  • B 复数 - 复数及其基本运算
  • B 弧度和角 - 弧度与角的相互转换
  • B 快速算次方
  • A 整数拆分
  • A 割圆术 - 基于 N-gons 的近似 π 计算
  • A 离散傅里叶变换 - 把时间信号解析成构成它的频率

30-seconds-of-code

精选 JavaScript 代码段集合，您可以在30秒或更短的时间内理解这些代码段

• github

• 摘要

  ? Array

  View contents
  • all
  • allEqual
  • any
  • arrayToCSV
  • bifurcate
  • bifurcateBy
  • chunk
  • compact
  • countBy
  • countOccurrences
  • deepFlatten
  • difference
  • differenceBy
  • differenceWith
  • drop
  • dropRight
  • dropRightWhile
  • dropWhile
  • everyNth
  • filterFalsy
  • filterNonUnique
  • filterNonUniqueBy
  • findLast
  • findLastIndex
  • mapObject
  • maxN
  • minN
  • none

  ? Browser

  View contents
  • arrayToHtmlList
  • bottomVisible
  • copyToClipboard
  • counter
  • createElement
  • createEventHub
  • currentURL
  • detectDeviceType
  • elementContains
  • elementIsVisibleInViewport
  • formToObject
  • getImages
  • getScrollPosition
  • getStyle
  • hasClass
  • hashBrowser
  • hide

javascript-questions

JavaScript 进阶问题列表，从基础到进阶，测试你有多了解 JavaScript，刷新你的知识，或者帮助你的 coding 面试！ ? ? 我每周都会在这个仓库下更新新的问题。

• github

• 摘要

  • 1. 输出是什么？

  function sayHi() {
  console.log(name)
  console.log(age)
  var name = 'Lydia'
  let age = 21
  }
  
  sayHi()
  

  • A: Lydia 和 undefined
  • B: Lydia 和 ReferenceError
  • C: ReferenceError 和 21
  • D: undefined 和 ReferenceError
  答案

  答案: D

  在函数内部，我们首先通过 var 关键字声明了 name 变量。这意味着变量被提升了（内存空间在创建阶段就被设置好了），直到程序运行到定义变量位置之前默认值都是 undefined。因为当我们打印 name 变量时还没有执行到定义变量的位置，因此变量的值保持为 undefined。

  通过 let 和 const 关键字声明的变量也会提升，但是和 var 不同，它们不会被初始化。在我们声明（初始化）之前是不能访问它们的。这个行为被称之为暂时性死区。当我们试图在声明之前访问它们时，JavaScript 将会抛出一个 ReferenceError 错误。

  ---

  • 2. 输出是什么？

  for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1)
  }
  
  for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1)
  }
  

  • A: 0 1 2 和 0 1 2
  • B: 0 1 2 和 3 3 3
  • C: 3 3 3 和 0 1 2
  答案

  答案: C

  由于 JavaScript 的事件循环，setTimeout 回调会在遍历结束后才执行。因为在第一个遍历中遍历 i 是通过 var 关键字声明的，所以这个值是全局作用域下的。在遍历过程中，我们通过一元操作符 ++ 来每次递增 i 的值。当 setTimeout 回调执行的时候，i 的值等于 3。

  在第二个遍历中，遍历 i 是通过 let 关键字声明的：通过 let 和 const 关键字声明的变量是拥有块级作用域（指的是任何在 {} 中的内容）。在每次的遍历过程中，i 都有一个新值，并且每个值都在循环内的作用域中。

  ---

Daily-Interview-Question

每天搞定一道前端大厂面试题，祝大家天天进步，一年后会看到不一样的自己。

• github
• 摘要

2019-07-26

第 114 题：编程题，找出字符串中连续出现最多的字符和个数（蘑菇街）

'abcaakjbb' => {'a':2,'b':2}
'abbkejsbcccwqaa' => {'c':3}

解析：第 114 题

2019-07-25

第 113 题：编程题，根据以下要求，写一个数组去重函数（蘑菇街）

1. 如传入的数组元素为[123, "meili", "123", "mogu", 123]，则输出：[123, "meili", "123", "mogu"]

2. 如传入的数组元素为[123, [1, 2, 3], [1, "2", 3], [1, 2, 3], "meili"]，则输出：[123, [1, 2, 3], [1, "2", 3], "meili"]

3. 如传入的数组元素为[123, {a: 1}, {a: {b: 1}}, {a: "1"}, {a: {b: 1}}, "meili"]，则输出：[123, {a: 1}, {a: {b: 1}}, {a: "1"}, "meili"]

解析：第 113 题

learnVue

Vue.js 源码解析

• github

vue-design

渲染器，仓库内还有一个针对 Vue 的逐行级别的源码分析，都是干货。

• github
• 目录列表
  • 组件的本质
  • 设计 Vnode
  • 辅助创建 VNode 的 h 函数
  • 渲染器之挂载
  • 渲染器之 patch
  • 渲染器的核心 Diff 算法
  • 自定义渲染器和异步渲染

CS-Interview-Knowledge-Map

前端面试图谱

• github
• 线上地址

react-interpretation

React 源码解析。通过两个部分来完成这个解析：第一是加上这份代码的中文注释，第二是配套相应的文章。

• github

Front-end-Web-Development-Interview-Question

这里将收集我做过的所有的前端面试笔试题，并根据自己的理解提供解答，以及一些关于前端找工作方面的经验等。

• github
• 摘要

试题链接	原题概述	标签分类	更新状态
1.md	Front End Web Development Quiz CSS部分	CSS	已完结 ✌️
2.md	Front End Web Development Quiz HTML部分	HTML	已完结 ✌️
3.md	FEX 面试题	General	待完善 ?
4.md	前端面试常见问题	General	待完善 ?
5.md	前端面试HTML 相关问题	HTML	已完结 ✌️

高级前端进阶

每周重点攻克一个前端面试重难点

• github
• 摘要
  • 【进阶 1-1 期】理解JavaScript 中的执行上下文和执行栈
  • 【进阶 1-2 期】JavaScript深入之执行上下文栈和变量对象
  • 【进阶 1-3 期】JavaScript深入之内存空间详细图解
  • 【进阶 1-4 期】JavaScript深入之带你走进内存机制
  • 【进阶 1-5 期】JavaScript深入之4类常见内存泄漏及如何避免

前端工匠

努力打造一系列适合初中级工程师能够看得懂的优质文章

• github
• 摘要
  浏览器相关
  1.深入浅出浏览器渲染原理
  2.深入了解浏览器存储
  3.深入理解浏览器的缓存机制
  4.从URL输入到页面展现到底发生什么？
  Javascript
  1.前端模块化详解(完整版)
  2.九种跨域方式实现原理（完整版）
  4.JavaScript数据类型转换
  5.深入理解JavaScript作用域和作用域链

libpku

github 上大学系列

• github
• 摘要
  • 浙江大学课程攻略共享计划
  • 气垫船计划——免费、去中心化的北京大学往年题资料库
  • 北京大学信科学生会学术部资料库
  • 北大计算机课程大作业
  • 清华大学计算机系课程攻略
  • 东南大学课程共享计划
  • 中国科学技术大学计算机学院课程资源
  • 上海交通大学课程资料分享
  • 中山大学课程资料分享
  • 南京大学课程复习资料
  • 郑州大学课程复习资料

weekly

前端精读周刊

• github
• 摘要
  • 精读 js 模块化发展
  • 精读模态框的最佳实践
  • 精读《编写有弹性的组件》
  • 精读《React Hooks》
  • 精读《React 代码整洁之道》

mobileHack

这里收集了许多移动端上遇到的各种坑

• github

• 摘要
  移动Web单页应用开发实践——页面结构化

  移动Web产品前端开发口诀——“快”

  移动Web开发，4行代码检测浏览器是否支持position:fixed

  使用border-image实现类似iOS7的1px底边

  移动端web页面使用position:fixed问题总结

underscore-analysis

underscore-1.8.3.js 源码解读 & 系列文章

• github

awesome-vue

与Vue.js相关的各种文章合集

• github

free-programming-books-zh_CN

? 免费的计算机编程类中文书籍

• github

airbnb/javascript

JavaScript 风格指南

• github

其他推荐

文章

• CSS 规范中文翻译
• CSS3 教程
• iCSS - 不止于 CSS
• 图说设计模式
• 浏览器渲染原理
• 手把手教你撸一个简易的 webpack
• 带你走进webpack世界，成为webpack头号玩家。
• webpack4-用之初体验，一起敲它十一遍
• 基于Webpack搭建React开发环境
• [译] JavaScript 如何工作：对引擎、运行时、调用堆栈的概述
• 深度剖析：如何实现一个 Virtual DOM 算法
• 大型项目前端架构浅谈（8000字原创）
• 网站性能优化实战——从12.67s到1.06s的故事
• 前端 100 问：能搞懂 80% 的请把简历给我
• 手摸手，带你用vue撸后台 系列
• 剖析Vue实现原理 - 如何实现双向绑定mvvm
• 冴羽的 JavaScript 系列

书籍

• JS 函数式编程指南
• 你不知道的 JS
• ECMAScript 6 入门
• JavaScript 正则表达式迷你书
• 《图解 HTTP》
• 《HTTP 权威指南》
• 《重构-改善既有代码的设计》
• 《Javascript 高级程序设计》
• 《Javascript 权威指南》
• 《JavaScript 函数式编程》
• 《JavaScript 设计模式与开发实践》
• 《学习 JS 数据结构与算法》
• 《CSS 世界》
• 《CSS 揭秘》
• 《深入浅出Node.js》
• 《代码整洁之道》
• 《忍者秘籍》
• 《剑指 offer》

视频

更多视频资料大家可以关注公众号 — 前端发动机，回复 “学习”，即可获得丰富视频类学习资料。

交流群

qq前端交流群：960807765，欢迎各种技术交流，期待你的加入；

微信群：有需要的同学可以加我好友（q1324210213），我拉你入群。

后记

如果你看到了这里，且本文对你有一点帮助的话，希望你可以动动小手支持一下作者，感谢?。文中如有不对之处，也欢迎大家指出，共勉。好了，又耽误大家的时间了，感谢阅读，下次再见！

• 文章仓库 ??fe-code
• 社交聊天系统（vue + node + mongodb）- ???Vchat

往期文章：

• 【从头到脚】前端实现多人视频聊天— WebRTC 实战（多人篇）
• 【从头到脚】WebRTC + Canvas 实现一个双人协作的共享画板 | 掘金技术征文
• 【2019 前端进阶之路】深入 Vue 响应式原理，从源码分析
• 【2019 前端进阶之路】Vue 组件间通信方式完整版

感兴趣的同学可以关注下我的公众号 前端发动机，好玩又有料。