既然前端工程师可以进腾讯字节阿里等大厂，为什么要高薪进小公司？

前言
前不久后台有一个粉丝给我留言：为什么很多人参加校招的时候，宁愿低薪也要进大厂，而不选择更高薪的小公司呢？
（文末有惊喜！文末有惊喜！）
我想了一下，大概是有3个原因：

• 一是大厂薪资高、待遇好，
• 二是大厂的工作方式更加体系化，在大厂结识优秀的人几率更高；
• 三是跳槽会相对来说更加有竞争力。

但无论原因是什么，最终的结果都是要进大厂。但是大厂面试有多难，很多小伙伴深有体会，还有人说「大厂面试，更重要的是项目经验，没必要刷题」。
真的是这样吗？
我询问了曾经成功拿下快手、小米、美团offer的学长，在他看来，想要进大厂，刷题是十分有必要的。
首先最简单的道理，别人刷题，你不刷，在无形之中你就吃了亏；
其次，面试官在问一些问题的时候，尽管你知道该如何回答，但是表述不清楚依旧会减分；
最后，刷题可以帮助梳理前端核心知识点，查缺补漏，预防面试中可能出现的忘记某方面知识的尴尬情况。
那么，要熟悉掌握那些知识点？那些大厂前端面试喜欢问什么呢？又该怎么面呢？
不容错过的技术点
JavaScript

• 执行上下文，尤其是词法作用域和闭包；
• 提升、函数和块作用域，以及函数表达式和声明；
• 绑定——特别是 call、bind、apply 和 this；
• 对象原型、构造函数和 mixin；
• 组合和高阶函数；
• 事件委托和冒泡；
• 使用 typeof、instanceof 和 Object.prototype.toString 进行类型转换；
• 使用回调、promise、await 和 async 处理异步调用；
• 什么时候可以使用函数声明和表达式。

DOM
知道如何遍历和操作 DOM 非常重要，对于重度依赖 jQuery 或者开发了很多 React & Angular 类型应用程序的候选人来说，他们可能会在这个问题上栽跟斗。你可能不会每天都直接接触 DOM，因为我们大多数人都在使用各种抽象。在不使用第三方库的情况下，你需要知道如何执行以下这些操作：

• 使用 document.querySelector 选择或查找节点，在旧版浏览器中使用 document.getElementsByTagName；
• 上下遍历——Node.parentNode、Node.firstChild、Node.lastChild 和 Node.childNodes；
• 左右遍历——Node.previousSibling 和 Node.nextSibling；
• 操作——在 DOM 树中添加、删除、复制和创建节点。你应该了解如何修改节点的文本内容以及切换、删除或添加 CSS 类名等操作；
• 性能——当有很多节点时，修改 DOM 的成本会很高，你至少应该知道如何使用文档片段和节点缓存。

CSS
至少，你应该知道如何在页面上布局元素，如何使用子元素或直接后代选择器来定位元素，以及什么时候该用类、什么时候该用 ID。

• 布局——安排彼此相邻的元素的位置，以及如何将元素布置成两列或三列；
• 响应式设计——根据浏览器宽度大小更改元素的尺寸；
• 自适应设计——根据特定断点更改元素的尺寸；
• 特异性——如何计算选择器的特异性，以及级联如何影响属性；
• 适当的命名空间和类命名。

HTML
知道哪些 HTML 标签最能代表你正在显示的内容以及相关属性，应该掌握手工知识。

• 语义标记；
• 标记属性，例如 disabled、async、defer 以及何时使用 data-*；
• 知道如何声明 doctype（大多数人不是每天都会写新页面，所以可能会忘了这个）以及可以使用哪些元标签；
• 可访问性问题，例如，确保输入复选框具有更大的响应区域（使用标签“for”）。另外还有 role=“button”、role=“presentation”，等等。

系统设计

• 渲染——客户端渲染（CSR）、服务器端渲染（SSR）和全局渲染；
• 布局——如果你正在设计被多个开发团队使用的系统，需要考虑进行组件化，以及是否需要开发团队通过指定标记来使用组件；
• 状态管理，例如在单向数据流或双向数据绑定之间做出选择。你还应该考虑你的设计是采用被动式还是反应式编程模型，以及组件如何相互关联，例如是 Foo->Bar 还是 Foo->Bar；
• 异步——你的组件可能需要与服务器进行实时的通信。在设计时需要考虑使用 XHR 或双向调用。如果你的面试官要求你支持旧浏览器，那么你需要在隐藏 iFrame、script 标签或 XHR 之间做出选择。如果没有，你可以建议使用 websocket，或者使用服务器发送事件（SSE），这样会更好；
• 关注点分离——Model-View-Controller（MVC）、Model-View-ViewModel（MVVM）和 Model-View-Presenter（MVP）模式；
• 多设备支持——你的实现是否同时支持 Web、移动 Web 和混合应用程序，还是为每一种场景提供单独的实现？如果你正在构建像 Pinterest 这样的网站，你可能会考虑在 Web 上使用三列，但在移动设备上只使用一列，你的设计将如何处理这个问题；
• 资产文件交付——在大型应用程序中，独立团队拥有自己的代码库是常有的事。这些不同的代码库可能彼此依赖，每个代码库通常都有自己的管道来发布代码变更。你的设计需要考虑如何基于依赖项进行资产文件的构建（代码拆分）、测试（单元测试和集成测试）和部署。你还需要考虑如何通过 CDN 交付资产文件或者内联它们来减少网络延迟。

