浏览器与网路

浏览器与网路

1. 浏览器中的事件委派、捕获、冒泡

• 事件委派：这种把监听器与处理器装在父层，然后委派给子元素，就是所谓的事件委派。
• 事件捕获：事件从 Window → document → 父 → 子 一路向下传递。外层越早拿到事件，就越有机会在浏览器做“默认动作”之前踩刹车。在“浏览器动作执行前”的那一小段窗口里，给 JS 一个说“不”的机会（阻止滚动、阻止拖拽、阻止默认跳转等）。
• 事件冒泡阶段（最常用）事件从目标元素 → 父 → 祖父一路向上传递。默认所有事件监听都在冒泡阶段执行。让父组件可以统一管理子组件的行为，而不是在每个子节点上散落一堆监听器。
• target vs currentTarget：event.target：真正触发事件的元素（固定不变）event.currentTarget：当前正在运行监听器的元素（随传播改变）
• 阻止冒泡event.stopPropagation()：阻止继续往上冒泡event.stopImmediatePropagation()：阻止同层其他监听器执行

2. DOMContentLoaded, load, beforeunload, unload 的触发时机

• DOMContentLoaded：DOM 树建完就触发（CSS/图片不等）。绑定事件、初始化需要 DOM 的 JS
• load：所有资源（图片、CSS、字体）加载完成后触发。图片/字体依赖的逻辑，或完整页面渲染后的操作
• beforeunload：用户要离开前一刻（还能拦下）。防止数据丢失、提示用户。
• unload：页面已离开，最后清理。最后上报（但现代交互中尽量不用）

3. cookie, sessionStorage 和 localStorage 的差异

• 只有 cookie 会带到服务器 → 用于登录、身份验证。localStorage / sessionStorage 完全不会。
• cookie：可设置过期；用于服务端会话。localStorage：永久。sessionStorage：tab 级、关闭即清。
• 容量不同，cookie：4KB →很小，所以只存必要信息。storage：5–10MB →适合大量前端数据。

4. localStorage 和 IndexedDB 的区别

• localStorage = 小、同步、只存字符串、KV 存储（“键”（key），存一个“值”（value））。
• IndexedDB = 大、异步、存任意对象、真正的本地数据库。

5. 从浏览器网址列输入网址、按下 Enter 后会发生什么事？

• 解析 URL：浏览器解析协议、域名、路径等。
• DNS 解析：通过本地缓存和 DNS Resolver（Root → TLD → Authoritative）把域名转成 IP，过程中有缓存与 TTL。
• 建立连接与传输：基于 TCP / TLS 建立连接，数据封包在多级路由器间转发，相当于物流中转。
• HTTP 请求 / 响应：浏览器根据 URL 发出 HTTP 请求，服务器处理后返回响应（状态码 + 头 + 内容）。
• 浏览器渲染页面：解析 HTML、加载 CSS/JS/资源，构建 DOM/CSSOM，布局、绘制，执行 JS，最终渲染出页面。

HTTP、HTTPS、CORS

1. HTTP/1、HTTP/1.1 和 HTTP/2 的区别

• HTTP/1 → HTTP/1.1：HTTP/1.1 主要在解决“重复连接 + 带宽浪费 + 缓存弱 + 虚拟主机 + 方法不足”。
• HTTP/1.1 → HTTP/2：“队头阻塞 + Header 重复 + 请求多轮 RTT + 无优先级”。
• HTTP/2 → HTTP/3：TTP/2 解决了 HTTP 层的队头阻塞，但无法解决 TCP 层的队头阻塞；HTTP/3 用 QUIC（基于 UDP）彻底解决了两层的阻塞问题，并带来更快的握手、连接迁移、拥塞控制改进等优势。
• HTTP/2 的多路复用是在 TCP 上跑 → 只要 TCP 丢一个包，整个 TCP 连接都会停。 HTTP/3 的多路复用是在 QUIC 上跑 → 每个 stream 独立确认和重传，即使丢包，也不会影响其他 stream。

2. CORS 是什么? 为什么要有 CORS?

• CORS 是浏览器的跨域安全机制。浏览器因为同源政策默认禁止 JS 读取跨域响应，但实际开发又必须跨域，所以服务器通过 CORS header 告诉浏览器哪些来源可以访问。CORS 有简单请求和预检请求，预检是浏览器发出的 OPTIONS 请求，用来确保安全与兼容性。
• 解决 CORS 的方法，就是让后端加上正确的 CORS 相关 headers
• 预检 OPTIONS 是浏览器的安全机制：先问服务器是否允许 DELETE，服务器必须用 CORS 头明确同意；只有同意后，浏览器才真正发 DELETE。否则浏览器直接阻止，不会发 DELETE。

