-
答案是使用CSS3的transform、perspective和backface-visibility属性配合HTML结构实现3D卡片翻转。首先创建包含前后两面的card-container容器，通过设置perspective营造3D透视，利用transform-style:preserve-3d保持3D空间，使子元素旋转时不坍缩；.card应用transition实现过渡动画，hover时rotateY(180deg)触发翻转，.front与.back分别设置正背面样式，并用backface-visib
-
Less中url("@{var}/img.png")不生效，因变量需用~"@{var}/img.png"强制插值；路径值须匹配构建工具规则（如Vite用/img，Webpack用../assets/img），且应统一定义于paths.less中导入。
-
:visited伪类对<img>无效，因浏览器隐私限制仅允许作用于<a>且禁用filter；可靠方案是用JavaScript结合localStorage或class切换实现点击灰度效果。
-
Promise是异步流程控制的底层契约，其状态不可逆、then返回新Promise、catch仅捕获前序rejected，违背Promise/A+规范将导致静默失败或卡死。
-
过早晋升表现为老年代单次晋升量异常大（如>20MB/sec）、TenuringDistribution中年龄阈值骤降至2且age1对象占比过高、老年代呈阶梯式增长且FullGC释放极少；需排除大对象直入、System.gc()及GC算法差异干扰。
-
最有效解法是正确使用.clearfix类：必须包含content:"";display:table;clear:both，且加在直接包裹浮动子元素的父容器上；单独写clear:both在父元素上无效，因clear只影响自身位置，不解决父容器无法感知浮动子项的高度塌陷问题。
-
直接删掉冗余的<div>和<span>比任何CSS/JS优化都有效；DOM节点超2000时，低端设备layout耗时呈指数级增长。真正拖慢渲染的是人为嵌套的“结构惯性”，如多层<div>套娃、误用<ul>渲染表单、SSR空wrapper、图标单独包层等；应优先用::before/after、gap、outline、语义化标签（如<fieldset>）替代；可通过document.querySelectorAll('*').length快速检测节点
-
@media(color-gamut:p3)仅检测设备P3能力，不触发颜色升级；要显示更鲜艳色必须用color(display-p3)函数配合@supports检测，并提供sRGBfallback。
-
autofocus仅对原生可聚焦且处于可交互状态的表单元素有效，如text、email、textarea、select、button等；在iOSSafari中静默失效，动态插入、隐藏、禁用或非可聚焦元素上均无效。
-
移动端分栏堆叠失效的根本原因是viewport缺失、父容器未设flex-wrap:wrap、子项使用固定宽或百分比硬编码；应改用flex:1或grid配媒体查询，配合max-width和响应式gap、line-height等。
-
return()方法是迭代协议中保障资源安全释放的关键机制，用于在迭代被提前终止时执行清理逻辑并返回{value:any,done:true}。
-
响应式系统SSR“注水”报错本质是客户端激活时DOM结构、文本或节点顺序与服务端输出不一致，导致丢弃HTML重渲染；关键在于确保两端渲染结果严格一致，需统一初始数据、隔离请求状态、规避环境敏感逻辑、校验VNode结构。
-
HTML压缩是安全有效的性能优化手段，核心配置需谨慎：collapseWhitespace和removeComments必须配合preserveLineBreaks与ignoreCustomFragments使用，避免pre/textarea内容错乱；removeOptionalTags慎用于旧浏览器；Webpack中html-webpack-plugin需显式配置minify对象而非布尔值；服务端Gzip/Brotli压缩比构建时HTML压缩更关键且高效。
-
现代响应式布局应以flexbox+grid为核心，外层grid划分区域、内部flex流式排列，配合srcset、clamp、prefers-reduced-motion等原生特性实现真正可用的跨设备体验。
-
函数柯里化是将多参函数转为单参函数链，通过闭包逐步收参、延迟执行；函数组合则串联单参函数，让数据从右向左流动。二者结合可提升代码复用性、可测试性与表达力。
