前端高频难题
一次讲透

Q1为什么父元素高度总是塌陷？

最常见原因是子元素使用了 float 或绝对定位，脱离了文档流，父元素无法感知其高度。解法优先级：优先用 flex/grid 替代 float；其次在父元素加 overflow:hidden 或使用伪元素 clearfix。

.clearfix::after { content:''; display:block; clear:both; }

Q2闭包到底怎么理解？为什么循环里用 var 会出问题？

闭包是"函数 + 其声明时的词法作用域"。循环里用 var 声明变量是函数级作用域，所有闭包共享同一个变量，导致拿到的都是最终值。解法：用 let 块级作用域，或用 IIFE 立即执行函数。

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0); // 0 1 2
}

Q3为什么我用 display:none 切换还会闪一下？

display:none 会触发强制重排，频繁切换体验差。推荐用 visibility + opacity 或 transform 做淡入淡出，配合 transition 过渡；组件隐藏可用 v-if 按需渲染、显隐动画用 transition 包裹。

Q4跨域请求报 CORS 怎么解决？

CORS 是浏览器同源策略的安全机制。解法：后端配置响应头 Access-Control-Allow-Origin；开发环境用代理（Vite/Webpack devServer proxy）；同源或 JSONP 仅限 GET 等。生产环境务必通过网关统一配置而非前端绕过。

res.setHeader('Access-Control-Allow-Origin', 'https://example.com')

Q5页面首屏白屏太久怎么优化？

白屏根因通常是主包过大或接口阻塞。思路：代码分割按需加载、资源预加载、图片懒加载、接口并行/缓存、骨架屏过渡，必要时上 SSR/预渲染。可先用 Lighthouse 定位瓶颈再针对性优化。

Q6为什么设置了 z-index 却不生效？

z-index 只对定位元素（relative/absolute/fixed/sticky）或 flex/grid 子项生效。若父元素创建了层叠上下文（如设置了 transform/opacity/filter），子元素 z-index 只能在父上下文内比较。检查父链上是否有创建层叠上下文的属性即可。

Q7flex 布局下文本溢出、子项被压缩怎么办？

flex 子项默认 min-width:auto，内容过长会撑破布局。给子项加 min-width:0 允许收缩，文本用 overflow:hidden; text-overflow:ellipsis; white-space:nowrap 截断；需要自适应宽度时用 flex:1 配合最小宽度控制。

.flex-item { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

Q8浏览器兼容差异太多，怎么高效处理？

先定兼容矩阵（目标浏览器与版本），再用 autoprefixer/PostCSS 处理前缀、Babel 转译语法；特性用 caniuse 查兼容性、用特性检测 + 降级方案兜底，别为极低占比的旧浏览器牺牲体验。

Q9事件委托怎么写？为什么按钮重复绑定不生效？

事件委托把监听挂在父元素上，通过 e.target 判断触发元素，动态新增节点无需重新绑定。重复绑定同一监听会导致多次触发，同名函数直接绑定不会去重，需要 removeEventListener 或使用具名函数。

list.addEventListener('click', e => {
  const btn = e.target.closest('button');
  if (btn) handle(btn.dataset.id);
});

Q10打包后体积太大、加载慢怎么拆？

用路由懒加载拆页面级 chunk，第三方库按需引入并开启 Tree Shaking；antd/element 等组件库按需加载，图片压缩 + CDN 分发，最后用打包分析工具（webpack-bundle-analyzer）找出体积大头逐一优化。