# 首页·前端内参

[![支持我](https://img.shields.io/github/stars/coffe1891/frontend-hard-mode-interview?style=social)](https://github.com/coffe1891/frontend-hard-mode-interview/)

![封面](https://tva1.sinaimg.cn/large/007S8ZIlgy1gfyj8fmwm1j30zk0hs770.jpg)

【阅 读 本 书】[https://coffe1891.gitbook.io/frontend-hard-mode-interview](https://coffe1891.gitbook.io/frontend-hard-mode-interview/)\
【讨论本书】<https://github.com/coffe1891/frontend-hard-mode-interview/discussions>\
【作者微信】GZKXS1891（请注明"前端内参"）\
【QQ交流群】308689488（也可以扫上图二维码）

如果觉得有帮助请点右上角的**Star**支持我不断更新。

> 1. 本书较多着笔于深层理论上的论述，辅有代码示例，适合至少三年前端工作经验的朋友阅读。
> 2. 尽量访问上面的GitBook地址，导航更清晰，图片也不会出现显示错位，并且支持手机模式。
> 3. 如果书里文章的图片显示不了，开启科学上网工具、多刷几遍就好。

前端技术日新月异，我也在不断学习，因此疏漏之处在所难免，欢迎朋友随时[@提建议](https://github.com/coffe1891/frontend-hard-mode-interview/discussions)，我将及时改进。

## 前言

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

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

→ [更多前言 · 写给有缘人](https://github.com/coffe1891/frontend-hard-mode-interview/blob/master/0.0.1.md)

## 目录

### 零、准备Hard模式下的面试

1. 一线互联网公司面试前的准备
   * [一线互联网公司有什么不同？](https://coffe1891.gitbook.io/frontend-hard-mode-interview/broken-reference)
   * [该公司是做什么的、实力、前景、口碑怎样？](https://coffe1891.gitbook.io/frontend-hard-mode-interview/broken-reference)
   * 该岗位负责做什么的、岗位所属部门在什么位置、上升空间多大？
   * [准备一份好的简历？](https://coffe1891.gitbook.io/frontend-hard-mode-interview/broken-reference)
   * [不卑不亢、不疾不徐地说话](https://coffe1891.gitbook.io/frontend-hard-mode-interview/broken-reference)
   * ["有什么问题要问我吗"、如何回答？](https://coffe1891.gitbook.io/frontend-hard-mode-interview/broken-reference)

### 壹、前端之灵：JavaScript/ECMAScript

1. 你需要知道的新东西
   * [新版 ECMAScript 特性分析？](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-1/1.-ni-xu-yao-zhi-dao-de-xin-dong-xi/1.1.1)
   * JavaScript的未来？
2. 核心概念
   * [函数](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-1/2.-he-xin-gai-nian/1.2.1)
   * [作用域、执行上下文、作用域链](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-1/2.-he-xin-gai-nian/1.2.2)
   * [彻底搞懂 this](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-1/2.-he-xin-gai-nian/1.2.3)
   * [深入理解 call、apply、bind](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-1/2.-he-xin-gai-nian/1.2.4)
   * [面试时高频问到的"闭包"](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-1/2.-he-xin-gai-nian/1.2.5)
   * [原型、原型链](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-1/2.-he-xin-gai-nian/1.2.6)
   * [同步、异步，阻塞、非阻塞](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-1/2.-he-xin-gai-nian/1.2.7)
   * [Event Loop](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-1/2.-he-xin-gai-nian/1.2.8)
   * [强大的数组](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-1/2.-he-xin-gai-nian/1.2.9)
   * [正则表达式](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-1/2.-he-xin-gai-nian/1.2.10)
   * [位操作符、进制转换](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-1/2.-he-xin-gai-nian/1.2.11)
   * [rest、spread操作符](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-1/2.-he-xin-gai-nian/1.2.12)
   * [实现异步非阻塞的任务](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-1/2.-he-xin-gai-nian/1.2.13)
   * [模块化开发](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-1/2.-he-xin-gai-nian/1.2.14)
3. 其他知识点
   * [深拷贝、浅拷贝](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-1/3.-qi-ta-zhi-shi-dian/1.3.1)
   * [JavaScript函数柯里化](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-1/3.-qi-ta-zhi-shi-dian/1.3.2)
   * [JavaScript元编程：Proxy、Reflect](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-1/3.-qi-ta-zhi-shi-dian/1.3.3)
   * [JavaScript中的进程、线程、协程](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-1/3.-qi-ta-zhi-shi-dian/1.3.4)
4. 浏览器、V8引擎
   * 网页被浏览器绘制出来过程是怎样的？
   * [页面重排（Reflow）、重绘（Repaint）](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-1/4.-liu-lan-qi-v8-yin-qing/1.4.2)
   * [DOM、Shadow DOM、Virtual DOM](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-1/4.-liu-lan-qi-v8-yin-qing/1.4.3)
   * [V8引擎是如何工作的？](https://github.com/coffe1891/frontend-hard-mode-interview/blob/master/1/1.4.4.md)
   * [V8引擎内存管理、垃圾回收机制](https://github.com/coffe1891/frontend-hard-mode-interview/blob/master/1/1.4.5.md)
5. 相关后端知识、通信协议、安全
   * 为什么要创建服务器端的JavaScript——Node.js？
   * [了解TCP、UDP、TLS](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-1/5.-xiang-guan-hou-duan-zhi-shi-tong-xin-xie-yi-an-quan/1.5.2)
   * [HTTP协议几个版本的区别？](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-1/5.-xiang-guan-hou-duan-zhi-shi-tong-xin-xie-yi-an-quan/1.5.3)
   * [HTTP、HTTPS的区别在哪里？](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-1/5.-xiang-guan-hou-duan-zhi-shi-tong-xin-xie-yi-an-quan/1.5.4)
   * [XSS、CSRF攻击](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-1/5.-xiang-guan-hou-duan-zhi-shi-tong-xin-xie-yi-an-quan/1.5.5)
6. 书籍推荐
   * [你读过哪些JavaScript书籍](https://www.zhihu.com/question/19562698/answer/89480175) *`外链`*

### 贰、[数据结构与算法](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-2/1.-mian-shi-shi-gao-pinlchu-xian-de-suan-fa/2.0)

1. 面试时高频率出现的算法
   * [十大排序算法](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-2/1.-mian-shi-shi-gao-pinlchu-xian-de-suan-fa/2.1.1)
   * [链表](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-2/1.-mian-shi-shi-gao-pinlchu-xian-de-suan-fa/2.1.2)
   * [单调栈](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-2/1.-mian-shi-shi-gao-pinlchu-xian-de-suan-fa/2.1.3)
   * [二叉树的遍历](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-2/1.-mian-shi-shi-gao-pinlchu-xian-de-suan-fa/2.1.4)
   * [实战：字节跳动前端面试2道算法题](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-2/1.-mian-shi-shi-gao-pinlchu-xian-de-suan-fa/2.1.5)
   * [分治法、动态规划、贪心算法的区别](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-2/1.-mian-shi-shi-gao-pinlchu-xian-de-suan-fa/2.1.6)
   * [实战：阿里巴巴前端面试算法题](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-2/1.-mian-shi-shi-gao-pinlchu-xian-de-suan-fa/2.1.7) *`未完`*
2. 其他经典算法
   * [尾递归：面试官问你斐波那契数列的时候不要太高兴](https://zhuanlan.zhihu.com/p/54378423) *`外链`*
3. 好书推荐
   * [《学习JavaScript数据结构与算法》](https://book.douban.com/subject/27129352/) *`外链`*

### 叁、主流框架/库

1. 综合比较
   * [jQuery过时了吗？](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-3/1.-zong-he-bi-jiao/3.1.1)
   * [React、Vue、Angular对比](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-3/1.-zong-he-bi-jiao/3.1.2)
2. React
   * [React Hooks究竟是什么？](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-3/2.react/3.2.1)
   * React的性能优化技巧？
3. Vue.js
   * Vue.js源码解读：Vue数据响应式原理？
   * Vue.js带来的一些新问题、解决办法探索？
4. Angular.js
   * 你真的懂Angular.js吗？
   * Angular.js性能优化要点？
5. Flutter
   * 浅谈Flutter给前端研发带来的变化？
   * Dart？
6. 好书推荐
   * [《深入浅出Vue.js》](https://book.douban.com/subject/32581281/) *`外链`*
   * [《深入React技术栈》](https://book.douban.com/subject/26918038/) *`外链`*

### 肆、必会的工具

1. Webpack——自动打包模块工具
   * [深入理解Webpack打包](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-4/1.webpack-zi-dong-da-bao-mo-kuai-gong-ju/si-.1.1-shen-ru-li-jie-webpack-da-bao)
   * 常用的脚手架？
2. API文档管理
   * 用Swagger解决前后端沟通不畅、API调试强依赖的问题？
   * Easydoc.xyz？
3. IDE——工欲善其事必先利其器
   * 高效使用VSCode的10点建议？
   * 适用于前端开发者的优秀VSCode插件？
   * Sublime Text？

### 伍、编程范式

1. 面向对象编程（OOP）
   * [面向对象、面向过程有什么区别？](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-5/1.-mian-xiang-dui-xiang-bian-cheng-oop/5.1.1)
   * 面向对象编程的弊端是什么？
   * [重新认识JavaScript面向对象：继承](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-5/1.-mian-xiang-dui-xiang-bian-cheng-oop/5.1.3)
   * [彻底搞懂泛型](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-5/1.-mian-xiang-dui-xiang-bian-cheng-oop/5.1.4)
   * [用JavaScript实现抽象类](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-5/1.-mian-xiang-dui-xiang-bian-cheng-oop/5.1.5)
   * [用JavaScript实现接口](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-5/1.-mian-xiang-dui-xiang-bian-cheng-oop/5.1.6)
2. 函数式编程
   * [什么是函数式编程？](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-5/2.-han-shu-shi-bian-cheng/5.2.1)
   * [JavaScript的函数式编程探索](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-5/2.-han-shu-shi-bian-cheng/5.2.2)
   * [Pointfree无参数风格编程](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-5/2.-han-shu-shi-bian-cheng/5.2.3) *`未完`*
3. 响应式编程
   * [什么是响应式编程？](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-5/3.-xiang-ying-shi-bian-cheng/5.3.1) *`更新中`*
   * [RxJS](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-5/3.-xiang-ying-shi-bian-cheng/5.3.2) *`未完`*

### 陆、软件设计的原则

1. [导读：SOLID](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-6/1.solid-yuan-ze/6.1.0)
   * [单一职责原则](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-6/1.solid-yuan-ze/6.1.1)
   * [接口隔离原则](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-6/1.solid-yuan-ze/6.1.2)
   * [开放封闭原则](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-6/1.solid-yuan-ze/6.1.3)
   * [里氏替换原则](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-6/1.solid-yuan-ze/6.1.4)
   * [依赖倒置原则](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-6/1.solid-yuan-ze/6.1.5)
2. 好书推荐
   * [《重构》](https://book.douban.com/subject/4262627/) *`外链`*

### 柒、设计模式和软件工程

1. 十四种经典设计模式
   * [单例模式](https://github.com/coffe1891/frontend-hard-mode-interview/blob/master/7/7.1.1.md)
   * [策略模式](https://github.com/coffe1891/frontend-hard-mode-interview/blob/master/7/7.1.2.md)
   * [代理模式](https://github.com/coffe1891/frontend-hard-mode-interview/blob/master/7/7.1.3.md)
   * [迭代器模式](https://github.com/coffe1891/frontend-hard-mode-interview/blob/master/7/7.1.4.md)
   * [发布-订阅模式](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-7/1.-jing-dian-she-ji-mo-shi/7.1.5)
   * [命令模式](https://github.com/coffe1891/frontend-hard-mode-interview/blob/master/7/7.1.6.md)
   * [组合模式](https://github.com/coffe1891/frontend-hard-mode-interview/blob/master/7/7.1.7.md)
   * [模板方法模式](https://github.com/coffe1891/frontend-hard-mode-interview/blob/master/7/7.1.8.md)
   * [享元模式](https://github.com/coffe1891/frontend-hard-mode-interview/blob/master/7/7.1.9.md)
   * [职责链模式](https://github.com/coffe1891/frontend-hard-mode-interview/blob/master/7/7.1.10.md)
   * [中介者模式](https://github.com/coffe1891/frontend-hard-mode-interview/blob/master/7/7.1.11.md)
   * [装饰者模式](https://github.com/coffe1891/frontend-hard-mode-interview/blob/master/7/7.1.12.md)
   * [状态模式](https://github.com/coffe1891/frontend-hard-mode-interview/blob/master/7/7.1.13.md)
   * [适配器模式](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-7/1.-jing-dian-she-ji-mo-shi/7.1.14)
2. 浅谈软件工程：MVC、MVP、MVVM
   * [MVC的前世今生](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-7/2.-ruan-jian-gong-cheng-jia-gou/7.2.1) *`未完`*
   * MVP又是什么？
   * 有了MVC、MVP，为什么还要MVVM？

### 捌、很有用的网站

1. [中文站-Mozilla大宝库](https://developer.mozilla.org/zh-CN/docs/Web) *`外链`* 最全的Web相关参考文档，没有之一
2. [英文站-StackOverflow](https://stackoverflow.com/) *`外链`* 掌握了四级英语就能向老外提问交流了，解决疑难杂症必上
3. [中文站-Vue.js手册](https://vuejs.bootcss.com/guide/) *`外链`* 手册在手，玩转Vue不愁
4. [英文-Vue资源大全](https://github.com/vuejs/awesome-vue) *`外链`* 超级多的资源，总能找到你喜欢的那款

### 玖、公众号&博客推荐

1. [一线互联网公司官方前端公众号](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-9/9.1)
2. [知名前端人物](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-9/9.2)

### 拾、后记

1. [成为一个好的程序员远比找份好工作重要](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-10/10.1)
2. [2020年前端技术展望](https://coffe1891.gitbook.io/frontend-hard-mode-interview/id-10/10.2)

## 当前维护者

| <p><a href="https://github.com/LeeDebug"><img src="https://1680353414-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LnlixiOMXyluGpXDGGs%2Fuploads%2Fgit-blob-d2caad562a9231dbd3ef0bc3afda2ae27b4d6ba7%2Fedan-qrcode.png?alt=media" alt="Edan Lee"><br><sub>淳淳同学</sub></a><br><a href="https://github.com/coffe1891/frontend-hard-mode-interview/commits?author=LeeDebug">💻</a> <a href="https://leedebug.github.io/">📖</a><br>我将继续完善相关内容<br>（请注明来意：进群、学习、咨询等）</p> |
| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |

![](https://img.shields.io/badge/%E5%BE%AE%E4%BF%A1-@YS15275278989-brightgreen)

## 联系我

![](https://1680353414-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnlixiOMXyluGpXDGGs%2F-MMpZRpB6J1fbHauUmOk%2F-MMp_gesxiF71F4T3zzw%2Fmakai_greatwall.png?alt=media\&token=438a6a31-efa7-480b-9c73-00912eab0aed)

![](https://img.shields.io/badge/%E5%BE%AE%E4%BF%A1-%40kenny2019-brightgreen) [![contact me via gmail](https://img.shields.io/badge/Gmail-kai521%40gmail.com-red)](mailto:kai521@gmail.com)\
<https://github.com/coffe1891>

对本书有任何疑问，欢迎联系我。

## 版权许可

[![](https://1680353414-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnlixiOMXyluGpXDGGs%2F-M49SnIii9QCbCKuzFCr%2F-M49U6lgRA30DfPOx-IW%2Fcopyright.png?alt=media\&token=5352122d-4ed9-4a13-93cb-6deb47bbff57)](http://creativecommons.org/licenses/by-nc/4.0/)

本作品采用[知识共享署名-非商业性使用 4.0 国际许可协议](http://creativecommons.org/licenses/by-nc/4.0/)进行许可，只要保持原作者署名、非商用，您可以自由地阅读、分享、修改本书。

## Star History

> 如果这个项目对你有帮助，⭐以表示支持

[![Star History Chart](https://api.star-history.com/svg?repos=coffe1891/frontend-hard-mode-interview\&type=Date)](https://star-history.com/#coffe1891/frontend-hard-mode-interview\&Date)