2 年前端 7～9 月面试经历总结，前端开发大全-CSDN博客

本文链接：https://blog.csdn.net/weixin_57485542/article/details/136810735

前后端通信

作为一个前端工程师，知道那几个基本的知识点足够让你应付初中级别的面试题，但是如果作为一个程序员的角度出发，还是需要丰富自己在这方面的知识。这里不展开讨论，只说面试题。

输入 URL 到页面展示【超高频】

跨域【超高频】

HTTP 各版本（通常是由缓存带出来的问题）【高频】

HTTPS 原理【高频】

TCP 三次握手、四次挥手

TCP 和 UDP 区别

HTTP 常见状态码

鉴权

输入 URL 到页面展示虽然是一个老生常谈的问题，但是我认为这个问题基本涵盖了整个前端的所有基础知识点，可以回答得非常丰富。建议大家看我的这篇总结：浏览器输入 URL 的全过程[4] ，里面分为了网络篇、解析算法篇、渲染过程篇三个步骤，比较好的讲述了整个过程到底经历了什么。

由这个问题可以带出缓存、DNS 解析、TCP 连接、HTTP 请求、重排重绘等等非常多的子问题，如果你掌控的好，甚至可以控制整个面试过程，非常有利于给面试官留下比较好的印象。

跨域也是另一个非常高频的问题，通常会问你跨域的原因以及解决方案，网上很多答案，这里不做解释。

HTTP 各版本的区别通常并不会干巴巴的让你回答，在我遇到的所有情况下，通常都是在我答到缓存的时候，面试官会让我停下来解释缓存，这时候回答到一部分 HTTP 各版本中的区别；另外，一部分会在我回答性能优化的时候，答到 HTTP2 的时候会回答。

HTTPS 的问题也是比较简单，问的也通常比较直接，一般会让你直接说原理，然后再让你总结一遍握手过程。偶尔会让你对比一下 HTTP 之间的优缺点。

至于其他问题，可以到仓库里面找答案，也可以网上自己查，都是非常基础的问题。

安全

原本这个问题应该罗列在前后端通信中的，但是这个问题实在是太高频了，几乎每一次面试都有问到，所以我单独罗列出来。

具体的回答可以参考一下我整理的这篇文章：前端安全[5] 。

通常在回答安全问题的时候，需要回答以下几点：

有哪些安全问题？

解决的办法。

XSS 和 CSRF 是一定要回答上的，剩下的你知道多少答多少，但是别瞎说。一旦你乱说，很容易就会让人觉得你是在背书，没有自己的理解（虽然确实是在背书）。

工程化

这方面通常会从一个项目上入手来说，一般会问一下问题：

页面性能优化【超高频】
webpack 性能优化

页面性能优化可以聊的东西其实挺多的，比如通常会从网络、加载这两个角度出发来解决性能问题。网络角度上有可以聊到前面提到的缓存、CDN、HTTP2以及图片格式上面的优化。从加载上来说的话，又可以聊到 webpack 的打包拆包、tree-shaking、懒加载和异步加载、多线程。除了这两个角度以外，还可以从用户体验的角度上来进行优化，比如说骨架屏、动画、虚拟滚动等。

除了这种常规的角度来说，现在我们开发一个 Web 应用通常都会使用框架，每一款框架一般都会有一些配套的性能优化的手段，比如 React 里面的 shouldComponentUpdate、PureComponent、memo 等优化 diff 算法的手段也需要回答。框架的优化问题通常会在你答完性能优化的问题之后跟着问你。

具体可以看下这两篇：

性能优化[6]

React 性能优化[7]

至于 webpack，以我目前的面试经历，问的相对比较少，可以有选择的去关心关注。

框架

框架对于目前现代的 Web 应用开发来说，基本就是必备技能。面试的时候，面试官通常会根据你自己简历上写的技术栈来问，对于大小厂而言，问的方式可能也略有不同。对于小厂来说，如果你恰好技术栈和他们相一致，那么他们问的基本和大厂差不多；如果不相符，那就完全看面试官是否了解你当前的技术栈，了解的话大概会问一些，否则基本不问。对于大厂来说，那基本上是不可能不问的。

由于我的技术栈是 React + Angular，所以我的所有面试经历基本都没有被问到过 Vue 相关的问题（用 Vue 的同学不好意思了）。目前我被问到过的问题主要有：

Angular 变更检查的原理以及如何进行优化
React 的 diff 算法工作过程
Angular、React 的事件机制
React 中的 setState 是同步还是异步
React、Angular 的区别（如果你用过 Vue，问的问题会换成 Vue）
React 中各种组件复用的优劣势（mixin、render props、hoc、hook）
React 的 Fiber 架构
老版本的 React 的某些生命周期被废弃的理由
React 性能优化

以上的问题都很大概率会被问到。

TypeScript

2020年，ts 基本是一个前端从业者必须掌握的一项技能，一旦你简历上写了有 ts 的开发经验，那么面试基本上都会问一两道有关 ts 的题目。

