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

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

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

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

【前端面试小册】已更新40节，坚持就是胜利！

一、概述 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     用途 获取信息 修改服务器上的数据   ...

今天和银行朋友聊天吃饭，休息一天，小册明天8节更新！！和朋友聊了以后，更加坚定去银行总行福利待遇好，活还轻松！

坚持就是胜利！【前端面试小册】已更新36节

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

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

一、什么是缓存 1.1 定义 缓存是指将数据存储在临时存储位置，以便将来可以更快地访问。 浏览器缓存：第一次访问网站后，会将该网站需要的资源保存在本地，下次访问的时候，直接加载本地的资源，省去了下载资源的时间，所以变得更快，体验更好。 类比理解：缓存就像家里的储物柜，常用的东西放在储物柜里，需要时直接取用，不用每次都去商店买。 1.2 缓存的好处  提升访问速度：直接读取本地资源比从服务器获取来得快 减少服务器压力：减少了对服务器访问，可以缓解服务器压力 节省带宽：少了请求访问，减少了带宽消耗，访问缓存消耗流量更少 提升用户体验：页面加载更快，用户体验更好  二、缓存种类 2.1 按位置分类 ...