前端面试小册

整体流程：一面技术面、二面hr面、三面主管面一面（40min）1️⃣ 自我介绍2️⃣ 实习深问这块问了挺久，会展开问些场景3️⃣ 虚拟滚动原理3.1 有没有开f12看过，在滚动的时候滚动条是否存在（？不是很明白4️⃣ vue2和vue3的差别5️⃣ 事件循环6️⃣ promise，以及有哪些方法7️⃣ BEM命名规范8️⃣ 反问二面（20min）1️⃣ 自我介绍2️⃣ 为什么选择前端3️⃣ 对于实习经历有什么看法，学习到了什么4️⃣ 对自己的技术的看法，最近在学习什么5️⃣ 有其他offer吗，薪资是多少，你的期望薪资是多少6️⃣ 职业规划7️⃣ 反问二面完5分钟，发了个测评三面（30min）是技术中心的负责人（好像？忘记了1️⃣ 自我介绍2️⃣ 如何看待9963️⃣ 为什么选择前端4️⃣ 家庭情况5️⃣ 职业规划6️⃣ 别人如何评价自己7️⃣ 在校成绩，有没有参与社团，有没有担任领导职位8️⃣ 反问每一面的面试官都会透露工作强度很大，说公司发展很快，业务很多啥的，看上去压力还蛮大的

🎯 本章核心：掌握点击劫持攻击原理、iframe安全防护、CSP高级配置，构建企业级前端安全防线  一、现实世界类比 🎭 点击劫持是什么？ 想象你去ATM机取款：  正常情况：你看到的屏幕就是银行系统，点击"取款"就是取款 点击劫持：有人在ATM屏幕上覆盖了一层透明薄膜  薄膜上写着"点击领取优惠券" 你以为在领优惠券，实际点击的是"转账10000元" 你的钱就这样被偷走了    换到网页上： ┌──────────────────────────────────────────────┐ │ 恶意网站（用户看到的） │ │ ┌─...

一、现实世界类比 🛡️ 想象你的网站是一个商场：   XSS 攻击（跨站脚本攻击）：就像商场里的小偷  小偷混入商场（恶意脚本注入网页） 偷走顾客的钱包（窃取 Cookie、Token） 伪装成顾客做坏事（执行恶意操作）    CSRF 攻击（跨站请求伪造）：就像假冒顾客的身份  小偷拿到你的会员卡（利用已登录的 Cookie） 冒充你去消费（伪造请求） 你的账户被扣款（执行非法操作）    防御措施：  XSS 防御：安检（输入过滤、输出转义、CSP） CSRF 防御：验证身份（Token、SameSite Cookie）  二、XSS 攻击（Cross-Site Scripting）  ...

一、面试题 通过强缓存与协商缓存部分我们已经知道通过缓存可以给页面访问提速，提升用户体验，还可以节省流量，减轻服务器压力。 但是问题来了：  在实际项目中如何保证更新版本的时候，客户端缓存失效？ HTML、CSS、JS 以及图片等资源，那些使用强缓存，那些使用协商缓存？ hash、chunkhash 和 contenthash 的是什么？他们的区别又是什么？  二、问题 1：解决版本更新时缓存失效 2.1 问题分析 核心问题：当代码更新后，如果使用强缓存，客户端可能仍然使用旧版本的资源，导致更新不生效。 2.2 解决办法 方法一：更新静态资源的路径 原理：通过改变资源路径（文件名），强制浏览器...

一、现实世界类比 🗺️ 想象你在一个大型购物中心：   传统多页面应用：就像每个店铺都是独立的建筑  从 A 店到 B 店要走出去，重新进入（刷新页面） 每次都要重新过安检（重新加载资源） 速度慢，体验差    单页面应用（SPA）：就像所有店铺在同一栋楼里  从 A 店到 B 店只需换楼层（切换组件） 不用走出大楼（不刷新页面） 速度快，体验好    前端路由：就像电梯和楼层指示牌  Hash 模式：像贴在墙上的地图（#/floor1） History 模式：像真实的楼层编号（/floor1）    二、为什么需要前端路由？ 💡 传统多页面 vs 单页面应用 // ===== 传统多页面...

