前端面试：性能优化

1. 前端性能优化一般从哪些方面入手？

加载性能、渲染性能、网络请求、缓存策略、包体积、图片资源、代码执行、监控分析。

2. 首屏加载慢怎么排查？

用 Network 看资源和接口耗时，用 Performance 看渲染和 JS 执行，用 Lighthouse 看指标。先定位是包大、接口慢、图片慢还是渲染慢。

3. 如何优化大列表渲染？

分页、懒加载、虚拟列表、减少响应式数据、避免一次渲染大量 DOM、合理使用 key、减少复杂组件嵌套。

4. 图片资源怎么优化？

压缩图片，使用 WebP/AVIF，懒加载，CDN，响应式图片，雪碧图或 iconfont/svg，避免上传超大原图。

5. 如何减少接口请求耗时对页面体验的影响？

接口并发、缓存、骨架屏、loading、失败重试、防抖、预请求、分页加载、后端接口聚合。

6. debounce 和 throttle 的区别？

防抖是停止触发一段时间后执行，适合搜索输入；节流是固定间隔执行一次，适合滚动、拖拽、resize。

7. 什么是懒加载？路由懒加载怎么做？

懒加载是需要时再加载资源。Vue Router 中用 component: () => import('@/views/Home.vue') 实现。

8. 如何做前端性能监控？

采集 FCP、LCP、CLS、FID/INP、接口耗时、JS 错误、资源加载失败等，上报到监控平台，结合用户环境分析。

9. 浏览器从输入 URL 到页面展示发生了什么？

DNS 解析、TCP 连接、TLS 握手、发送 HTTP 请求、服务器响应、浏览器解析 HTML、加载 CSS/JS、构建 DOM/CSSOM、渲染页面。

10. 重排和重绘是什么？如何减少？

重排是布局变化，重绘是样式变化。减少频繁 DOM 操作，批量修改样式，使用 transform/opacity 做动画，避免频繁读取布局属性。