牛客美团平台前端一面整理（浏览器 / 网络 / 工程化 / Vue）（十二）

收录日期：2026-05-06
关键词：前端、浏览器、网络、HTTP、缓存、跨域、工程化、Webpack、Vite、pnpm、Vue、性能优化

1. 浏览器渲染过程是怎样的？

参考答案

解析 HTML → 构建 DOM；解析 CSS → 构建 CSSOM。
DOM + CSSOM → Render Tree（只包含可见节点及其样式）。
布局（Layout/Reflow）计算几何信息；绘制（Paint）生成绘制指令；合成（Composite）在合成线程把图层合并上屏。
优化方向：减少强制同步布局（layout thrash）、降低重绘面积、合理使用合成层。

2. HTTP 缓存的机制？强缓存与协商缓存怎么配合？

参考答案

强缓存：命中则不发请求（或不请求资源本体），常用 Cache-Control: max-age、Expires。
协商缓存：会发请求确认是否更新，常用 ETag/If-None-Match 与 Last-Modified/If-Modified-Since，返回 304 复用本地缓存。
配合建议：
- 静态资源（带 hash）可用长 max-age, immutable；
- HTML 一般更短缓存或走协商，以便及时更新入口引用的资源版本。

3. HTTPS 的连接建立流程大概是什么？

参考答案

基于 TLS 握手：协商协议版本与加密套件 → 服务端发证书 → 客户端验证证书链与域名 → 生成会话密钥（RSA/ECDHE）→ 之后用对称加密通信。
目标：身份认证（证书）、传输加密、防篡改（MAC/AEAD）。
性能优化：TLS 1.3 0-RTT（有风险需评估）、会话复用/票据。

4. 跨域有哪几种解决方式？各自适用场景？

参考答案

CORS（最常用）：服务端返回允许源/方法/头；可配合凭证。
反向代理：同源部署或网关转发（开发与生产都常用）。
JSONP：只适用于 GET，安全性与能力有限，现代不推荐。
postMessage：跨窗口/iframe 通信（不是网络请求跨域的“取数”方案）。
document.domain：历史方案，仅同主域不同子域且条件受限，不推荐。

5. Vue 里 key 的作用是什么？为什么不能随便用 index？

参考答案

key 用于标识 vnode 身份，帮助 diff 做正确复用与最小移动。
用 index 的问题：当列表有插入/删除/排序时，index 会变化，导致错误复用（状态错位、输入框内容串位）与不必要的重建。
建议：使用稳定且唯一的业务 id。

6. 浏览器与 Node 的 Event Loop 有何差异？

参考答案

浏览器：宏任务（task）队列 + 微任务（microtask）队列；每个 task 结束后会清空 microtask；渲染时机与帧循环相关。
Node：事件循环分阶段（timers、poll、check 等），同时有 process.nextTick（优先级高于普通微任务队列）与 microtask（Promise）队列。
结论：两者都遵循“先清 microtask，再进入下一轮”，但任务来源/阶段划分/优先级细节不同。

7. Webpack 与 Vite 的核心差异？

参考答案

Webpack：以 bundling 为核心，开发时也打包（或增量打包），入口驱动构建依赖图。
Vite：开发阶段用原生 ESM + 按需编译（esbuild/插件），启动更快；生产阶段通常用 Rollup 做打包优化。
选型：大项目迁移需要评估插件生态、构建产物一致性与历史 loader/插件替代方案。

8. pnpm 的优势是什么？为什么它更省空间？

参考答案

pnpm 使用内容寻址存储（content-addressable store）：依赖包实际内容在全局 store 只存一份。
项目内通过硬链接/符号链接把依赖“挂”到 node_modules 的虚拟结构中，减少重复拷贝。
额外收益：更严格的依赖隔离（减少“幽灵依赖”），适合 monorepo 场景。

9. 一个前端项目的性能指标体系如何搭建？

参考答案

体验指标：Web Vitals（LCP、INP、CLS）、首屏/白屏、资源加载耗时、错误率。
采集方式：RUM（前端埋点）+ 性能 API（PerformanceObserver）+ 日志上报。
治理方式：性能预算、版本对比、异常告警、分端/分网络/分机型聚合分析。