3. 请解释 HTTP caching 机制

• 浏览器把请求过的资料存起来（缓存），下次再访问时，如果资料没变，就直接从本地拿，不用重新请求服务器。
• 强缓存（浏览器可直接用缓存，不发请求）缓存方法:Cache-Control
  • Cache-Control: max-age=60“这个资源在 60 秒内都不用重新请求，直接用缓存。”
  • Cache-Control: no-store浏览器每次都必须重新请求，而且不能把响应存下来。
  • Cache-Control: public, max-age=86400资源可以被任何缓存层存储（包括代理服务器 / CDN）。
  • Cache-Control: private, max-age=600资源只能存储在“浏览器私有缓存里”，不能由代理层缓存。
  • Cache-Control: max-age=60, must-revalidate一旦缓存过期，浏览器必须向服务器验证，不能用过期缓存。
  • Cache-Control: no-cache可以缓存，但每次使用前必须向服务器验证（协商缓存）。
• 协商缓存（缓存过期后，再问服务器是否需要更新）
  • ETag 很像每个文件的“指纹”。
  • Last-Modified 服务端告诉浏览器该文件的“最后修改时间”

4. 前端与后端开发都要懂得 HTTP 状态码

• 1xx：请求处理中（过程信号类）：100 是流程继续；101 是换协议继续。
• 2xx：成功类（结果有效）：200：有内容，201：成功 + 服务器创建了新东西，204：成功但不返回任何东西
• 3xx：重定向（需要下一步动作）：301 是永久的 → 浏览器会长期记住（缓存重定向），302 是临时的 → 浏览器不会长期记住，304 不跳转，也不返回新资源，只告诉你：内容没变。
• 4xx：客户端错误（问题在客户端）：401：你是谁都不知道（请登录），403：知道你是谁，但你不能做（权限不足），404 Not Found：请求的资源不存在。
• 5xx：服务器错误（问题在服务端）：500 是 bug、崩溃等 “程序坏了”，501 是“我本来就不会这个功能”，503 是“我暂时忙不过来了”。

资讯安全

1. 什么是 DDoS 攻击？

• DDoS（分散式阻断服务攻击）是一种利用大量恶意流量瘫痪目标网站的攻击方式。
• 防御方法：更大的容量、把流量挡在外层（反向代理 / CDN）、自动化的流量识别与清洗。

2. 什么是 XSS 攻击？如何防范？

• XSS (cross-site scripting) 并不是“黑客突破服务器防线”把代码塞进去；而是服务器自己“天真地把用户输入当成正常内容存了下来”，然后再“自动帮攻击者把脚本送给其他用户执行”。

• XSS类型

  • Stored XSS：存储型（最容易理解）后端没有过滤，直接把这段内容存进数据库→ 就像存一段普通文字。
  • Reflected XSS：反射型（不经过数据库，也能注入）XSS = 攻击者提供“看似用户输入、实则 JS 代码”的数据 → 服务器或前端没过滤 → 浏览器帮忙执行。攻击者不需要让脚本永久存在服务器，只要让别人打开恶意 URL 就行。脚本是在后端“拼 HTML”那一步被混进去的。
  • DOM XSS：“前端操作 DOM 时，把不可信数据塞进 innerHTML” 的问题
  3. 什么是 CSRF 攻击？如何防范？

• Cross Site Request Forgery (CSRF)：跨站请求伪造= 利用用户已登录的身份，让用户浏览器在不知情的情况下替攻击者发危险请求。

• CSRF Token（主流做法）

4. 什么是 SQL Injection？该如何避免？

• 攻击者通过把恶意 SQL 语句混入用户输入，让后端在执行查询时拼出 原本系统不该执行的 SQL，最终实现：绕过登录
• 占位符可以阻止 SQL 注入

5. 加密、编码、杂凑的区别为何？

• 编码：换个方式来呈现，最有名的例子是摩斯编码
• 加密：公钥加密，私钥解密；私钥签名，公钥验签。
• Hashing / 哈希/杂凑：把一个文件 hash 成一个固定长度的 “指纹”，验证是否被篡改。