前端高频面试题汇总
本文覆盖浏览器原理、性能优化、工程化、React/Vue、微前端、网络安全、Node 等核心知识点。
欢迎点赞收藏，共同进步！
🧠 一、基础原理与通识
1. SSR 链路渲染是什么？
SSR（Server Side Rendering）即服务端渲染，指 HTML 内容在服务器生成后直接返回给浏览器，减少首屏白屏时间，提升 SEO 效果。
2. 浏览器同源策略为什么 CDN 不会跨域？
CDN 请求静态资源时使用
3. cookie 可以实现不同域共享吗？
不可以。cookie 是按域隔离的，但可以通过设置 主域（Domain） 实现子域共享。
4. px 如何转 rem？
通过设置 html { font-size: 16px }，然后 1rem = 16px，可通过 postcss-pxtorem 插件自动转换。
5. flex: 1 代表什么？
表示 flex-grow: 1; flex-shrink: 1; flex-basis: 0，元素会自动填充剩余空间。
⚙️ 二、工程化与构建
1. babel-runtime 是干什么的？
@babel/runtime 提供 Babel 转译后的辅助函数复用，避免每个文件重复注入 helper。
2. package.json 中 sideEffects 是干什么的？
告诉打包工具哪些文件有副作用，帮助 tree-shaking 删除未使用代码。
3. 为什么 Vite 比 Webpack 快？
因为 Vite 使用 ESBuild（Go 写的）来预构建依赖，并基于浏览器原生 ESM 动态导入，不需要全部打包。
4. hash 是如何生成的？
Webpack 根据文件内容计算 hash 值，内容改变 hash 就会变化，用于缓存更新控制。
🧩 三、React 专区
1. 为什么循环渲染不推荐用 index 做 key？
因为 key 影响 diff 过程，使用 index 会导致错误复用节点，引发 UI 不一致。
2. 如何避免 context 引起全量重新渲染？
通过 memo + useContext + useMemo 或 context selector 优化。
3. 如何实现路由变化监听？
可使用 useLocation() 或 history.listen() 实现。
4. React 如何做性能优化？
- 组件拆分 + React.memo
- 合理使用 useMemo / useCallback
- 懒加载组件
- 避免不必要的 re-render
🧱 四、Vue 专区
1. 为什么不要在同一元素上同时用 v-if 和 v-for？
因为 v-if 优先级高于 v-for，会导致循环逻辑混乱，建议外层包一层<template>。。
2. Scoped Styles 如何实现样式隔离？
Vue 在编译时为每个组件添加唯一的 data-attr（如 data-v-xxx），实现样式作用域隔离。
🪞 五、微前端与架构设计
1. 为什么不推荐 iframe 实现微前端？
iframe 虽然天然隔离，但通信困难、体验差、样式不一致，不利于集成。
2. Qiankun 如何实现 JS 隔离？
通过 Proxy + sandbox 模拟独立 window 作用域，实现运行时沙箱。
3. 前端权限设计思路：
- 登录后后端返回权限列表
- 前端根据权限生成路由表
- 页面内按钮/功能点权限控制
📊 六、性能优化与监控
1. 首屏加载慢 2 秒怎么排查？
-
检查资源体积（分析 bundle）
-
使用懒加载、代码分割
-
服务端开启 Gzip/Brotli
-
检查接口耗时和阻塞资源
2. 如何保证批量请求失败只弹一个 Toast？
使用统一请求封装，通过拦截器收集错误，在所有请求结束后统一弹出。
3. 如何统计全站请求耗时？
封装 axios，记录请求开始/结束时间，上报耗时数据。
4. 如何做前端监控？
可接入 Sentry、阿里 ARMS，或自建 SDK，上报错误、性能、用户行为。
🌐 七、网络与安全
1. 单点登录（SSO）原理
通过统一认证中心（CAS），各系统共享 token 或 session，实现一次登录多系统可用。
2. OAuth2.0 授权登录
客户端跳转授权服务器 → 用户授权 → 获取 code → 后端交换 access_token → 登录成功。
3. 跨域携带 Cookie 的配置
axios.defaults.withCredentials = true;
response.setHeader('Access-Control-Allow-Credentials', 'true');
### **💡 八、实用技巧与场景题**
1. 如何禁止别人移除网页水印？
使用 canvas 动态绘制 + MutationObserver 检测 DOM 删除并自动重绘。
2. 如何实现网页加载进度条？
使用 NProgress 或在 axios 拦截器中统计请求完成比例。
3. 如何一次性渲染十万条数据不卡顿？
虚拟列表（Virtual Scrolling），只渲染可视区域节点。
4. 如何实现大文件分片上传？
使用 Blob.slice() + 多线程上传 + MD5 校验 + 断点续传。
5. 页面白屏排查思路：
- 检查 JS 报错（console）
- 网络资源加载失败
- SSR 返回空内容
- CDN 缓存错误
🧮 九、Node 与工具链
1. Node 如何利用多核？
使用 cluster 模块创建多个进程共享端口。
2. 如何写命令行工具统计代码行数？
使用 fs.readdir + readline 递归统计行数，可封装为 CLI。
3. git pull 与 fetch 区别？
- fetch 只拉取更新，不合并
- pull = fetch + merge
🧭 十、总结与延伸
前端的学习与面试，本质上是一个不断积累与反思的过程。
无论是从基础的 HTML、CSS、JavaScript，到进阶的工程化、性能优化、监控体系，再到微前端与架构设计，
每一个知识点都不是孤立存在的，而是相互关联、共同支撑起前端工程的完整体系。
你不需要一次性掌握所有内容，
更重要的是——知道问题出现时该往哪里查、如何快速定位、如何解决。****
保持好奇、持续学习、深入理解原理，
才能在项目复杂度和技术更新的浪潮中，始终保持清晰的判断力。
