description
帮助前端工程师们夯实技术以通过一线互联网企业面试

前端内参

阅读本书：https://coffe1891.gitbook.io/frontend-hard-mode-interview/
Github仓库：https://github.com/coffe1891/frontend-hard-mode-interview

本书更多着笔于深层理论上的探索，所涉及的内容多是经过时间洗礼后的沉淀。
然而前端技术日新月异，我也在不断学习与时俱进，因此疏漏之处在所难免，欢迎朋友们随时@提建议，我将及时改进。

QQ群 308689488，微信 kenny2019

1.本书适合至少三年前端工作经验的朋友阅读。
2.如果书里文章的图片显示不了，开翻墙工具、或者多刷几遍就好。
3.阅读本书尽量去上面的gitbook地址，gitbook导航更清晰，图片也不会出现显示错位。

前言

如何在Hard模式下通过一线互联网公司的面试？相信很多程序员朋友都有过这个困扰。其实答案很简单：首先应努力成为一个好的程序员，然后入职一线互联网公司只是顺路的事。

然后你可能会吐槽：“前端知识已经爆炸，今天这个框架明天那个库的，天天有新玩意儿，我实在学不动了！”是的，前端知识早已大爆炸，新东西层出不穷，如果只是靠蛮力一样一样地去学习，那么连笔者我也学不动了😂 。怎么办呢？别慌，其实前端学习是有窍门的。本书归纳了前端的核心知识点，日拱一卒地坚持学习，系统地掌握这些知识点之后，相信很快你也能和我一样可以做到以不变应万变，以小变应大变，并对新的前端知识很快领悟、吃透！

作为一个老程序员，coding已经成为生命的一部分，coding到八十岁是我的理想，而JavaScript是我挚爱的语言。自从2010年出版个人第一本互联网技术书籍后，便再也没有时间可以写系统性论述技术的著作。因为后来加入奇虎360和百度这两家一线互联网公司，从事前端与手机客户端技术性工作，并主持研发了亿级用户的手机APP，这期间相当繁忙。而在进入360和百度之前，记得那年是2011年，创业公司彻底倒闭，我失业了。实在没办法，为了谋生打算找一份工作。当时是计划入职一线互联网公司，做感兴趣的前端(Front-End)coding。因为毕业后折腾创业，虽有一些技术但是不够系统化，而且缺乏职业化的工作经历，求职时是有点尴尬的，一线互联网公司似乎不太乐意接受这种情况，面试之旅已然进入Hard模式。面对逆境，我希望通过用扎实的技术功底和丰富的实战经验来打动雇主。

在复习/学习期间，我查阅了国外和国内大量的一手文档资料，发现原始的资料相对少，即使有原始的资料也是论文式的，对英语阅读能力有非常大的挑战。而国内的资料大多数有错漏、不完整：首先是翻译问题非常大，术语翻译错误、译文表意模棱两可、原文内容翻译不完整，让人看了更加迷惑不解；国内网上的文章，绝大多数缺乏系统化论述，知识点分散零碎，而且有很多代码错误……各种原因，对自己的学习过程造成了不少困扰。

综上，感同身受求知之不易，因此多年后（2019年）有了闲暇便立即着手整理并分享本书，把前端知识和前端面试要点梳理一遍，供前端的朋友们复习与进阶的参考。每章开头用心地以写上本章导读，方便阅读前参考。

如果我能通过自身努力最终能达成入职一线互联网公司的目标，那么更年轻、更健康和更聪明的程序员朋友们只会做得更好。加油吧，奥力给！

嗯，目前还正在持续更新，许多章节会陆续“点亮”的 ❤ 。

一线互联网公司面试前的准备
- 一线互联网公司有什么不同？
- 该公司是做什么的，实力、前景、口碑怎样？
- 该岗位负责做什么的，岗位所属部门在什么位置，上升空间多大？
- 准备一份好的简历 updating…
- 不卑不亢、不疾不徐地说话
- “有什么问题要问我吗”，如何回答？

壹、前端之灵：JavaScript/ECMAScript