Web 性能
除了通用编程最佳实践之外，你应该期望访问者查看你的代码或设计及其性能影响。它曾经足以将 CSS 置于文档的顶部，而 JS 脚本位于页面底部，但 Web 正在快速移动，你应该熟悉这个领域的复杂性。

• 关键渲染路径；
• Service Worker；
• 图像优化；
• 延迟加载和捆绑拆分；
• HTTP/2 和服务器推送的一般含义；
• 何时预取和预加载资源；
• 减少浏览器回流以及何时将元素提升到 GPU；
• 浏览器布局、组合和绘制之间的区别。

高频面试知识点
JavaScript

1. JS原始数据类型有哪些？引用数据类型有哪些？
2. 说出下面运行的结果，解释原因。
3. null是对象吗？为什么？
4. '1'.toString()为什么可以调用？
5. 0.1+0.2为什么不等于0.3？
6. 什么是BigInt?
7. 为什么需要BigInt?
8. 如何创建并使用BigInt？
9. typeof 是否能正确判断类型？
10. instanceof能否判断基本数据类型？
11. 能不能手动实现一下instanceof的功能？
12. Object.is和===的区别？
13. [] == ![]结果是什么？为什么

...
HTTP

1. HTTP 报文结构是怎样的？
2. HTTP有哪些请求方法？
3. 如何理解 URI？
4. 如何理解 HTTP 状态码？
5. 简要概括一下 HTTP 的特点？HTTP 有哪些缺点？
6. 对 Accept 系列字段了解多少？
7. 对于定长和不定长的数据，HTTP 是怎么传输的？
8. HTTP 如何处理大文件的传输？
9. HTTP 中如何处理表单数据的提交？
10. HTTP1.1 如何解决 HTTP 的队头阻塞问题？
11. 对 Cookie 了解多少？

...
TCP协议

1. 能不能说一说 TCP 和 UDP 的区别？
2. 说说 TCP 三次握手的过程？
3. 为什么是三次而不是两次、四次？
4. 三次握手过程中可以携带数据么？
5. 同时打开会怎样？
6. 说说 TCP 四次挥手的过程
7. 为什么是四次挥手而不是三次？
8. 同时关闭会怎样？
9. 说说半连接队列和 SYN Flood 攻击的关系
10. 如何应对 SYN Flood 攻击？
11. 介绍一下 TCP 报文头部的字段
12. 说说 TCP 快速打开的原理(TFO)

...
浏览器

1. 能不能说一说浏览器缓存?
2. 能不能说一说浏览器的本地存储？各自优劣如何？
3. 说一说从输入URL到页面呈现发生了什么？（网络）
4. 说一说从输入URL到页面呈现发生了什么？（解析算法）
5. 说一说从输入URL到页面呈现发生了什么？（渲染过程）
6. 谈谈你对重绘和回流的理解
7. 能不能说一说XSS攻击？
8. 能不能说一说CSRF攻击？
9. HTTPS为什么让数据传输更安全？
10. 能不能实现事件的防抖和节流？
11. 能不能实现图片懒加载？

...
Vue
1.什么是MVVM？

1. mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？
2. 组件之间的传值？
3. Vue 双向绑定原理
4. 描述下 vue 从初始化页面--修改数据--刷新页面 UI 的过程？
5. 你是如何理解 Vue 的响应式系统的?
6. 虚拟 DOM 实现原理
7. Vue 中 key 值的作用？
8. Vue 的生命周期
9. Vue 组件间通信有哪些方式?
10. vue 中怎么重置 data?
11. 组件中写 name 选项有什么作用？

...
?

为不影响小伙伴们的阅读感受，没有列举全部题目还有答案，完整版已经打包完毕，希望对大家有帮助！有需要的朋友可以戳此传送门即可获取完整版的 PDF 哦
温故而知新
JavaScript

性能

linux
?

项目回顾
把你做的项目从技术架构到源码都要做到足够了解，至少面试的时候不要被面试官问住了。并且要体现出你在工作中的作用，体现出自驱性（大公司都很看重自驱性）
没有项目或想学项目的，小编分享几个项目实战视频：
项目1：0基础玩转微信小程序 开发实战 制作教程
项目2：前端项目教程之Vue+MintUI购物车实战
项目3：前端项目教程之飞机大战变速
项目视频在小编页面噢
细节优化
逻辑清晰：一定要逻辑清晰，不然即使你知道这个问题的答案，面试官也不会满意，如果你逻辑清晰，即使这个答案不会，面试官也会给你加分。
独特理解：现在的面试题大同小异，那么如何体现出你的优势就很重要。结合业务以及你自身的知识储备来讲。
深入思考：对每个问题一定要有深入的思考，不然就很难进入大公司了，深度上要有一个拔高才能在面试中获得好的成绩。
流畅表达：面试就是一个表达的过程，一些问题心里明白不行，还要流畅的表述出来，基本上如果面试官觉得你表达的很流畅，当你讲到一半就不会再让你说下去了，证明已经通过了。
最后灵魂一问

• 你的梦想是进大厂吗？你明白的，这需要一点小小的代价。
• 你是万中无一的奇才？如果不是，那么失败几次是正常的，大家都是普通人，也许只是不 match。

注：文中的前端大厂面试题汇总PDF、学习资料及源码都已经打包完毕，希望对大家有帮助！有需要的朋友可以戳此传送门即可获取完整版的 PDF 哦