ts 的一些普通知识在这里不进行赘述，这里挑选一些我在面试中遇到的题目。

另外，对于大小厂而言，他们对 ts 的掌握程度要求是不一样的，对于小厂而言，他们希望来面试的人能够熟练使用 ts 进行业务开发，所以 ts 的概念的熟练程度对他们来说最重要。而对于大厂而言，他们可能更加希望来面试的人能利用 ts 开发一些 ts 的周边工具，所以比较少会直接问 ts 的一些概念，一般都会让你手写一个 ts 的工具函数。

目前我面过的所有小厂，基本都会问 ts 中 type 和 interface 的区别，也基本只问这一个问题。除此之外，偶尔还会问到 ts 中如何实现一个函数的重载，基本上也是从使用角度出发，考验一个面试人的 ts 的熟练程度。

大厂里面，有两题我是印象比较深刻的：

实现一个 ts 的工具函数 GetOnlyFnProps ，提取泛型类型 T 中字段类型是函数的工具函数，其中 T 属于一个对象。

type GetOnlyFnKeys = {

[Key in keyof T]: T[K] extends Function ? K : never

}

type GetOnlyFnProps = {

[K in GetOnlyFnKeys]: T[K]

}

实现一个 ts 的工具函数 UnGenericPromise ，提取 Promise 中的泛型类型

type UnGenericPromise = T extends Promise ? U : never

项目经历

===============================================================

项目经历千人千面，我的项目经历对于大多数人来说都不太有参考价值。

但是整个面试过程，对于整个项目的讲述其实是可以抽取出来，组合成一套公式来叙述：

项目的背景是什么；
当前项目的目的是什么；
在开发过程中，你的角色是什么；
在开发过程中有遇到过什么样的难题；
遇到这些问题，你都是如何进行解决的；
项目完成之后，取得了哪些成果；

这套公式基本上可以完整地讲清楚你参与的项目的整个过程，也有利于面试官去发掘你项目中的闪光点，便于面试官在你的叙述中找到可以深挖去问你的问题。

同时，在你准备写上简历的项目中，你最好自己能够自己过一遍上面的流程，这样有利于你找到你可能还没有掌握的知识，进行查缺补漏。

算法

=============================================================

我相信大多数人对于大厂面试的恐惧感主要来自于对算法的恐惧，因为在网上流传出来的各种面试题都包含了很多在 leetcode 中难度为 mid 以上的算法题。我本身也是一样，尤其是在我面字节跳动的时候，整个面试过程我都非常紧张，觉得字节的算法题会很难，很可能做不出来。但做完之后，其实也还好，难度基本控制在 leetcode mid 以下的级别，甚至我面的好几家大厂过程中都没有涉及算法。但是，我觉得作为一个程序员，算法水平一定程度上代表着你程序设计的好坏，所以提高自己的算法水平对于开发出高水平 Web 应用是有非常好的帮助的。

我在准备算法的时候，最开始比较盲目的刷 leetcode 的题目，整个过程我觉得进步非常缓慢，很多题目刷了一次两次，第三次再看还是不知道该怎么做。后来我放弃了这种没有目的性的刷题，我开始在网上找一些前端算法中比较常见的题目，我发现了这篇文章：前端算法渣的救赎之路[8] ，里面概括了一些前端面试中常见的题目，还给出了一些算法题型的经典解法，在整个学习过程中，对我的算法提升非常大，同时我也整理出了自己的一些算法经验[9] 。同时对于基础不是很扎实的人来说，我非常推荐极客大学 9.9 的算法基础训练营，我在看完整个训练营 4 节课后，对基础有了一定的巩固。

做算法的时候我自己有一个窍门：遇到一个问题，先尝试用最暴力的方法进行解决，然后分析出暴力方法会有什么样的问题，然后再去解决遇到的问题。这个方法对于大部分我遇到的算法问题来说，基本上都可以解决问题。

各大厂面试特点

==================================================================

因为今年的特殊原因，所以基本所有公司都会采用远程面试的方式来进行面试。

在我整个面试过程中，其实各大厂的面试风格也是略有不同的，下面我一一细说。

CVTE

据我了解，CVTE 是会有很多轮 hr 面，基本上可以说是每一轮技术面试之后都会有一轮 hr 面来评估你。我当时一面的技术面已经过了，但是一面 hr 面没过，hr 面问的问题也比较尖锐，不过技术面难度还好，基本按照我上面的模版一套组合拳下来也能答出个七七八八。

CVTE 的一面没有涉及到算法题，后续的面试我就不是很清楚了。

中信信用卡中心

一面是前端面的，二面是后端面的，所以只有一面问了前端的知识问题，二面就是单纯打电话聊天，主要是聊了一些开发流程上面的问题，过程非常快非常轻松，全程只有一题算法题，也出现在我上面整理的算法题库里面。

百度

百度的技术面总共有4轮，基础面（同级别员工）+基础面（级别应该比你要一点）+leader面（整个研发部门的技术负责人）+boss面（整个研发部门的总负责人）

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。