牛客格蓝若前端实习一面整理（HTTP 缓存 / 跨域 / Vue / 工程化）（九）

收录日期：2026-05-06
关键词：前端、HTTP 缓存、跨域、Vue2/Vue3、Webpack/Vite、Nginx、Git、TS

1. 实习项目里做过哪些优化？怎么落地与验证？

参考答案

先把“优化目标”量化：首屏（FCP/LCP）、交互（INP）、资源（包体/请求数）、渲染（重排重绘）、稳定性（错误率）、成本（接口耗时/带宽）。
常见抓手：
- 构建侧：拆包（route-level split）、按需引入、Tree Shaking、压缩、图片与字体优化、预渲染/SSR（若适用）。
- 运行时：列表虚拟化、懒加载、节流防抖、缓存（memo）、减少无效渲染（React memo / Vue computed）、Web Worker（CPU 重活）。
- 网络侧：HTTP 缓存、CDN、减少 RTT（合并请求/HTTP2）、预加载（preload/preconnect）。
验证手段：
- 本地 Lighthouse/Performance、WebPageTest；线上用 RUM（PerformanceObserver + 自建埋点）对比前后分位数（P50/P90）。
- 保证“对照组/灰度”，避免样本偏差。

2. 地图瓦片（Tile）是什么？为什么地图要切瓦片？

参考答案

瓦片是把地图按固定级别（zoom）切成小块图片/矢量数据（通常 x/y/z 坐标索引）。
目的：
- 按需加载：只请求视口内瓦片，减少流量与首屏压力。
- 缓存命中高：同一瓦片可被大量用户复用，利于 CDN。
- 渐进式渲染：先低级别再补高级别，体验更平滑。
补充：矢量瓦片（pbf）比栅格瓦片更利于样式动态化与缩放清晰度。

3. 本地寻路算法有精确解吗？

参考答案

取决于问题定义：

网格/图最短路：若边权非负，Dijkstra/ A* 可求最短路（精确解）。A* 在启发函数可采纳（admissible）时保证最优。
更复杂约束（多目标、时间窗、动态障碍、连续空间、非凸成本等）：可能变成 NP-hard 或需要近似/启发式（如 RRT*、遗传算法、局部搜索）。
工程常见折中：分层规划（全局粗路 + 局部避障）+ 代价函数调权。

4. HTTP 缓存是怎么工作的？

参考答案

强缓存：不发请求，浏览器直接用本地缓存。
- 由 Cache-Control: max-age=...（优先）或 Expires 控制。
协商缓存：会发请求，服务器判断资源是否变化，未变返回 304 Not Modified。
- 常用组合：ETag/If-None-Match 或 Last-Modified/If-Modified-Since。
常见策略：HTML 往往 no-cache（或短缓存），静态资源（js/css/img）用长缓存 + 文件名 hash。

5. Cache-Control 里“叫什么缓存”？（常见指令都是什么意思）

参考答案

max-age: 资源在客户端可直接复用的秒数（强缓存）。
no-cache: 可以缓存，但每次使用前都要向服务器验证（协商缓存）。
no-store: 彻底不缓存（包含磁盘/内存）。
public: 允许中间缓存（CDN/代理）缓存。
private: 只允许浏览器缓存，不允许共享缓存。
s-maxage: 仅对共享缓存生效（覆盖 max-age）。
must-revalidate: 过期后必须向服务器验证，不能直接用过期副本。

6. 协商缓存 vs 强缓存？各自适用场景？

参考答案

强缓存适合静态资源：内容 hash 命名（app.[hash].js），可以设置一年并 immutable。
协商缓存适合可更新但频繁访问的资源：如接口返回的配置文件、无 hash 的资源。
HTML 建议走协商或短缓存，避免发布后用户卡旧版本。

7. Nginx 和构建工具如何配合做静态资源缓存？

参考答案

