-
边框默认占用额外空间是因为content-box模型下width/height仅含内容区，padding和border会额外增加尺寸；改用box-sizing:border-box可使设定宽高包含padding和border，内容区自动收缩，margin不受影响。
-
selection.toString()返回空字符串主因是事件时机不当或上下文错误：mouseup后焦点丢失、iframe/contenteditable未切换文档、rangeCount为0；需防抖、校验单range、限定语义块并同步读取。
-
opacity动画需显式声明transition或animation才能生效，@keyframes必须明确起止值0和1，配合forwards填充模式及visibility:hidden实现真正淡出。
-
背景被border裁切是因默认background-clip:content-box；应设background-clip:border-box，配合background-origin:border-box解决偏移，圆角需同步设border-radius；兼容问题可改用box-shadow或padding模拟边框。
-
hr默认样式跨浏览器不一致：IE用color设色，Firefox/Safari需background-color，Opera还需height；须同时设border:none、height:1px、color与background-color同值才能统一渲染。
-
及时断开无用引用是提升Python、Java/.NET等GC效率的关键，需重点清理缓存过期条目、未反注册监听器、静态集合引用、内部类隐式引用，并在销毁方法中集中处理，结合语言特性如WeakHashMap、IDisposable等协同优化。
-
纯CSS实现Tab切换不能仅靠float，因其仅为布局属性，无法响应交互或控制显隐；真正生效的是:checked、:target等伪类配合HTML结构实现状态切换。
-
前端仅引导支付流程，真实交易由后端完成；Stripe用Elements隔离卡信息，PayPal用Buttons组件调起原生结账；密钥、金额校验、状态确认均须后端处理，严禁前端接触敏感数据。
-
<kbd>标签专用于标记用户必须亲手按下的物理键或组合键，如<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Esc</kbd>；不可用于代码（应选<code>）或系统输出（应选<samp>），嵌套须符合真实按键逻辑，且需保障语义完整性以支持无障碍访问。
-
shallowRef是Vue3自发布起内置的浅层响应式API，仅对.value本身变化响应，不递归代理内部属性，适用于大型数据整体替换场景（如万级表格、ECharts实例、静态配置），可降渲染开销60%–70%，配合triggerRef支持局部修改后手动触发更新。
-
设置height:100vh会导致Flex布局在输入法弹出时变形，因其按初始视口高度计算且iOSSafari等不更新vh或触发resize；应改用min-height/max-height:100dvh+overflow-y:auto，并对关键区域设flex-shrink:0或flex:00auto，配合visualViewport.resize监听与防抖处理。
-
使用opacity和transform实现弹窗动画，配合visibility控制显隐，避免重排；通过will-change提升图层性能，监听transitionend事件精准控制状态切换，避免强制同步布局，并尊重prefers-reduced-motion用户偏好以提升体验与性能。
-
必须先在HTML中创建带id且设宽高的div容器，再用L.map('id')初始化地图并setView设置中心和缩放级别；接着用L.tileLayer加载匹配EPSG:3857投影的瓦片图层并addTo(map)；最后确保JS执行时机正确、网络请求成功、DOM结构完整。
-
组件初始化慢本质是多个逻辑在错误时机集中执行，挤占主线程；应将非首屏逻辑移出created、用nextTick/setTimeout延后执行，依赖DOM的操作推迟至mounted并配合requestIdleCallback或IntersectionObserver降权，重型第三方库改用defineAsyncComponent或dynamicimport按需加载，结合performance.mark精准测量各生命周期耗时，避免强制同步布局等隐性性能陷阱。
-
flat(Infinity)仅适用于纯数组嵌套，无法处理对象、null、undefined或循环引用；对树形结构等需递归提取字段的场景完全无效。
