钛动科技一面

一、前端基础与原理

🔌 网络通信

1. 请详细说明 HTTP 和 WebSocket 的区别？适用场景分别是什么？

区别：
适用场景：

2. 什么是 SSE（Server-Sent Events）？它的核心特点是什么？

SSE 是一种基于 HTTP 的单向通信技术，允许服务端主动向客户端推送事件流。
特点：基于文本传输、默认支持断线重连、仅服务端向客户端单向推送、兼容性较好（除 IE 外主流浏览器支持）。

3. 在什么场景下会选择使用 SSE 而不是 WebSocket？

场景：仅需服务端向客户端单向推送数据（如新闻通知、日志推送）、希望兼容低复杂度场景、不想维护双向连接的心跳机制。
原因：SSE 实现更简单、基于 HTTP 无需额外协议、自带重连机制，而 WebSocket 更适合双向实时交互。

4. 请列举常见的 HTTP 状态码，并说明其含义（如 2xx、3xx、4xx、5xx 各举2-3个）

2xx（成功）：200 OK（请求成功）、201 Created（资源创建成功）、204 No Content（请求成功但无返回内容）。
3xx（重定向）：301 Moved Permanently（永久重定向）、302 Found（临时重定向）、304 Not Modified（协商缓存命中，资源未更新）。
4xx（客户端错误）：400 Bad Request（请求参数错误）、401 Unauthorized（未授权）、403 Forbidden（禁止访问）、404 Not Found（资源不存在）。
5xx（服务端错误）：500 Internal Server Error（服务端内部错误）、502 Bad Gateway（网关错误）、503 Service Unavailable（服务暂不可用）。

5. 请解释强缓存和协商缓存的区别？分别通过哪些 HTTP 头实现？

强缓存：浏览器直接从本地缓存读取资源，不向服务端发起请求。
协商缓存：浏览器先向服务端发起请求，验证资源是否更新，未更新则返回 304 并使用本地缓存，更新则返回新资源。

🧩 组件通信

请分别说明 Vue3 和 React 中常用的组件通信方式有哪些？

Vue3：
React：

🎨 渲染与存储

1. 请解释 SSR（服务端渲染）和 SSG（静态站点生成）的区别？各自的适用场景？

SSR：服务端在请求时动态生成 HTML，返回给客户端渲染。
SSG：构建时预生成所有静态 HTML 文件，部署后直接返回静态文件。

2. 请对比 Cookie、localStorage、sessionStorage 的区别（存储大小、有效期、作用域、通信方式）

特性	Cookie	localStorage	sessionStorage
存储大小	约 4KB	约 5MB	约 5MB
有效期	可设置过期时间（默认会话级）	永久存储（除非手动删除）	会话级（页面关闭即清除）
作用域	同域名下共享，可设置路径	同域名下共享	同标签页下共享
通信方式	随 HTTP 请求自动携带	仅前端读取，不随请求发送	仅前端读取，不随请求发送

二、登录功能实现

请描述一个完整的登录功能实现流程，包括前端和后端的核心交互、安全处理（如 Token、验证码、记住密码等）

前端流程：
后端流程：
安全处理：

是的，把 Token 存在 localStorage 确实存在较高的泄露风险，这是前端安全中一个非常关键的问题。我帮你详细拆解一下风险点和应对方案：

🔍 为什么 localStorage 存 Token 有泄露风险？

XSS 攻击直接窃取：localStorage 是前端可读写的存储，一旦页面存在 XSS 漏洞（比如用户输入未转义、第三方脚本被注入），攻击者可以通过 JavaScript 直接读取 localStorage 中的 Token，并发送到自己的服务器。
持久化存储风险：localStorage 是持久化的，即使用户关闭浏览器，Token 仍然存在。如果用户在公共设备上登录后未手动退出，后续使用者可以直接通过 localStorage 获取 Token 冒充原用户。
无同源策略额外保护：虽然 localStorage 遵循同源策略，但如果域名被劫持或存在子域名漏洞，攻击者也可能跨子域名获取 Token。

🛡️ 更安全的 Token 存储方案

如果你的业务对安全性要求较高，推荐优先使用 HttpOnly + Secure + SameSite Cookie 来存储 Token，而不是 localStorage。

HttpOnly：标记为 HttpOnly 的 Cookie 无法通过 JavaScript 读取，从根源上防止 XSS 攻击窃取 Token。
Secure：仅在 HTTPS 连接下才会发送 Cookie，避免 Token 在明文传输中被拦截。
SameSite：设置为 Strict 或 Lax，可以有效防止 CSRF 攻击（跨站请求伪造）。

📌 必须用 localStorage 时的防护措施

如果业务场景必须用 localStorage（比如跨域场景、需要前端主动控制 Token 过期），请务必做好以下防护：

严格防御 XSS
缩短 Token 有效期
敏感操作二次验证
定期清理与监控

📊 存储方案对比

存储方式	XSS 防护	CSRF 防护	持久化	适用场景
HttpOnly Cookie	✅ 强	✅ 需配置 SameSite	✅ 可配置	对安全性要求高的业务（如金融、支付）
localStorage	❌ 弱	✅ 无风险	✅ 是	跨域场景、需前端主动管理 Token
sessionStorage	❌ 弱	✅ 无风险	❌ 否	会话级临时存储（如单页应用临时 Token）

三、项目实战经验

📄 PDF 项目：虚拟滚动的具体实现原理

核心原理：仅渲染可视区域内的列表项，动态计算并渲染可见元素，非可见区域用空白占位符填充，从而减少 DOM 节点数量，提升长列表性能。
实现步骤：

📱 适配与跨域

1. 请说明常见的移动端适配方案（如 rem、vw/vh、响应式布局等），并比较各自优缺点

rem 适配：
vw/vh 适配：
响应式布局：

2. 在前端中，如何判断当前设备是 PC 端还是移动端？常用的方法有哪些？

方法1：通过 User-Agent 检测
方法2：通过屏幕宽度检测
方法3：通过触摸事件检测

3. 什么是跨域？常见的跨域解决方案有哪些（如 CORS、JSONP、代理等）？

跨域定义：浏览器同源策略限制下，当请求的协议、域名、端口任意一个与当前页面不同时，即为跨域。
解决方案：

四、算法

请描述 LeetCode 第70题“爬楼梯”的解题思路，并写出核心代码（可以用递归、动态规划等方式）

题目描述：假设你正在爬楼梯。需要 n 阶你才能到达楼顶。每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢？
解题思路：
核心代码（动态规划优化空间版）：

var climbStairs = function(n) {
    if (n <= 2) return n;
    let a = 1, b = 2;
    for (let i = 3; i <= n; i++) {
        let temp = a + b;
        a = b;
        b = temp;
    }
    return b;
};

#钛动科技（广州市沃钛移动科技有限公司）#