-
掌握CSS的transformrotate与animation结合使用，可实现加载图标匀速旋转、悬停交互及摆动等动态效果，提升网页视觉体验。
-
媒体查询本身不调用GPU，但其激活的样式（如transform、will-change）会间接增加GPU负载，导致卡顿、掉帧和发热；需优化图层合成、断点单位、布局切换及媒体元素缩放策略。
-
v-text安全输出纯文本，自动转义HTML字符、防XSS；v-html解析执行HTML，不转义、有XSS风险，仅适用于可信富文本。
-
gap比margin更适合卡片布局，因其是容器级属性，只作用于直接子元素间间隙，不触发外边距合并，避免首尾多余空白；但需卡片为flex或grid的直接子元素。
-
结论：别碰body的margin，用容器元素包裹内容并设margin或padding更可控；因浏览器对body默认外边距不一致，重置会引发外边距合并等不可预期问题。
-
viewport-fit=cover是env()生效的硬性前提，不加则iOS上env(safe-area-inset-bottom)恒为0px；必须在meta中完整声明width=device-width、initial-scale=1.0和viewport-fit=cover，缺一不可。
-
全局事件总线易致内存泄漏，须在组件卸载前手动解绑；Vue2用beforeDestroy，Vue3用onBeforeUnmount并保存handler引用；禁用匿名函数；推荐mitt等无副作用库；优先用provide/inject+defineEmits替代跨层级通信。
-
li:nth-child(2)未选中第二个li，因其匹配父元素下第2个子节点且必须是li，若该位置为注释、div或空白文本节点则失效；而li:nth-of-type(2)只统计li标签序号，更稳定可靠。
-
优化多重复数断言正则的关键是控制回溯范围与深度：用否定字符类限定断言内匹配、外提逻辑预筛、原子组切断回溯路径、合并或拆分断言、锚定加长度前置剪枝。
-
本文教你通过现代CSS布局技术（尤其是Flexbox）解决移动端内容右偏、错位问题，无需依赖浮动或绝对定位，兼顾响应式与语义化。本文教你通过现代CSS布局技术（尤其是Flexbox）解决移动端内容右偏、错位问题，无需依赖浮动或绝对定位，兼顾响应式与语义化。你的网站在桌面端显示正常，但在手机上文字和图片整体向右偏移——这通常不是视口设置缺失导致的（你已正确添加<metaname="viewport"content="width=dev
-
HTML表单不支持长轮询，因其默认短连接提交机制与长轮询需持续持有连接的特性冲突；正确做法是禁用默认提交，提取表单数据后用fetch+AbortController手动实现循环请求。
-
JavaScript前端安全的核心是“不信任任何客户端输入”，所有校验、权限控制和敏感数据处理必须在服务端完成；需防范XSS（转义输入、禁用危险API）、防敏感信息泄露（不硬编码密钥、脱敏展示）、防CSRF（配合服务端token与SameSite策略）、保障通信安全（HTTPS、CSP、域名校验）。
-
生成器函数配合闭包可构建轻量、可复用、状态隔离的异步控制流管理器，其核心是function*暂停执行+闭包保存上下文+外部驱动next/resume实现手动调度。
-
dir属性是HTML原生方向开关，必须显式设于根元素或容器，不可被CSS的direction替代，因其触发Unicode双向算法，影响光标、表单、焦点流及屏幕阅读器解析。
-
Math.hypot()的核心价值是安全计算多维欧氏距离，通过缩放算法避免平方导致的溢出或下溢；支持任意维度，计算两点距离需先求坐标差再传入；对Infinity、NaN、零等特殊值有明确定义。
