-
递归适用于树形遍历、嵌套对象、分治问题，但需严控深度、避免重复计算、设明确终止条件；否则易栈溢出；应校验输入类型与范围，超深结构宜用栈模拟，DOM操作慎用递归，优先选用flat()、structuredClone()等内置方法。
-
z-index失效的根本原因是父容器创建了层叠上下文，导致子元素的z-index仅在该上下文中生效；常见触发属性包括opacity<1、transform≠none、filter、will-change、position:fixed/absolute等。
-
正确使用<picture>标签需按视口条件选择不同图片资源：<source>用media定义断点，srcset提供对应分辨率选项，<img>为必需兜底；media必须是合法媒体查询，srcset在source中仅处理设备像素比切换，img的src不可省略且需配alt。
-
浮动图片后文字不环绕或父容器塌陷，需区分处理：对后续块级元素加clear:both清除浮动影响；对父容器用clearfix或display:flow-root使其包含浮动子元素。
-
本文介绍如何使用<inputtype="checkbox">+<label>组合创建最简、语义正确且符合无障碍标准的切换按钮，无需手动管理aria-pressed或编写样式逻辑，天然支持浏览器默认按压态与键盘交互。
-
答案：实现网页视频直播需结合HTML5Video与MSE支持HLS/DASH流播放，通过OBS推流至Nginx-rtmp或SRS服务器，经CDN分发；低延迟场景采用WebRTC配合Mediasoup等SFU服务，前端用hls.js或WebRTCAPI集成，后端保障HTTPS、防盗链与自适应码率，确保跨设备兼容与稳定传输。
-
使用@keyframes同时控制scale和opacity实现缩放+淡入/淡出动画，需定义modal-fade与modal-fade-reverse两组关键帧，起始scale设为0.8避免渲染异常，隐藏后须监听animationend并设置display:none或移除DOM。
-
必须在表单submit事件中调用event.preventDefault()阻止默认提交，仅监听form元素的submit事件；利用checkValidity()和reportValidity()进行原生约束验证，setCustomValidity()处理业务逻辑验证，服务端必须重新校验。
-
CSS变量需以--开头、大小写敏感，定义在:root可全局复用；支持深色模式通过@media或class重写；var()支持字面量回退值但不支持嵌套var()；IE不支持需fallback或构建时处理。
-
sticky定位结合relative与fixed特性，设置如top值后元素在滚动至临界点时固定于视口，常用于表头、导航栏等场景，需注意必须指定偏移量且父容器足够高，否则无效。
-
箭头函数与传统函数最核心区别是this绑定方式不同：箭头函数this词法绑定、不可变，无arguments、不能new调用、无prototype；传统函数this动态绑定，支持arguments、new及call/apply/bind。
-
绝对定位元素脱离父容器是因为父元素未设置非static定位，导致其相对于最近的已定位祖先或视口定位；解决方法是为父元素设置position:relative等非static值，以建立定位上下文，使子元素正确相对于父容器定位。
-
HTML5语义化标签不影响CSS样式，需手动编写CSS规则；语义标签仅提升可访问性与SEO，样式生效取决于选择器优先级，推荐语义标签+class组合使用。
-
Promise本身不直接解决回调地狱，真正打破它的是then链式调用与async/await；嵌套回调因缩进失控、错误分散、逻辑难追踪而成“地狱”；then通过返回新Promise实现流程扁平化；async/await则让异步代码如同步般自然，配合try/catch统一捕错。
-
JavaScript对象本身不保证属性遍历顺序（尤其在旧引擎或非标准操作中），即使手动按数值排序生成对象，for...in或Object.entries().forEach()仍可能因键被解析为数字而触发引擎内部重排序；需用数组结构固化顺序或使用Map。
