-
preload仅用于浏览器发现过晚但首屏必需的资源，如CSS中@font-face字体、内联样式中的首屏图片、module脚本依赖的主chunk及Hero区域关键图片；as属性必须准确匹配资源类型，否则降级为普通请求。
-
font-display:swap需配合preload、font-size-adjust和min-height容器兜底才能缓解移动端CLS，单独使用反而加剧布局跳动。
-
必须同时设置object-fit:cover、object-position:center、明确宽高及避开移动端Safari的vh坑，否则视频会偏移、裁切关键区域或底部留白。
-
只倾斜容器不扭曲文字需用伪元素或反向skew抵消：对父容器skew()，子容器用skew(-xdeg)；注意热区仍为原矩形，可用clip-path修正。
-
WebAnimationsAPI是浏览器原生JavaScript接口，用于编程创建、控制CSS/SVG动画；支持animate()启动、play/pause/reverse/cancel等精细控制，以及finish/cancel事件监听，性能优于rAF且可与CSS动画协同。
-
直接双击打开index.html会因file://协议限制导致fetch、ServiceWorker、相对路径资源加载失败，页面白屏或样式丢失；必须通过本地HTTP服务器（如VSCodeLiveServer）运行才能正常预览。
-
line-clamp在Firefox中不生效，因其原生仅被WebKit/Blink内核支持；需同时满足display:-webkit-box、-webkit-box-orient:vertical和line-clamp:N三条件才在Chrome/Safari/Edge生效。
-
使用CSSfilter结合transition或animation可实现图片悬停时的自然变色、褪色或特效，通过grayscale、brightness等函数控制视觉效果，配合过渡动画使变化流畅，避免生硬切换，提升用户体验。
-
HTML5input[type="datetime-local"]的min和max为什么没生效？因为值格式不匹配——min/max要求严格按YYYY-MM-DDThh:mm格式（秒可选，但必须补零），且时区隐含为本地。浏览器一发现格式不对，直接忽略整个属性。错误写法：min="2024-01-01"（缺T和时间部分）正确写法：min="2024-01-01T00:00"或min="2024-01-01T00:00:00"注意：不能写成min="2024/01/01"或带空格的
-
JavaScript模块系统天然实现单例行为：同一路径模块仅加载执行一次，导出对象被所有导入者共享引用；这是由Node.js的require.cache或ESM的ModuleRecord等加载器缓存机制强制保证的底层契约，而非手写单例模式。
-
用flex布局父容器可让多个grid容器横向并排，因grid-template-columns仅控制单个网格内部列，不影响容器间排列；inline-grid不稳定，嵌套Grid更适合同一布局内的功能区块划分。
-
用浏览器另存为PDF最简单：按Ctrl+P→选“另存为PDF”→保存；需确保页面完全加载，勾选“背景图形”，注意CSS分页控制和文件校验。
-
tap-highlight-color仅在iOSSafari及微信内置浏览器中对<a>和可聚焦元素生效，需加-webkit-前缀、设为transparent，且不能写在伪类中；Android浏览器完全忽略，跨平台应禁用系统高亮并自定义触摸态。
-
现代浏览器默认原生支持HTML5，无需安装或开启；确认特性需检测具体API（如typeoflocalStorage），而非笼统查“HTML5支持”；页面不工作多因新特性兼容性、file://协议限制、MIME错误、隐私模式或权限问题。
-
异步组件加载完成前路由守卫不能直接放行，需在beforeEach中await组件import()Promise解析后再next()；推荐用resolveComponent预加载、Suspense兜底、Map缓存已加载组件，并注意SSR场景下的服务端兼容处理。
