百度前端一面：面试官对我手下留情，但还是挂了😭

风止何安啊
0 阅读8分钟

前言

当百度的HR在BOSS上找我的时候，我是又激动又紧张。小公司也没怎么面，八股文背的也不利索，当我看到面试官那一脸程序员的味，我差点结巴的说不出话，毕竟是第一次面大厂。接下来还原一下现场吧。

一、必备环节，介绍下自己

公式：我是谁+从哪里来+我做过什么+有什么成绩+为什么能胜任。 好了，以后我单独出一篇自我介绍的模板吧😄。我觉得大家还是更喜欢面经的。

这时候面试官问：为什么选择学习前端？

前端能直观看到代码变成页面，交互与视觉反馈强，既有逻辑深度又有创作乐趣，而且市场需求广、技术迭代快，越学越有成就感。

面试官又问：平时怎么学习前端的，有没有做过一些规划？

体系化学习：先啃 HTML/CSS/JS 核心，再学 React/Vue 框架与工程化

项目驱动：做过 xx 项目，项目做了什么

持续复盘：整理笔记、刷面试题、看源码，每周固定输出技术文章

二、项目和八股

也是些许奇怪，面试官就问了一下我在项目中碰到哪些难点，然后一笔带过了。并没有疯狂拷打，八股面的很多，我简单来说下，要非常详细的回答可以自己搜搜🔍。

1. 解释一下什么情况会发生跨域？什么情况下是不同源呢？

同源：协议、域名、端口完全一致，否则跨域。

跨域场景：不同域名、二级域名、端口、协议，均会触发浏览器同源限制。

2. html 语义化知道吗？为什么要做语义化？

常见语义化标签：<header>、<nav>、<main>、<section>、<article>、<aside>、<footer>、<figure>、<figcaption>、<time> 等。

优点：

  • 提升可访问性：屏幕阅读器能更好解析页面结构
  • 利于 SEO：搜索引擎更容易识别内容主次
  • 代码可读性：开发者能快速理解页面结构
  • 便于维护：结构清晰，减少冗余 class

3. script 标签放在 header 和放在 body 底部有什么区别？

放 <head> ：会阻塞 HTML 解析和页面渲染，页面要等 JS 下载、执行完才继续渲染。

放 <body> 底部：HTML 先解析渲染完，再加载执行 JS，页面白屏时间更短。

追问：那有什么方法可以既放在 header 里面又不会堵塞呢？

① 最稳、最常用：defer（推荐）

<script src="a.js" defer></script>
<script src="b.js" defer></script>
  • 异步下载 JS，不阻塞 HTML 解析和渲染
  • 等 整个 HTML 解析完 再按顺序执行
  • 可以安全操作 DOM适合：绝大多数业务脚本

② 异步执行：async

<script src="a.js" async></script>
<script src="b.js" async></script>
  • 异步下载，下载完立刻执行
  • 执行顺序不确定，谁先下完谁先跑
  • 适合：广告、统计、无依赖的第三方脚本

defer 异步下载，顺序执行，HTML 完了再跑；

async 异步下载，乱序执行，下完立刻就跑。

4. css 的选择器有什么？它们的优先级是怎么样的？

① 优先级： !important > 行内 > ID > 类 / 属性 / 伪类 > 标签 / 伪元素 > 通配符

② 常见选择器：

image.png

5. 有没有用过 flex 布局？常见的 flex 属性有什么？

① display: flex：开启 flex 布局

② flex-direction：方向

  • row（默认）
  • row-reverse
  • column
  • column-reverse

③ justify-content：主轴对齐

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly

④ align-items：交叉轴对齐

  • stretch（默认）
  • flex-start
  • flex-end
  • center
  • baseline

⑤ flex-wrap：是否换行

  • nowrap（默认）
  • wrap
  • wrap-reverse

⑥ align-content：多行对齐

  • 同 justify-content 值

⑦ gap：间距

  • gap: 10px 20px;

6. 什么是重排？什么是重绘？

重排：元素的几何尺寸、位置变了 → 重新布局

重绘：元素的颜色、样式变了，但位置大小没变 ** → 重新画颜色 **

重排 → 一定触发重绘

重绘 → 不一定触发重排

7. JS 有哪些基础数据类型？引用类型？

基础类型： number、string、boolean、undefined、null、Symbol（ES6）、Bigint（ES2020）

引用类型： Object、Array、Function、Date、RegExp、Map / Set（ES6）

具体看我的文章：

栈与堆的精妙舞剧：JavaScript 数据类型深度解析

Set/Map+Weak三剑客的骚操作：JS 界的 “去重王者” ，“万能钥匙”和“隐形清洁工”

8. 说下什么是闭包？有什么作用？

① 闭包定义： 函数嵌套函数，内部函数引用了外部函数的变量，并且外部函数已经执行完毕，这个变量依然被保留，这种现象就叫闭包。

一句话：有权访问另一个函数作用域中变量的函数。

② 闭包的作用（背这 3 个）：

  • 私有化变量：变量不会污染全局，外部不能直接改，只能通过方法访问
  • 保存变量状态：函数执行完，变量不会被销毁，可以一直保存
  • 实现模块化：把功能和变量封装在一起，只暴露接口

最简单的示例：

function outer() {
    let count = 0;
    return function inner() {
      count++;
      console.log(count);
    }
}

const fn = outer();
fn(); // 1
fn(); // 2
fn(); // 3

这里 inner 就是闭包，count 被一直保留。记得提一嘴缺点：使用不当会内存泄漏。

