乐趣区

关于前端:既然可以进腾讯字节阿里等大厂为什么要高薪进小公司

jiezi

前言

前不久后盾有一个粉丝给我留言：为什么很多人加入校招的时候，宁愿低薪也要进大厂，而不抉择更高薪的小公司呢？
我想了一下，大略是有 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 选项有什么作用？

…

为不影响小伙伴们的浏览感触，没有列举全副题目还有答案，须要持续看题目和答案的小伙伴请 0 根底玩转微信小程序 开发实战 制作教程
我的项目 2：前端我的项目教程之 Vue+MintUI 购物车实战
我的项目 3：前端我的项目教程之飞机大战变速

细节优化

逻辑清晰：肯定要逻辑清晰，不然即便你晓得这个问题的答案，面试官也不会称心，如果你逻辑清晰，即便这个答案不会，面试官也会给你加分。

独特了解：当初的面试题大同小异，那么如何体现出你的劣势就很重要。联合业务以及你本身的常识储备来讲。

深刻思考：对每个问题肯定要有深刻的思考，不然就很难进入大公司了，深度上要有一个拔高能力在面试中取得好的问题。

晦涩表白：面试就是一个表白的过程，一些问题心里明确不行，还要晦涩的表述进去，基本上如果面试官感觉你表白的很晦涩，当你讲到一半就不会再让你说上来了，证实曾经通过了。

最初灵魂一问

  • 你的幻想是进大厂吗？你明确的，这须要一点小小的代价。
  • 你是万中无一的奇才？如果不是，那么失败几次是失常的，大家都是普通人，兴许只是不 match。
注：文中的前端大厂面试题汇总 PDF、学习材料及源码都间接点击这就能够获取了，
退出移动版