-
gap本身不画边框，而是通过网格容器背景色“透出”间隙来模拟边框效果，需设置容器背景色、子项纯色背景，gap值即为“边框宽度”；IE11需用-ms-grid-column或flex降级；background-clip方案存在兼容性与渲染问题。
-
解构赋值是JavaScript中从数组或对象提取值并赋给变量的简洁语法。它不创建新数据，而是直接拆解已有结构；支持对象（含重命名、默认值、嵌套）和数组（含剩余、交换、函数返回值）解构；可用于函数参数，提升可读性与灵活性；需注意浅拷贝及null/undefined报错问题。
-
块状链表通过将数据分块存储，结合链表与数组优势，提升插入、删除和查找效率。
-
::selection是品牌色落地的必选项，因它决定用户高亮文本时的第一眼色彩反馈，需作为设计token显式声明与维护，并用静态色值确保跨浏览器兼容及无障碍对比度达标。
-
TreeShaking是一种基于ES6模块静态分析的构建优化技术，通过标记并剔除未使用的代码来减小打包体积；它依赖于静态的import/export语法，不支持CommonJS动态模块，在生产模式下结合Terser等压缩工具生效，且需在package.json中配置sideEffects以帮助构建工具判断代码是否可安全删除。
-
Chrome中font-smoothing无效是因-webkit-font-smoothing仅macOS有效，Windows/Linux下被静默忽略；应优先使用font-optical-sizing:auto等标准属性，而非依赖私有平滑控制。
-
accept属性仅优化文件选择体验，不提供安全校验；真正有效的文件类型校验必须由后端通过Content-Type和文件头（magicbytes）完成，前端需配合扩展名正则和多端真机测试。
-
必须设transform-style:preserve-3d，否则子元素被压平成2D，rotateY/X无效；需加在直接包裹正反面的容器上，且移动端需补-webkit前缀。
-
conic-gradient适合做加载圆环，因其可直接按角度切分颜色，无需拼接radial-gradient或依赖transform:rotate()动画，CSS更简洁、动画更平滑；但不支持IE，旧版Safari也有兼容问题。
-
flex-direction:column-reverse仅翻转主轴方向，不改变DOM顺序，故tabindex、屏幕阅读器、:first-child等仍按原始HTML生效；适用于纯展示场景，无障碍或交互场景应优先用order属性控制视觉顺序。
-
Flex多列布局核心是设容器display:flex，用flex-direction、flex-wrap和子项flex属性控制排列；三栏等宽用flex:1而非width百分比；两栏自适应推荐flex简写组合；响应式切换需配合flex-wrap和媒体查询。
-
FOIT指字体加载时文字空白，FOUT指先用系统字体再替换；默认font-display未设导致浏览器策略不一，swap最常用但需控制字体度量差异，preload关键字体可缩短swap窗口，自助托管比第三方服务更可控。
-
RetainedSize是识别闭包内存泄漏最直接有效的指标——它反映闭包被回收后可释放的内存量；聚焦(closure)构造函数，按RetainedSize降序排序，重点排查超500KB且持续增长的实例，通过Retainers追溯至window、全局Map或已卸载组件等泄漏源头，并结合多快照对比与CapturedValues分析定位真凶。
-
<p>Less无法自动平衡多栏高度，但可通过变量精准控制列宽比例：用@columns定义总栏数，结合calc()和运算式（如(100%-(@columns-1)*@gap)/@columns）动态计算净宽，并通过mixin封装响应式列布局，支持断点切换栏数。</p>
-
直接用@keyframes+animation可实现可靠高性能滑入动画：定义slideIn关键帧使元素从translateX(-20px)/opacity:0到translateX(0)/opacity:1，再通过animation:slideIn0.4sease-outforwards应用，注意避免display:none、overflow:hidden等导致失效，并分离slide-in/slide-out逻辑确保多次进出稳定。