具体看我的文章：JS 里的 “变量租房记”：闭包是咋把变量 “扣” 下来的？

9. 箭头函数和普通函数有什么区别？

① this 指向不同：

  • 普通函数：谁调用它，this 指向谁（运行时确定）
  • 箭头函数：没有自己的 this，this 继承外层作用域的 this（定义时确定）

② 不能当构造函数

  • 普通函数：可以 new Fn()
  • 箭头函数：不能 new，会报错

③ 没有 arguments

  • 普通函数：有 arguments
  • 箭头函数：没有，要用 ...rest 剩余参数

④ 不能用作生成器函数

  • 不能用 yield

⑤ 没有 prototype

  • 箭头函数没有原型对象

⑥ 写法更简洁

  • 单行可省略 {} 和 return

具体看我的文章：快 2026 年了，谁还在为 this 挠头？看完这篇让你彻底从懵圈到精通

10. 说下 JavaScript 的事件循环（Event Loop）。那假设在微任务执行完之后又有新的微任务会什么样？

① 一句话核心： JS 是单线程，靠事件循环 EventLoop 实现异步，先执行同步，再处理异步。

② 两类任务：

  • 同步任务：立刻执行（for、if、普通代码）
  • 异步任务：放入队列，等同步完再执行
    • 微任务 microtask（优先级高）
    • 宏任务 macrotask（优先级低）

③ 执行顺序（死记）：同步代码 → 微任务 → 宏任务

④ 哪些是微任务 / 宏任务：

  • 微任务（先执行）

    • Promise.then / catch / finally
    • queueMicrotask
    • MutationObserver

  • 宏任务（后执行）

    • setTimeout
    • setInterval
    • I/O、ajax、fetch
    • 事件（click、load）
    • requestAnimationFrame

在微任务执行完之后又有新的微任务，此时依旧会先执行新的微任务，而不是进行宏任务。

具体看我的文章：Event Loop 教你高效 “划水”：JS 单线程的“摸鱼”指南

11. 输入 URL 到按下回车键，我们的页面呈现这中间发生了什么东西？

① DNS 域名解析

  • 浏览器查域名 → 对应 IP 地址
  • 顺序：浏览器缓存 → 系统缓存 → 路由器缓存 → ISP DNS → 根域名服务器

② 建立 TCP 连接（三次握手）

  • 浏览器与服务器建立可靠连接
  • HTTPS 还会进行 TLS 握手

③ 发送 HTTP 请求

  • 构造请求头、请求体
  • 发送到服务器

④ 服务器处理并返回响应

  • 返回 HTML、状态码等
  • 浏览器开始接收数据

⑤ 浏览器解析 HTML，构建 DOM 树

  • 从上到下解析标签
  • 生成 DOM 树（文档对象模型）

⑥ 解析 CSS，生成 CSSOM 树

  • 解析内联、外链、导入样式
  • 生成 CSSOM 树（样式规则树）

⑦ 合成 Render Tree（渲染树）

  • DOM + CSSOM 结合
  • 只包含要显示的节点（不显示 display:none 的）

⑧ 布局（Layout / Reflow）

  • 计算每个节点位置、大小
  • 生成布局树

⑨ 绘制（Paint）

  • 填充颜色、图像、文字、边框等
  • 绘制到图层

⑩ 合成（Composite）

  • 把多个图层合并，最终显示到屏幕

⑪ 关闭 TCP 连接（四次挥手）

具体看我的文章：网页都知道要双向握手才加载！从 URL 到页面渲染，单向喜欢连 DNS 都解析不通

12. 讲下 http 1.0、http 1.1 和 http 2.0，并说下它们的区别。你刚刚说每次都要断开，那http 1.0会怎么样？http 1.1会怎么样？ 能说下 http 1.1 字段的名称吗？

具体看我的文章：网页都知道要双向握手才加载！从 URL 到页面渲染，单向喜欢连 DNS 都解析不通

13. 说下常见的 http 错误码

① 1xx 信息（很少考）

  • 100 继续

② 2xx 成功

  • 200 OK 请求成功
  • 201 Created 创建成功（POST/PUT）
  • 204 No Content 成功但无返回内容

③ 3xx 重定向

  • 301 永久重定向
  • 302 临时重定向
  • 304 Not Modified 协商缓存（高频）

④ 4xx 客户端错误

  • 400 请求参数错误
  • 401 未授权（没登录 /token 过期）
  • 403 禁止访问（有权限也不让进）
  • 404 资源不存在
  • 405 方法不允许（如用 POST 访问 GET 接口）

⑤ 5xx 服务端错误

  • 500 服务器内部错误
  • 502 网关错误
  • 503 服务不可用
  • 504 网关超时

三、手撕代码

面试官真的对我手下留情了，只让我写一个防抖函数：

function debounce(fn, delay) {
    let timer = null;
    return function (...args) {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            fn.apply(this, args);
        }, delay);
    }
}

const Name = debounce((name) => {
    console.log(name);
}, 1000);
Name('张三');
Name('李四');
Name('王五');

image.png

只会打印出最后一个王五。

四、反问

  1. 我进入贵公司主要是做什么？
  2. 我可以学到什么新的知识吗？
  3. 谈一下 AI 对前端的影响

结语

百度一面整体面下来重基础，重实战，没有刁钻怪题，更考察知识扎实度与逻辑表达。不知是不是运气比较好，反正问的大部分是八股，我大概也回答的都差不多，但最后还是挂了，只能说再接再厉吧。

期待下一次的分享！

avatar
文章
阅读
粉丝