公众号：程序员白特，欢迎一起学习交流~参考文章：掘金作者 - 旅梦开发团前言这是某211高校软件工程专业的师弟百度一面的题目和回答，全程高能，来看看你会多少~宇宙铁律，介绍下自己还好，之前看到过敖丙大佬面试自我介绍5句话公式 - 掘金 (juejin.cn)一文，里面有个公式：我是谁+从哪里来+我做过什么+有什么成绩+为什么能胜任。下面为举例子：面试官你好，我叫白特，22年毕业于XX大学物联网工程专业。之前任职于XX公司，担任前端开发工程师一职，在职期间主要负责金融活动相关项目的研发，对线上问题处理、性能调优、线程并发能问题都有自己的理解，对行业相关业务的研发设计流程也十分熟悉。除此之外，也仔细读过多本源码研发书籍（最好列举熟悉的一两个，面试官就可以因此提问）,并在公众号上写过多篇底层相关系列文章（可以举例子，为面试提问铺垫），热爱技术分享，多平台优秀作者。平时主要使用vue, 熟悉全家桶开发，数据流按理及后台管理系统等等开发。阅读过vue、react、ElementPlus等的源码，并且多次向开源组件库贡献过源码，同时也有自己的开源组件库betterUI，star有xxx+。因贵司XX部门的研发十分吸引我，并且和我的技能树十分匹配，因此决定面试咱们公司的XX前端研发岗位，希望能获得此次机会，谢谢。面试题1. var a = []; a.push()、a.pop() 请说明在js中的意义使用的是字面量初始化创建了一个空数组，这是最简洁、直观且推荐的写法。这种方法直接在内存中创建并初始化数组对象，执行效率高。var a = new Array(); 使用了Array构造函数来创建一个空数组。尽管功能上等同于前者，但性能上有差异。如果传递整数参数，比如new Array(3), 指定长度比如('a', 'b', 'c') 作为元素初始化。还有 var arr = new Array(5).fill(0);也经常用到。通过原型链查找，Array 原型上的push等方法面试官又追问， var a = new A()，a 和 A 的关系，A 和 Function 的关系a 是 A 的一个实例对象，a 的__proto__ 指向 A 的 prototype，A 的__proto__ 指向 Function 的 prototype。2.promise有几种状态，可以重复改变吗？Promise对象有三种状态，分别是：Pending（未决）初始状态Fulfilled（已履行/成功）：操作成功完成时的状态Rejected（已拒绝/失败）：操作因错误或异常未能完成时的状态Promise状态变化的特性是：Promise状态的转变是不可逆且只能发生一次。也就是说，一个Promise不能从Fulfilled状态变回Pending状态，也不能从Rejected状态变为Pending或者Fulfilled状态。一旦Promise从Pending状态变为Fulfilled（resolved）或Rejected（rejected），它就永远不会再改变。因此，Promise的状态不能重复改变。感觉回答的还可以，记得去字节的会长提醒面试时，切忌一个字一个字的蹦面试官。面试不只是回答问题，而是要展示自己。抓住熟悉的知识或技能点，就来个滔滔不绝，面试官不喊停就一直说。于是想到下面这个API:Promise.resolve()与Promise.reject() 用于创建已确定状态的Promise对象，方便快速返回成功的或失败的结果面试官一听这个就感兴趣了， 继续提问Promise还提供了哪些静态方法，平时怎么用的？开心， 面试官进包围圈了。Promise.all(iterable)参数是promise对象数组。只有当所有Promise都变为fulfilled时，返回的Promise才会变为fulfilled，并且结果是一个包含所有Promise结果的数组；只要有一个Promise变为rejected，则整体Promise也会立即变为rejected，返回第一个rejected Promise的理由。Promise.race(iterable)在传入的 Promise 数组中任何一个 Promise 解决（resolve）或拒绝（reject）时，会立即以那个率先改变状态的 Promise 的结果为准来解决或拒绝。这里强调下细节，其它的promise实例仍然会继续运行，只不过其状态和结果不会归于最终的结果。Promise.race 关注的是速度最快的 Promise 的结果，而 Promise.all 关注的是所有 Promise 是否都成功完成。Promise.allSettled(iterable)和Promise.all()相似，它等待所有Promise都达到settled状态（即无论是fulfilled还是rejected）。一旦所有Promise都决断了，返回的Promise会变成fulfilled，并且结果是一个数组，包含了每个输入Promise的结果描述对象，这些对象具有status（'fulfilled'或'rejected'）和对应的value或reason属性。Promise.all() 更关注所有 Promise 是否都成功完成，它适用于需要所有任务成功完成才能继续下一步场景。而 Promise.allSettled() 则允许你观察一组异步操作的所有结果，无论成功与否，这对于获取并处理所有任务的最终状态非常有用。到此，在三种状态的语法回答外，还将并发任务及sellted等偏业余的需求表演给面试官，看表情他还是挺满意的... 如果面试官不打断，我准备继续聊异步、红绿灯、手写promise... 面试就要变被动为主动，将自己擅长的表演出来。3.输出结果，为什么？const obj3 = {a: 1}; const obj4 = {b: 2}; console.log(obj3 == obj4); // false console.log(obj3 === obj4); // false结果:false，false原因：== 值相等， ===严格相等，即值和类型都相等类型转化，虽然obj3和obj4 值不一样，但面试官要听的是我们对于JS类型转换的理解。在转换不同的数据类型时，相等和不相等操作符遵循下列基本规则：如果由一个操作数是布尔值，则在比较相等性之前先将其转换为数值---false转换为0，而true转换为1；如果一个操作数是字符串，另一个操作数是数值，在比较相等性之前先将字符串转换为数值；如果一个操作数是对象，另一个操作数不是，则调用对象的valueOf（）方法，用得到的基本类型值按照前面的规则进行比较；这两个操作符在进行比较时则要遵循下列规则。null和undefined是相等的。要比较相等性之前，不能将null和undefined转换成其他任何值。如果有一个操作数是NaN，则相等操作符返回false，而不相等操作符则返回true。重要提示：即使两个操作数都是NaN，相等操作符也返回false；因为按照规则，NaN不等于NaN。如果两个操作数都是对象，则比较他们是不是同一个对象。如果两个操作数都是指向同一个对象，则相等放回true，否则返回false。所以这里不会转换两个对象，而是比较他们是不是指向同一个地址，是否是同一个对象。===严格相等，这里比较的也是引用地址。所以，在比较两个对象时，并不会发生类型转换以试图使它们相等。相等性判断直接基于对象的内存地址。4. 聊聊你对语义化的理解会长提醒过我，面试前要了解下公司的产品和技术栈什么的。百度是搜索公司，前端和搜索关联的肯定是HTML5的语义化了，SSR后面的题目会讲到。当然针对百度， 我也准备了一些AI相关的内容，后面果然被问到了。html5 新增了语义化标签header、nav、section、aside、footer、aside、article一边讲标签， 一边把脑子里的这张图（掘金详情页）讲给面试官。这样说比干巴巴讲单词，好太多。div + css 能解决布局问题，但是可读性不好，代码不好维护SEO  搜索引擎优化更好地支持各种终端，例如无障碍阅读和有声小说等斐波那契哟，面试官要使出闪电五连鞭了, 出算法题了。斐波那契或爬楼梯，始于递归，终于动态规划。还好我有准备，引着面试官往我的dp包围圈里走，大家往下看。使用递归，快速解决战斗function fib(n) {     if (n == 0 || n === 1) return 1;     return fib(n - 1) + fib(n - 2);};有什么可以优化的地方时间复杂度是O(n^2),而且递归（自顶向下）的过程中有很多重复计算，我们可以缓存，当然这里可以一步到位，用动态规划(自下向上，状态转移方程)，将时间复杂度降到O(n),代码又有了。function fibonacci(n) {  if (n <= 1) return n;   let fib = [0, 1]; // 保存斐波那契数列的结果   for (let i = 2; i <= n; i++) {       fib[i] = fib[i - 1] + fib[i - 2]; // 计算第i个斐波那契数   }   return fib[n]; }面试时间大概来到了25分钟左右，前面的JS基础面试官还比较满意。但是后面还有十几位候选人要面，貌美如花的女朋友约了晚上一起吃饭，算法是杀招。不会就挂电话不浪费时间，表现好的话就在小本本上记下明天通知二面。于是，面试官来了道动态规划难点的题。6.leetcode 原题编辑距离给你两个单词 word1 和 word2， 请返回将 word1 转换成 word2 所使用的最少操作数。你可以对一个单词进行如下三种操作：(1) 插入一个字符; (2) 删除一个字符; (3) 替换一个字符;首先，这道动态规划题有些复杂，大家需要刷一些基础的动态规划题再来搞这道。像百度等这种级别的大厂，算法题我称为三板斧。一般是1-2道简单或中等题，再是1-2道有难度的动态规划题。只要我们准备好动态规划由简到难的各种常考题型，扛住面试官的前三板斧子，基本没有问题。word1  horseword2  ros1. word1 变horse ->  rorse    h->r  替换rorse -> rose      删除最2个rrose-> ros         删除最后e 操作次数是3次  由word1 变成word2再换个思考 由word2变成word1也是可以的2. word2 变ros -> rose   添加erose->rorse  添加r rorse-> horse r 替换为h其实就是上面的逆向操作3. 都变horse ->  rorse    h-> r  word1 变rorse -> rose    删除r    word1 变ros -> rose      word加e      word2 变word1 和word2 都操作了， 一共操作了3次分析demo，方便等下我们考虑最优子结构的各种情况天啊， 太复杂了，替换、删除、添加三种操作、两个单词混合修改。别怕，最值问题求解，就用动态规划。看上去复杂的dp问题，使用动规五部曲就能化腐朽为神奇。动规五部曲定义dp数组比较两个字符串，那么我们要定义一个二维的dp[i][j]，两个字符串的最少操作次数（无论哪个操作字符，哪种操作，都可以用二维矩阵涵盖）以i-1结尾的word1 ,以j-1结尾的word2dp[i][j]就是让两个字符相同的最少操作次数，根据动态规划的局部最优亦是全局最优，最后的dp[m][n]就是我们要的结果递推公式我们要比较两个字符串，就要比较每个元素，那么要比较哪些元素呢？word1[i-1]、word2[j-1] 递推，自顶向下思考// 如果两个字符相同if (word1[i-1] == word2[j-1]) {  // 不需要添加、删除、替换元素  // 最少操作次数可以是不改变的，取上一次的最少操作数，因为dp局部最优也是全局最优的  dp[i][j] = dp[i-1][j-1]} else {  // 上操作  // dp[i][j] = dp[i - 1][j - 1] + 1, // 替换操作  // dp[i][j] = dp[i][j - 1] + 1, // 插入操作  //dp[i - 1][j] + 1)// 删除操作  dp[i][j] = Math.min(        dp[i - 1][j - 1] + 1, // 替换操作        Math.min(dp[i][j - 1] + 1, // 插入操作                 dp[i - 1][j] + 1) // 删除操作      ); // 总之， 根据动态规划的思想，只要有一步操作就可以到达}初始化怎么来考虑初始化问题呢？ 上图dp[i][j]会由左上角的dp[i-1][j-1]、左边dp[i-1][j]、上边dp[i][j-1]三个方向迭代而来。所以在初始化的时候，我们需要把第一行dp[]和第一列都初始化，这样就可以递推出相应的值。for (let i = 0; i <= m; i++) {  dp[i][0] = i;}for (let j = 0; j <= n; j++) {  dp[0][j] = j;}迭代//自底向上， 迭代for (let i = 1; i <= m; i++) {  for (let j = 1; j <= n; j++) {     .....  }}返回结果最后的dp[m][n] 也就是二维矩阵的右下角。通过动态规划五步走，代码如下：/** * @param {string} word1 * @param {string} word2 * @return {number} */function minDistance(word1, word2) {  const m = word1.length;  const n = word2.length;  // 初始化一个(m+1) x (n+1)的矩阵，第一行和第一列分别表示空串到word1前i个字符、空串到word2前j个字符的距离  const dp = new Array(m + 1).fill(null).map(() => new Array(n + 1).fill(0));  // 初始化边界条件：空字符串转换成任意长度的字符串至少需要该字符串的长度次操作  for (let i = 0; i <= m; i++) {    dp[i][0] = i;  }  for (let j = 0; j <= n; j++) {    dp[0][j] = j;  }  // 动态规划填充矩阵  for (let i = 1; i <= m; i++) {    for (let j = 1; j <= n; j++) {      if (word1[i - 1] === word2[j - 1]) {        dp[i][j] = dp[i - 1][j - 1]; // 如果两个字符相等，则不需要消耗操作次数      } else {        dp[i][j] = Math.min(          dp[i - 1][j - 1] + 1, // 替换操作          Math.min(dp[i][j - 1] + 1, // 插入操作                   dp[i - 1][j] + 1) // 删除操作        );      }    }  }  return dp[m][n]; // 最终答案位于dp数组右下角}7. 如何用AI工具 提升开发效率之前申请了Github的Copilot，学生党免费嘛。对代码提速和源码学习都有挺大帮助的。也试过下通义千问的vscode 插件，挺好的。使用各种chat bot(Chatgpt等)，从前端到后端、AI学习、数据库等，提问式学习及解决问题，拥抱AI Native。刻意练习一些prompt 的技巧， 生成前端页面、SQL等比如在做后台管理系统的时候， tailwind的一些页面，基本都是chat 完成。学习transfromer、openai 等AIGC类技能，将一部分的编程任务交给Agent来完成，发挥大模型的能力。最近在学习LangChain, 对AI很感兴趣。面试官好像突然来了兴趣，哐哐问了我一堆扩散模型、pandas，越听越像鸟语，真不会啊。这时想起来，会长的分享，面试里有不会的很正常，可以适当的请教面试官。果不其然，在我很有礼貌的说出请教后，面试官给我讲了一通，我瞬间表示学到很多，希望跟着他多学习，感觉面试官有种突然想收我的感觉。之前有朋友说，会一点的东西不要写到简历上。但也觉得，AI如此火的今年春招，建议把自己会的都加上。面试被追问不可怕， 新的知识表现出学习兴奋和激情，再适当的拍拍面试官的马屁，可以让面试官有更深的印象。8. 讲一讲HTTP请求三次握手推荐大家看下关于三次握手与四次挥手面试官想考我们什么？--- 不看后悔系列 - 掘金 (juejin.cn) ，我就按这个来回答的。不出意外，面试官继续追问 为什么是三次握手，不是两次或者四次三次握手是确定客户端和服务端接收和发送能力都正常(HTTP)的最优次数第一次：客户端发送能力正常第二次：服务端接收能力正常，服务端发送能力正常(接收和发送可以合并)第三次：客户端接收能力正常9. 说一说跨域新手在实习的时候，git 操作和 跨域（前后端联调）是两个动手的要点。首先，跨域问题源于浏览器的同源策略，该策略限制了从一个源加载的网页脚本如何与另一个源交互。jsonp （JSON with Padding）利用 <script> 标签不受同源策略限制，通过动态创建 src 属性指向服务端提供的接口，并带上回调函数名，服务端返回调用这个回调函数并携带数据的JS代码。WebSocket APIWebSocket协议本身支持跨域，通过握手过程中服务器发送正确的Access-Control-Allow-Origin来实现跨域通信。POSTMessage API主要用于窗口间通信，比如iframe和父页面间的跨域通信，通过window.postMessage()方法发送消息，同时监听message事件接收消息。Image Beacon利用图片请求可以跨域的特点，通过创建Image对象并向其src属性设置跨域URL进行GET方式的数据传输。不适用于POST或复杂操作。CORS（Cross-Origin Resource Sharing）跟其它的方案不一样的地方，它单独在服务器设置。服务器端设置允许跨域请求头（如Access-Control-Allow-Origin），浏览器在发起跨域请求时会检查响应头是否允许本次请求。//具体代码app.use((req, res, next) => {  // 设置允许任何来源进行跨域访问（生产环境请替换为具体的源）  res.setHeader('Access-Control-Allow-Origin', req.headers.origin || '*');  // 允许浏览器预检请求（OPTIONS）通过  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');  // 允许携带认证信息（如cookies）  res.setHeader('Access-Control-Allow-Credentials', true);  // 允许自定义请求头  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With');  // 对于预检请求，直接返回成功状态码  if (req.method === 'OPTIONS') {    return res.sendStatus(204);  }  next();});10. vite 为什么比webpack快？面试来到了四十几分钟，面试官开始问工程化相关的问题了。之前会长在给我做模拟面试的时候，有问到工程化的问题。当时一脸懵逼，会长给我讲了一遍，还交给我在这种问题上延申表达，展示自己在工程化深度的一些方法。舒服，完美表演二十分钟，一小时左右的面试应该会完美收官。越想越开心， 赶快收拾下内心的荡漾，组织语言，回答面试官。我们先不要急于回答问题本身，会长建议我多想想面试官通过面试题想考察我们哪些点。一场前端面试无非包含前端基础（js/css/html5/es6）、算法（排序、动态规划）、项目（vue / node）、计算机基础（计网/数据库/数据结构/操作系统）、工程化（webpack/vite）等。所以像工程化这种，在拿到题目后，尽量把这块的知识，以题目为中心全盘托出给面试题。一来展示了自己对这块知识点的理解广度和深度，二来不经意延长了优质面试时长，面试官会更有兴趣随时打断我们，“参与”进来。殊不知，面试官一参与进来，就又进入到我的包围圈，他会问什么问题，怎么问，就是我们预先准备好的。 所以， 建议大家多做做模拟面试，自己当面试官，会有利于这一技巧的把握。工程化、历史及现状在开发前端项目的时候，工程化工具是标配。比如项目的初始化，让我们快速开始业务开发；模块化的支持，方便组织和复用代码；各种资源的处理和加载，如css、图片、字体等，并将其压缩或优化后放入最后的代码包;各种loader和plugin，按需定制编译流程 （stylus/ts/jsx）、压缩(MiniCssExtractPlugin)；热更新等Webpack和Vite等构建工具旨在解决前端开发中的复杂性和规模问题，通过自动化处理、模块化管理、性能优化等手段极大地提高了开发效率和应用性能，现代前端开发实践中不可或缺的部分，即前端工程化。之前，webpack是主流，但相对复杂，有点慢。vite 非常快，更简单，有种取代webpack地位之势。bundle 与 bundlesswebpack： 一切皆可打包，是目前使用率最高的工程化框架，帮助我们打理代码调试到打包的全过程，但是也有一些缺点：webpack在项目调试之前，要把所有文件的依赖关系收集完，打包后才能运行，这是它慢的主要原因，随着项目规模（强调，新手有这个视野很nice）的激增，慢的一坨屎一样（数分钟）。于是，针对webpack的bundle思路，社区推出了bundless思路框架：Vite。从bundle到bundless，原因是浏览器里的JavaScript没有很好的方式去引入其他文件。Webpack（node环境运行） 只能通过require（commonJS） 将一堆js 按依赖关系组织起来，打包后运行。但是现在主流浏览器都支持ES6的module功能（import/export）。<script type="module" src="/src/main.js"></script>只要在script标签上添加type="module"标记， main.js 就可以直接使用import 语法(动态导入)去引入js 文件，所以可以不用webpack(node)打包功能，直接使用浏览器的module功能就可以组织我们的代码。Vite 能够做到这么快的原因，还有一部分是因为使用了 esbuild 去解析 JavaScript 文件。esbuild 是一个用 Go 语言实现的 JavaScript 打包器，支持 JavaScript 和 TypeScript 语法，现在前端工程化领域的工具也越来越多地使用 Go 和 Rust 等更高效的语言书写，这也是性能优化的一个方向。到这里，我们就向面试官讲清楚了 bundle 和bundless。这才是vite 更快的关键。优缺点上面有太多东西可以说了，接下来我们再怎么扩展工程化这块的表达，主动把握优质面试时长，让面试官感到惊艳呢？这一方面是面试技巧，一方面也是检测面试准备充分程度。大家可以按这个列表扩展：webpack.config.js 中 entry, output, module.rules, plugins 等关键配置项的作用及其具体用法代码分割、Tree Shaking 和懒加载等技术Vite 开发时，如何处理 CSS 预处理器手写Vite热更新机制的理解总结百度的面试还是比较专业的，能学到很多东西。以下是本次面试总结的技巧：找学长内推，会比自己投好很多吸星大法，问下学长面试经验，社区里多刷题模拟面试，找些伙伴，假设自己是面试官， 你会问伙伴哪些问题，这样来准备自我介绍最好写出来，多朗诵js基础要准备好promise系列、JS语法系列、ES6系列，面试不是被考试，而是当面展示自己。 滔滔不绝，相关联知识不停说。让面试官觉得我们基础扎实，对JS有激情算法准备好动态规划由简到难，常考题一定要刷刷，状态转移方程可以计下来。不要怕回答不上来，请教面试官，快速学习。