-
心跳动画需三段式关键帧（收缩→舒张峰值→回稳）配合cubic-bezier(0.42,0,0.58,1)节奏，设transform-origin:center并仅用transform/opacity避免重排，辅以brightness微调增强真实感。
-
SVG原生animateMotion是沿贝塞尔路径运动的最佳方案，通过mpath引用path的d属性（如M0,0C50,100150,100200,0），配合keyTimes/keyPoints实现非线性速度控制，兼容性优于CSSoffset-path。
-
必须用<form>，因其提供原生语义、回车提交、无障碍支持及聚焦管理；分组用<fieldset>+<legend>；type="number"需设step和min支持小数负数；保存按钮应为<form>内type="submit"并防重复提交。
-
clamp()比媒体查询更实用，因其能在单个声明中实现最小值—首选值—最大值的连续缩放，避免离散断点导致的突变；但无法替代媒体查询处理布局质变或display等属性变更。
-
父级高度为auto时子元素height:100%无效，因浏览器无法计算百分比；需html和body均设height:100%并清空margin/padding，或改用vh、flex:1、top/bottom:0等替代方案。
-
应使用cubic-bezier(0.34,1.56,0.64,1)并配合transform-origin精确控制缩放中心，同时启用GPU加速（translateZ(0)或will-change）缓解模糊；Safari需统一transform声明结构，多层缩放应分层设定曲线节奏。
-
现代浏览器原生懒加载推荐使用loading="lazy"属性，仅适用于<img>和<iframe>，需配合width/height防CLS，首屏图应设eager；响应式图片用<picture>+srcset按设备选最小合适资源；精细控制可用IntersectionObserver；WebP/AVIF格式与CDN缓存协同优化才是关键。
-
直接用opacity动画切换背景图会闪屏，因background-image不支持透明度动画，单容器切换时新图未加载完即触发opacity变化，导致空白或残留；须用双层绝对定位容器预加载图片，通过opacity关键帧与z-index类控制实现平滑淡入淡出。
-
结论：需同时使用overscroll-behavior:none（body）与contain（滚动容器）+JavaScript补漏（iOS15以下），并确保fixed遮罩层内可滚动区域显式设overscroll-behavior:contain，避免滚动穿透。
-
HTML不能实现等级特权逻辑，因其仅为静态展示语言，class、id、style等均可被用户篡改；权限控制必须由后端校验user.level或permissions，前端仅做安全的视觉适配与体验优化。
-
HTML本身无法实现全屏，需用JavaScript的requestFullscreen()方法（用户手势触发）配合:fullscreen伪类控制样式，调用返回Promise需捕获错误，退出靠fullscreenchange事件和document.fullscreenElement判断。
-
Reflect.apply本身不提供错误边界，必须手动包裹try/catch；它仅是Function.prototype.apply的反射式替代，不改变异常传播机制，需显式处理同步/异步错误、参数校验及上下文防御。
-
本文讲解如何避免因直接修改DOM导致原始数据丢失的问题，通过将初始值存入内存（如对象或dataset）作为“单一数据源”，确保每次计算都基于原始基准值，从而实现准确、可逆的动态比例换算。
-
ServiceWorker通过预缓存关键资源、fetch阶段Cache-First策略、导航预加载及Stale-While-Revalidate机制，实现首页秒开：安装时预存HTML/CSS/JS/图标；fetch时优先返回缓存；预加载兜底；HTML缓存同时后台更新。
-
能，background-clip:padding-box可解决实线边框+border-radius+背景图/渐变组合下的溢出问题，它让背景仅绘制在padding-box内侧，与圆角内弧对齐，而非修复溢出而是主动退让。
