-
video元素默认不响应left/top定位，需设position:relative或absolute才能生效；用transform:translate()比top/left更高效且不受overflow影响。
-
toString在对象转字符串时被优先调用，如字符串拼接、alert、console.log、String()；valueOf在需原始值时被优先调用，如数学运算、比较、Number()；引擎按规范顺序尝试二者，重写需确保返回符合类型要求的值。
-
防抖和节流是前端优化高频事件的常用手段。防抖通过延迟执行，仅触发最后一次操作，适用于搜索框输入等场景；节流则保证函数在固定时间间隔内至少执行一次，适合滚动监听等持续触发的事件。两者核心区别在于执行频率控制策略不同，防抖关注最终状态，节流注重规律响应。
-
纯CSS实现toggle开关：用label包裹checkbox，设label为relative定位，滑块用label::after绝对定位并加transform过渡；状态通过:checked+.slider控制，避免display:none导致点击失效，确保触控热区充足且动画平滑。
-
padding-block是按writing-mode动态映射块方向内边距的逻辑属性，非简单替代padding-top/bottom；其start/end端映射取决于书写模式，如horizontal-tb下对应上下，vertical-rl下对应左右，未设writing-mode时行为等同物理属性但语义不同。
-
用relative是为让按钮保留在文档流中并作为气泡定位参考；气泡不必是直接子元素但强烈推荐，否则易因containingblock变化导致错位；尖角对齐靠伪元素加transform微调；移动端需JS控制显隐，不可单靠:hover。
-
不设width=device-width会导致页面以默认980px虚拟视口渲染，内容缩小、交互失准；其作用是让浏览器按设备物理宽度（如375px）布局，缺失时响应式基础全面失效。
-
display:flex后子元素不等高，是因为align-items:stretch需父容器有明确交叉轴高度且子元素未设height/min-height等覆盖属性，否则拉伸失效。
-
本文用一个轻量前端错误监控方案，演示如何捕获运行时报错和 Promise 未处理拒绝，整理上报字段，并用 sourcemap 还原源码位置形成告警闭环。
-
小报表可以由浏览器直接生成，大数据量报表则应交给后端异步任务，并通过进度事件和短时下载地址交付。关键不是文件后缀，而是浏览器内存、请求时限、失败重试和权限边界。
-
纯CSS无法实现真正的Mesh渐变，但可通过多个radial-gradient()叠加、精准定位、rgba透明度控制及伪元素分层模拟苹果UI中的柔和多点径向渐变效果。
-
id必须唯一、class可复用是HTML规范强制要求，影响DOM操作、CSS优先级、可访问性和SEO；重复id会导致getElementById返回首个元素、aria属性失效、锚点跳转不可预测等问题。
-
微信小程序WebSocket连接失败主因是wss域名未在公众平台配置白名单；需单独添加ws子域名、禁用路径、测试版需开启debug；状态判断应以socketTask.readyState为准；心跳必须在onOpen中启动；重连须防抖退避并重置socketTask。
-
在JavaScript中，若在循环中边执行regex.exec()边对原字符串调用String.replace()修改它，会导致后续匹配索引错位、部分匹配被跳过——根本原因是每次replace()都生成新字符串，而exec()的lastIndex仍基于旧字符串位置。在JavaScript中，若在循环中边执行`regex.exec()`边对原字符串调用`String.replace()`修改它，会导致后续匹配索引错位、部分
-
WebWorker适合处理DAG构建、更新和拓扑排序等计算密集型任务，核心是将图结构管理与Kahn算法完全移入Worker，用纯对象+邻接表表示图（如{edges:[["A","B"]],indegree:{"A":0,"B":1}}），预缓存入度，支持addEdge/removeEdge/removeNode等动态操作，并通过JSON-safe消息与主线程通信，附带时间戳防旧数据渲染。