构建工具：
- 输出带 hash 的文件名；开启压缩（gzip/brotli）；拆分公共包与路由包。
Nginx：
- 对 *.js/*.css/*.png 等设置长缓存：Cache-Control: public, max-age=31536000, immutable。
- 对 index.html 设置 no-cache 或很短 max-age，并启用协商缓存（ETag）。
- 开启 gzip/brotli、HTTP2、合理的 try_files（SPA 回退）。

8. 什么情况下会跨域？为什么会跨域？

参考答案

触发“跨域”来自浏览器的同源策略：协议、域名、端口任一不同即不同源。
不是所有跨域都会被拦：例如 <img src>、<script src>、<link href> 的资源加载不等同于 XHR/fetch 的跨域读写权限。
真正常见被拦的是：XHR/fetch 读响应、以及某些带自定义头/非简单方法的请求触发预检（OPTIONS）。

9. 前端存储有哪些？各自适用什么场景？

参考答案

Cookie：会随请求携带（同域/同 path），适合少量会话信息；注意 HttpOnly/SameSite/Secure。
localStorage：持久化，容量较大（但同步 API）；适合偏好设置、非敏感数据。
sessionStorage：仅当前标签页会话；适合一次性流程状态。
IndexedDB：异步、容量大；适合离线缓存、复杂结构数据。
Cache Storage（Service Worker）：缓存请求/响应，适合 PWA 离线与加速。

10. localStorage vs sessionStorage 区别？

参考答案

生命周期：localStorage 持久；sessionStorage 随 tab 关闭清空。
作用域：都按源隔离；sessionStorage 还按 tab 隔离。
API：都同步；不适合大量/频繁写（可能卡主线程）。

11. Vue2 常见组件通信方式？

参考答案

父子：props 下发、$emit 上报、v-model/modelValue（Vue3）模式。
兄弟/跨层：事件总线（不推荐）、provide/inject、状态管理（Vuex/Pinia）。
其他：ref 调子组件方法（注意耦合）、插槽/作用域插槽传递数据与回调。

12. Vue2 vs Vue3 主要差异？

参考答案

响应式：Vue2 defineProperty，Vue3 Proxy（更完整的拦截能力）。
组合式 API：更利于逻辑复用与类型推断。
性能与包体：编译优化、Tree-shaking 友好。
生态：状态管理推荐 Pinia；TS 体验显著提升。

13. 除了 `this.$set`，还有什么方式维持响应式？

参考答案

Vue2 场景：

替换引用：对对象/数组做不可变更新（新对象/新数组），例如 this.obj = { ...this.obj, a: 1 }。
数组方法：使用能被 Vue2 patch 的变更方法（push/splice/...）而不是直接改下标。
预定义字段：初始化 data 时把可能新增的 key 先声明出来（避免后加 key 不可响应）。

14. Webpack 和 Vite 用过吗？核心差异是什么？

参考答案

Webpack：打包器，开发时也以 bundle 为中心；生态成熟、能力强，但大项目冷启动/热更新可能慢。
Vite：开发阶段基于原生 ESM + 按需编译（esbuild 等），HMR 快；生产仍会走 Rollup 打包。

15. Git 冲突怎么解决？

参考答案

git pull/rebase 后出现冲突 → 打开冲突文件，按 <<<<<< 标记手工合并。
git add 标记已解决 → git commit 或继续 rebase。
关键点：先理解“共同祖先/两边改动”，避免只保留一方导致回归 bug；必要时用 git mergetool。

16. 面向对象四大特性？

参考答案

封装、继承、多态、抽象（有的表述把抽象放入封装/接口体系中）。

17. TS 了解多少？你会怎么用它？

参考答案

常用能力：类型推断、联合/交叉、泛型、类型守卫、字面量类型、映射类型（Partial/Pick/Record）。
工程用法：
- API 层定义 DTO/接口返回类型；组件 props/emit 类型化；避免 any。
- 通过 ESLint/tsc 做质量门禁；用 zod/valibot 等在运行时校验（类型 + 运行时双保险）。

18. PostgreSQL vs MongoDB 有什么差异？各自“爽点”是什么？

参考答案

PostgreSQL（关系型）：
- 强一致事务、复杂 SQL（JOIN/窗口函数）、索引与查询优化成熟；适合强关系与复杂查询分析。
MongoDB（文档型）：
- Schema 灵活、文档聚合方便、水平扩展体验好；适合结构变化快、以文档读写为主的业务。
选型建议：以访问模式与一致性/事务需求为核心；不要只看“灵活”。

19. WebSocket 了解吗？适用场景是什么？

参考答案

基于一次 HTTP Upgrade 建立长连接，随后双向全双工通信。
适用：实时互动（聊天、协作、推送、游戏）；需要心跳、重连、消息协议与鉴权。