-
不能用rotate()做波浪背景，因其使整条路径歪斜错位而非横向流动；正确做法是用translateX()平移SVG路径实现无缝循环，配合多层错速位移与透明度衰减模拟真实海浪层次。
-
:placeholder-shown是唯一靠谱的纯CSS空状态检测方式，因:empty对input无效，CSS无法监听value变化，而该伪类原生语义化反映placeholder显示状态。
-
根本原因是content-visibility:auto跳过不可见元素渲染，导致其DOM占位高度默认为0px；当元素进入视口渲染时高度突变，引发文档高度重算和滚动条抖动。
-
flex-direction决定主轴方向，影响子元素排列走向及justify-content、align-items的行为逻辑：row（左→右）、row-reverse（右→左）、column（上→下）、column-reverse（下→上），且与书写方向无关。
-
HTML本身不能做数据权限控制，真正起作用的是后端在查询时就过滤数据，如SQL中添加WHEREcreator_id=?，确保返回的JSON不包含用户无权查看的行或字段，前端仅依据后端提供的权限标记（如editable、actions）动态渲染UI。
-
基础组件Props应用TypeScript接口明确定义，命名统一为[ComponentName]Props，必填不加?、可选显式标注，禁用any/Object，按需拆解传入字段，配运行时校验与默认值，并预留扩展字段如extraClass、ariaLabel等。
-
原生popover是布尔属性，仅通过是否存在生效，不可赋值；必须静态存在于DOM中且ID匹配popovertarget；需显式设置z-index避免被原生控件遮挡；JS调用前须确保属性已存在并检测浏览器支持。
-
现代项目不推荐圣杯/双飞翼布局，应改用Flexbox或Grid：前者适合高度不敏感场景，后者支持等高、间距、对齐及响应式函数如minmax()和clamp()。
-
定位元素的布局受父元素影响，关键在于包含块和已定位祖先。1.包含块由最近的已定位（relative、absolute、fixed、sticky）祖先决定，若无则相对根元素。2.父元素设为relative可作为子元素定位参考，不脱离文档流。3.absolute元素脱离文档流，相对于最近的非static定位祖先定位，偏移从内容区或border-box计算。4.fixed元素相对视口定位，通常不受父级影响；sticky元素依赖父容器滚动生效，需足够高度触发粘性。掌握这些机制可实现精准布局控制。
-
history.scrollRestoration='manual'用于禁用浏览器在前进/后退和刷新时自动恢复滚动位置，默认为'auto'；设为'manual'后需配合beforeunload和pageshow事件手动调用scrollTo(0,0)确保置顶。
-
requestIdleCallback可在主线程空闲时执行低优先级任务，如埋点上报、预加载，比setTimeout更精准，但需兼容Safari16.4+；应缓存DOM查询结果、避免生产环境console.log、慎用JSON.parse(JSON.stringify())深拷贝。
-
PHP中需用$row['field']取值而非echo$row；Node.js模板传参要解构清晰；fetch需设Content-Type和CORS头；SQL注入与XSS须从首行代码防范。
-
页面切换本质是DOM替换而非整页刷新，需复用容器动态更新内容、同步history、服务端fallback、手动初始化脚本并清理事件监听器。
-
用Proxy动态代理第三方库导出对象，可在不修改源码前提下添加日志、监控等功能；通过get和apply拦截器增强函数调用，透传非函数属性；Node.js中可替换require.cache，前端构建时可用插件静态包裹，需注意toString等内置方法及不可枚举属性的兼容处理。
-
AndroidChrome加载file://下CSS/JS必须用./前缀，否则解析为系统根目录致404；video需遮罩封面、用户手势触发播放；Flex需全兼容声明；触摸和表单须手动干预样式与行为。
