全栈面试：前端基础
HTML 语义化有什么意义？
语义化 HTML 让页面结构更清晰，也有利于可访问性、SEO 和团队维护。
常见语义标签：
headernavmainsectionarticleasidefooter
面试时可以补充：语义化不是为了“标签高级”，而是让浏览器、搜索引擎、读屏器和开发者都更容易理解页面结构。
CSS 盒模型是什么？
盒模型描述元素尺寸由哪些部分组成：
- content
- padding
- border
- margin
box-sizing: content-box 时，设置的宽高只包含内容区。
box-sizing: border-box 时，设置的宽高包含 content、padding 和 border，更适合布局。
* {
box-sizing: border-box;
}Flex 和 Grid 怎么选？
Flex 更适合一维布局，比如横向导航、按钮组、左右排列。
Grid 更适合二维布局，比如卡片网格、仪表盘、复杂页面区域。
回答时可以说：
- 一行或一列优先 Flex。
- 行列同时控制优先 Grid。
- 复杂布局中两者经常配合使用。
JavaScript 事件循环是什么？
事件循环决定异步任务的执行顺序。
常见概念：
- 调用栈
- 宏任务
- 微任务
- 渲染时机
常见微任务：
Promise.thenqueueMicrotask
常见宏任务：
setTimeoutsetInterval- DOM 事件
面试常问执行顺序，核心是：同步代码先执行，微任务通常在本轮宏任务结束后清空，再进入下一轮宏任务。
防抖和节流有什么区别？
防抖是连续触发时只执行最后一次。
适合：
- 搜索输入联想
- 窗口大小变化后重新计算
- 表单校验
节流是固定时间内最多执行一次。
适合：
- 滚动监听
- 拖拽
- 按钮连续点击限制
一句话：防抖等用户停下来，节流控制执行频率。
前端性能优化有哪些方向？
常见方向：
- 减少首屏资源体积
- 路由懒加载
- 图片压缩和懒加载
- 使用缓存
- 减少不必要渲染
- 大列表虚拟滚动
- CDN 加速
- 拆包和按需加载
- 避免长任务阻塞主线程
面试时最好结合指标：LCP、CLS、INP、TTFB 等。
浏览器缓存有哪些？
常见缓存：
- 强缓存：
Cache-Control、Expires - 协商缓存：
ETag、Last-Modified - Service Worker 缓存
- 本地存储：
localStorage、sessionStorage、IndexedDB
强缓存命中时不会请求服务器。协商缓存会请求服务器判断资源是否变化。
SPA 首屏慢怎么优化？
常见方案：
- 路由懒加载
- 组件懒加载
- 减少首屏依赖
- 图片懒加载
- 开启压缩
- CDN
- 骨架屏
- SSR 或 SSG
- 预加载关键资源
如果是后台系统，通常先做路由级拆包和接口并行；如果是内容型站点，可以考虑 SSG 或 SSR。
跨域是什么？怎么解决？
跨域是浏览器同源策略限制导致的。协议、域名、端口任意一个不同，都属于不同源。
常见解决方案：
- 服务端配置 CORS
- 开发环境代理
- Nginx 反向代理
- JSONP，现代项目很少用
生产环境最常见的是后端配置 CORS 或网关反向代理。
前端面试追问
如何实现一个弹窗组件？
弹窗组件要先明确状态、层级、交互和可访问性。常见设计是用 visible 控制显示，用 Teleport/Portal 挂到 body，避免被父元素 overflow 或 z-index 影响。
关键点包括：遮罩层、关闭按钮、ESC 关闭、点击遮罩关闭、焦点管理、滚动锁定、动画、确认/取消回调。更成熟的回答可以补充：业务弹窗和基础弹窗要分层，基础组件只管展示和交互，业务逻辑放到外部。
如何设计表单校验？
表单校验一般分为字段级校验、表单级校验和服务端校验。前端负责即时反馈和基础格式校验，例如必填、长度、手机号、邮箱、联动规则；后端负责最终可信校验，例如权限、唯一性、库存、金额。
复杂表单要把校验规则配置化，并处理初始化、回显、异步校验、提交中禁用、错误聚焦等细节。面试时可以强调：前端校验提升体验，但不能替代后端校验。
如何处理前端错误上报？
常见错误来源有 JS 运行时错误、Promise 未捕获异常、资源加载失败、接口异常和框架错误边界。上报内容至少包含错误信息、页面地址、用户操作路径、浏览器信息、版本号、requestId 和时间。
实际项目里通常会做采样、去重、脱敏和 source map 解析。回答时可以补充：错误监控不是只收集日志，还要能定位影响范围、关联接口日志，并推动修复。
如何做权限路由？
权限路由一般流程是：登录后拿 token，请求用户信息和权限菜单，根据权限生成可访问路由，动态注册路由并渲染菜单。刷新页面时要重新恢复权限路由。
按钮权限可以用权限码控制，接口权限必须由后端校验。面试时要说明：前端权限只负责用户体验，不能作为安全边界。
如何优化大列表？
大列表卡顿通常来自 DOM 节点过多、渲染频繁、图片过大或计算逻辑重。常见优化是分页、虚拟列表、懒加载、减少响应式数据体积、避免每项创建复杂函数和组件。
如果是表格类场景，还可以做列裁剪、固定行高、服务端排序筛选。回答时最好结合数据量，比如“几万条数据不一次性渲染，而是虚拟滚动只渲染可视区域”。
如何避免重复请求？
重复请求可以从交互层和请求层同时处理。交互层可以禁用提交按钮、做防抖节流；请求层可以维护请求 key，短时间内相同请求复用 Promise 或取消旧请求。
对创建订单、支付回调这类关键接口，还必须由后端保证幂等，例如幂等 key、唯一索引、状态机。前端只能减少重复触发，不能保证业务最终正确。
如何处理移动端适配？
移动端适配要同时考虑布局、交互和设备差异。布局上可以用响应式布局、弹性单位、媒体查询；交互上要处理点击区域、输入法遮挡、滚动穿透、安全区和横竖屏。
如果是 H5 页面，还要关注不同 WebView、iOS/Android 差异、图片体积和首屏性能。面试中可以说：适配不是把页面缩小，而是让核心操作在小屏上依然清晰顺手。
如何让页面更可访问？
可访问性重点是让键盘、读屏器和低视力用户也能使用。常见做法包括语义化标签、表单 label、按钮可聚焦、合理的 aria 属性、足够的颜色对比、图片 alt 和清晰的错误提示。
弹窗、下拉、菜单等组件还要处理焦点顺序和 ESC 关闭。回答时可以补充：可访问性也能提升普通用户体验，比如更好的语义结构、键盘操作和错误提示。