你需要知道的新东西
- 新版 ECMAScript 特性分析
- JavaScript未来性能优化的方向
核心概念
容易被问到的知识点
- 深拷贝与浅拷贝
- JavaScript函数柯里化
- 理解WeakSet/WeakMap中对象的弱引用
- Proxy的各种用法
- 用JavaScript实现类、继承
浏览器、V8引擎
- 网页被浏览器绘出来过程是怎样的？
- 页面重排（Reflow）与重绘（Repaint)
- DOM、Shadow DOM、Virtual DOM updating…
- V8引擎是如何工作的
- V8引擎内存管理和垃圾回收机制
相关的后端知识点
- 为什么要创造服务器端的javascript—Node.js？
- 了解TCP、UDP、TLS
- Http协议几个版本的区别
- Http和Https的区别在哪里
- XSS与CSRF
书籍推荐
- 你读过哪些Javscript书籍 外链

贰、数据结构与算法

面试时高频率出现的算法
- 十大排序算法updating…
- 单调栈
- 二叉树的遍历
- 二叉树中的最大路径和
- 实战：字节跳动前端面试2道算法题
- 分治法、动态规划与贪心算法的区别
- 实战：阿里巴巴前端面试算法题 updating…
其他经典算法
- 尾递归:面试官问你斐波那契数列的时候不要太高兴 外链
好书推荐
- 《学习JavaScript数据结构与算法》外链

叁、主流框架

综合比较
- jQuery相对现在流行的库而言过时了吗？
- 开发跨平台app推荐React Native还是flutter？
- Angular和Vue.js深度对比
Vue.js
- Vue.js源码解读：Vue数据响应式原理
- Vue.js带来的一些新问题以及解决办法探索
Angular.js
- 你真的懂Angular.js吗？
- Angular.js性能优化要点
React
- 面试官高频问到的一些实现原理
- React的性能优化技巧
flutter
- flutter开发初体验
好书推荐
- 《深入浅出Vue.js》外链
- 《深入React技术栈》外链

肆、动效

动效应用的场景
- 不要拒绝设计小姐姐的要求
- 有效的引导用户
- 让页面拥有生命力
css3动画基础
- transition过渡
- animation动画
css3动画实践
- 弹窗
- 逐帧动画
- 悬浮按钮
- 广告动画
- 3D动画
canvas
- 画布的基本功能
- 分享到朋友圈的预览图制作
- 飞机大战小游戏
webgl
- 3d的基础知识
- 谁都会做的全景图
- 3d跑酷小游戏

伍、必会的工具

Webpack-自动打包模块工具
- 深入理解Webpack打包
- 常用的脚手架
API文档管理
- 用Swagger解决API文档更新的烦恼
IDE-工欲善其事必先利其器
- 高效使用VSCode的10点建议
- 适用于前端开发者的20个VSCode插件
- Sublime Text

陆、设计原则与编程范式

设计原则
- 单一职责
- 最少知识
- 开放-封闭
- 面向接口编程
- 代码重构
面向对象编程（OOP）
- 面向对象与面向过程有什么区别？
- 面向对象编程的弊端是什么？
- 重新认识JavaScript面向对象: 从ES5到ES6 updating…
函数式编程
- 什么是函数式编程？
- JavaScript的函数式编程探索
- Pointfree无参数风格编程 updating…
响应式编程
- 什么是响应式编程？
- RxJS
好书推荐
- 《重构》外链

柒、设计模式和软件工程

面试时很容易聊到的十四种经典设计模式
- 单例模式
- 策略模式
- 代理模式
- 迭代器模式
- 发布-订阅模式
- 命令模式
- 组合模式
- 模板方法模式
- 享元模式
- 职责链模式
- 中介者模式
- 装饰者模式
- 状态模式
- 适配器模式
浅谈软件工程：MVC、MVP、MVVM
- MVC的前世今生 updating…
- MVP又是什么？
- 有了MVC和MVP，为什么还要MVVM？

捌、很有用的网站

中文站-Mozilla大宝库 外链 最全的Web相关参考文档,没有之一
英文站-StackOverflow 外链 掌握了四级英语就能向老外提问交流了,解决疑难杂症必上
中文站-Vue.js手册 外链 手册在手,玩转Vue不愁
英文-Vue资源大全 外链 超级多的资源,总能找到你喜欢的那款

玖、公众号&博客推荐

一线互联网公司官方前端公众号
知名前端博客

拾、后记

前端展望：百川奔流直入海
成为一个好的程序员远比找份好工作重要

贡献者

这本开源书得到了朋友们的建议和代码贡献，非常感谢！让我们一起帮助更多的人。以下是代码贡献者的清单（排名不分先后）：

thales-jiang

版权许可

本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可，只要保持原作者署名和非商用，您可以自由地阅读、分享、修改本书。

webYouth/frontend-hard-mode-interview