腾讯前端 AI 面试深度解析
近期收到一份来自腾讯的前端 AI 面试反馈,岗位涉及前端 AI 方向。整体来看,面试官对基础知识的纵深要求较高,从网络底层到框架原理,再到系统设计与工程化实践,考察维度非常全面。这份面经不仅涵盖了高频八股文,还包含了一些场景化的系统设计问题,对于备战中大厂前端岗位的开发者来说,具有很高的参考价值。
面试整体画像
| 维度 | 特征 |
|---|---|
| 公司定位 | 腾讯 - 互联网巨头 |
| 面试风格 | 基础纵深型 + 场景设计型 + 原理追问型 |
| 难度评级 | ⭐⭐⭐(覆盖面广且有一定深度) |
| 考察重心 | 网络基础、浏览器缓存、React 原理、系统设计、工程化 |
| 特殊之处 | 问题从网络基础到框架原理到系统设计,层层递进 |
核心考点深度解析
1. 从输入 URL 到页面渲染
这是前端最经典的问题之一,但往往容易被忽略细节。完整的链路不仅仅是 DNS 和 TCP,还包括了 TLS 握手以及浏览器的渲染机制。
// 完整流程概览
// 1. 输入 URL:用户在浏览器输入 https://www.example.com
// 2. DNS 解析:将域名转换为 IP 地址
// - 浏览器缓存 -> 系统缓存 (hosts) -> 路由器缓存 -> ISP 缓存
// - 根 DNS 服务器 -> 顶级域名服务器 (.com) -> 权威 DNS 服务器 (example.com)
// 3. TCP 连接:三次握手
// 客户端 → SYN(同步序列号) → 服务器
// 客户端 ← SYN-ACK(同步确认) ← 服务器
// 客户端 → ACK(确认) → 服务器
// 4. TLS 握手 (HTTPS):加密通信建立
// - 客户端发送支持的加密套件和随机数
// - 服务器返回证书和随机数
// - 客户端验证证书,生成预主密钥,用公钥加密发送
// - 服务器用私钥解密,生成会话密钥
// 5. 发送 HTTP 请求:GET /index.html
// 6. 服务器处理请求:路由匹配 -> 执行后端代码 -> 查询数据库 -> 生成响应
// 7. 返回 HTTP 响应:200 OK, Content-Type, Cache-Control 等
// 8. 浏览器解析 HTML:构建 DOM 树,遇到 script 阻塞解析
// 9. 构建 CSSOM 树:解析 CSS,生成样式规则
// 10. 构建渲染树:DOM 树 + CSSOM 树 → 渲染树(只包含可见元素)
// 11. 布局 (Layout/Reflow):计算每个元素的位置和大小
// 12. 绘制 (Paint):将渲染树绘制到屏幕上


