-
事件委托本质是利用事件冒泡，将监听器绑定在稳定父元素上，通过event.target.closest()安全匹配目标元素，避免重复绑定与内存泄漏，不适用于行内事件或冒泡被阻断等场景。
-
本文详解如何在网页加载遮罩层中，动态选取随机文案，并通过纯JavaScript实现平滑、可控的逐字打字机效果，兼容现代浏览器且无需第三方库。
-
按钮点击样式不生效主因是:active伪类未触发，因元素不可激活或缺失tabindex/role；:active仅瞬时生效，持续状态需JS切换类名；框架优先级、移动端延迟、事件目标错位亦为常见原因。
-
能，flex-wrap:wrap可解决子元素换行溢出，但需父容器设display:flex且子元素总宽超容器；若无效，常因未启flex布局、子项设flex-shrink:0或white-space:nowrap等干扰因素。
-
z-index只影响同层叠上下文内的兄弟元素，无法使子元素盖过父元素；父元素设position非static且z-index（含0或auto）即创建新层叠上下文，子元素z-index仅在该上下文中生效。
-
navigator.geolocation.getCurrentPosition()失败主因是安全上下文缺失、用户拒绝授权、设备无定位能力或未设error回调；需配enableHighAccuracy、timeout、maximumAge等options参数，并用permissions.query判断权限状态。
-
DOM操作重在安全高效可维护：优先用textContent防XSS与重排，getElementById因底层索引比querySelector快且稳妥，动态元素须用事件委托，批量修改应避免频繁重排重绘。
-
vw/vh“不听话”因基于视口尺寸且受地址栏收放、横竖屏影响而突变；应优先用100dvh，降级用JS更新--vh变量；vmin/vmax适用于约束极端比例，非等比缩放；mix-blend-mode需配合isolation:isolate；calc内运算符前后须有空格，不可嵌套。
-
CSS定位在响应式设计中易引发错位、重叠等问题，主因是absolute/fixed脱离文档流，忽略父容器变化；应改用相对单位、sticky替代fixed、显式设置relative参照系，并优先采用Flex/Grid等现代布局替代定位hack。
-
concat方法不会改变原数组，它返回新数组。例如arr1.concat(arr2)后arr1不变。若变量被重新赋值，是引用改变而非原数组变化。包含对象时仅共享引用。对比push、splice等会修改原数组的方法，concat更安全。
-
Tailwind与Bootstrap颜色体系本质不同：前者是亮度阶梯原子类（如red-50到red-900），后者是语义绑定变量（如$danger），直接替换class会导致色调丢失、一致性破坏；迁移需同步配置theme.extend.colors并避免纯黑白基础色，深色模式处理逻辑也截然不同。
-
纯CSS无法监听外部样式表加载完成，必须用JS监听link.onload事件触发类名切换，再通过伪元素实现Loading动画效果。
-
虚拟DOM通过JavaScript对象模拟真实DOM，结合diff算法高效比对新旧节点差异，仅将最小更新应用到真实DOM。利用同层比较、类型判断和key标识，避免全量渲染，提升性能。关键在“先算再改”，实现开发体验与运行效率的平衡。
-
rgba()的alpha值为0–1小数而非百分比，如rgba(0,0,0,0.5)有效，rgba(0,0,0,50)无效；它仅作用于颜色本身，不影响子元素，与影响整个元素及其后代的opacity有本质区别。
-
CSSfilter:grayscale()是最快实现黑白效果的方式，兼容现代浏览器且无需JS；动态切换可用class控制；IE需SVG或Canvas回退；Canvas适合精细图像处理但性能较低；SVG滤镜更稳定可控。