一、现实世界类比 🎬 想象浏览器是一个电影制作团队：  浏览器内核（Blink/WebKit）：就像导演  统筹整个项目（渲染网页） 管理各个部门（HTML 解析、CSS 解析、渲染）   JavaScript 引擎（V8）：就像编剧  负责剧本（JavaScript 代码） 是导演团队的一部分，但有独立性   渲染引擎：就像摄影师  负责把内容呈现出来（绘制页面）   网络模块：就像制片人  负责获取资源（下载HTML、CSS、JS、图片）    关键理解：V8 是浏览器内核的一部分，但可以独立运行！ 二、浏览器内核是什么？ 💡 核心概念 const BrowserKernel = { ...

一、现实世界类比 🏭 想象 V8 引擎是一个智能翻译工厂：   JavaScript 代码：就像外文书籍  人类能看懂（程序员能读） 机器看不懂（CPU 不认识）    V8 引擎：就像翻译团队  解释器（Ignition）：快速翻译员（边读边翻译，速度快但质量一般） 编译器（TurboFan）：专业翻译（深度优化，速度慢但质量高）    工作流程：  新书到达 → 快速翻译员先翻译（解释执行） 发现畅销书 → 专业翻译深度优化（JIT 编译） 内容变化 → 重新快速翻译（去优化）    关键理解：V8 用"解释+编译"的混合模式，兼顾速度和性能！ 二、V8 是什么？  ...

一、概述 1.1 什么是 HTTPS HTTPS（HyperText Transfer Protocol Secure，超文本传输安全协议）是在 HTTP 的基础上加入了 SSL/TLS 协议，用于保证数据传输的安全性。 简单理解：HTTPS = HTTP + SSL/TLS 类比理解：  HTTP：就像寄明信片，内容谁都能看 HTTPS：就像寄密封信件，只有收件人能看  1.2 为什么需要 HTTPS HTTP 存在的安全问题：  窃听风险：明文传输，数据可被截获 篡改风险：数据可被中间人修改 冒充风险：无法验证通信双方身份  示例场景： 用户 → [明文: password=123456]...

一、概述 TCP 和 UDP 都是传输层协议，它们负责在网络中传输数据。虽然都属于传输层，但它们的特点和适用场景完全不同。 类比理解：  TCP：就像打电话，需要先接通（三次握手），通话质量有保障，说完再挂断（四次挥手） UDP：就像寄明信片，写完直接投递，不管对方有没有收到  二、TCP 协议 2.1 TCP 是什么 TCP（Transmission Control Protocol，传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议。 核心特点：  面向连接 可靠传输 有序传输 流量控制 拥塞控制  2.2 TCP 的特性 面向连接 含义：使用 TCP 前必须先建立 TCP...

一、概述 在网络协议第1节，我们已经了解到了访问网站会先通过 DNS 解析获取到目标网址的 IP，而得到 IP 后我们要进行数据传输，必须先进行三次握手才会建立起连接，才能开始通信，而通信结束之后会进行4次挥手。 本节我们将详细了解3次握手和4次挥手、应对面试官的回答。 类比理解：  三次握手：就像打电话前的确认过程 四次挥手：就像打完电话后的告别过程  二、三次握手理解 2.1 生活类比 A 想要约 B 吃饭，于是发短信：  A：我要约你吃饭 B：好的，时间地点是 xxx A：我知道时间地点了  2.2 技术术语  A：seq=x，syn=1，SYN_SENT 状态 B：Ack=seq+1=...

一、概述 1.1 最大区别 GET 和 POST 方法最大区别：  报文格式不同 语义不同：GET 获取资源，POST 向服务端提交资源  类比理解：  GET：就像去图书馆借书，你告诉图书管理员书名（参数在 URL 中），管理员把书给你 POST：就像往银行存钱，你把钱（数据在 body 中）交给柜员  二、RFC 角度的区别 2.1 RFC 是什么 RFC：Request For Comments，超文本传输协议（Hypertext Transfer Protocol）的标准规范。 2.2 RFC 标准中的区别    特性 GET POST     用途 获取信息 修改服务器上的数据   ...

一、强缓存部分 1.1 何为强缓存 强缓存：访问一次的网站，我们再次访问的时候，不需要和服务器通信，即不会向服务器发送请求获取资源，而是直接从缓存中读取资源，返回的状态码是 200（from cache）。 特点：  不发送请求到服务器 直接从缓存读取 状态码显示 200（from cache）  类比理解：强缓存就像家里的备用钥匙，需要时直接使用，不用每次都去物业拿。 1.2 如何设置强缓存 在第一次请求服务端的时候，服务端在请求的响应头（Response Header）设置相关参数（Pragma、Cache-Control、Expires）来表示强缓存，而浏览器通过识别 Response ...

一、现实世界类比 🏗️ 想象浏览器渲染页面就像盖房子：  HTML：就像建筑图纸  边看图纸边盖房（边下载边解析）   CSS：就像装修材料  不影响看图纸（不阻塞DOM解析） 但装修完才能入住（阻塞页面渲染）   JavaScript：就像监理  监理来了要停工（阻塞DOM解析） 监理需要看装修效果（依赖CSS） 监理走了才能继续盖（JS执行完才能继续）    关键理解：JS 全阻塞，CSS 半阻塞！ 二、核心概念：阻塞 vs 非阻塞 📊 阻塞情况总结 const BlockingSummary = { HTML: { 解析: '边下载边解析', 阻塞: '不会被阻塞（除非遇到 scri...