-
首图更快下载的关键是避免被降级：浏览器默认将所有<img>设为Medium优先级，需用fetchpriority="high"（Chromium112+）或<linkrel="preload"as="image">主动声明其关键性，确保显示Highest优先级，而非盲目提速。
-
亚像素缝隙源于margin/top等布局属性在计算中被四舍五入，而transform属合成层操作，可保留0.1px级精度，真正实现像素对齐。
-
findLastIndex更可靠因其规范定义逆向遍历逻辑，从末尾起查首个匹配项即返回，避免手写循环的边界错误、索引错位及语义混淆，天然适配“最后一个生效操作”场景。
-
可通过自定义tailwind.config.js中theme.extend.gridTemplateColumns添加动态列配置，如'5':'repeat(5,minmax(0,1fr))'，再配合gap工具类与min-w-0等处理溢出和错位问题。
-
display:inline-block是分页按钮的常见选择，因其支持并排排列、宽高设置且不脱离文档流，兼容IE8+；但需处理换行间隙，常用font-size:0或无空格HTML解决。
-
animation-play-state是唯一能真正暂停并从断点继续的原生方案，仅适用于纯CSS@keyframes动画；Canvas、Three.js和requestAnimationFrame动画需手动管理时间戳与状态，否则暂停后会重头开始或跳变。
-
用min-height:100vh撑满视口最可靠，避免height:100vh截断内容；推荐设在主容器而非html/body；配合Flex布局（父容器flex-column+min-height:100vh，主内容flex:1）可实现页脚粘底；iOSSafari需注意vh兼容性，可用JS动态适配或回退height:100%。
-
nonce是CSP中授权内联脚本执行的一次性随机字符串，需服务端同步生成并严格匹配响应头script-src'nonce-xxx'与标签nonce="xxx"属性，否则静默失效。
-
跨域请求因浏览器同源策略被阻止，是安全机制而非bug；解决方式主要有CORS（服务端配置响应头）、JSONP（仅GET，已淘汰）和代理服务器（开发常用），推荐优先配置CORS。
-
z-index在3D场景中失效是正常现象，因浏览器按Z轴实际坐标（如translateZ值）而非z-index数值决定渲染顺序；需通过调整transform中的Z值精确控制前后关系。
-
文字环绕浮动图片需用float:left/right，图片须为普通流内元素并设width和margin；后续块级元素可能清除浮动导致环绕失效，关键在父容器与兄弟元素的样式交互。
-
Nginx能做WebSocket负载均衡，但必须配置proxy_http_version1.1、Upgrade/Connection头透传、proxy_read_timeout与proxy_send_timeout延长至86400、禁用缓冲，并依后端状态选择ip_hash或least_conn算法。
-
grid-column-gap控制列间水平间距，row-gap控制行间垂直间距；前者作用于列轴，后者作用于行轴，两者均推荐用column-gap和row-gap替代以提升跨布局通用性。
-
Flex适用于一维布局（单行/列对齐、分布、顺序调整），Grid专用于二维网格（行列同时控制）；二者分工明确，常嵌套使用——Grid作外层区域划分，Flex处理内部细节对齐。
-
bottom:0只对position为absolute、fixed或sticky的元素生效，且依赖最近已定位祖先（如position:relative）作为参考系；若无，则锚定视口底部。
