-
响应式Grid的核心是按断点主动切换网格结构，最直接方式是在@media中重定义grid-template-columns等整体属性，而非仅调整子项；需同步重置grid-template-areas、grid-auto-flow等依赖项以避免布局错乱。
-
Bootstrap的.form-control类可统一input/select/textarea样式，.form-floating实现浮动标签，状态类需与.form-control共用，尺寸应优先使用.form-control-lg/.sm而非手动调整height。
-
CSS过渡性能瓶颈在于重排重绘，width/height/top/left等布局属性易触发；应优先使用transform和opacity等GPU加速属性，并避免强制同步布局。
-
图片在Flex布局中比例失真是因flex-shrink:1默认压缩，解决方法是设max-width:100%;height:auto;并加flex:00auto;禁止缩放。
-
音频同步应以audio.currentTime为唯一时间源，在requestAnimationFrame中读取并校正，seek后需监听seeked事件重置状态；高精度需求须用WebAudioAPI配合context.currentTime；移动端需用户手势触发播放并防御性处理加载间隙。
-
ServiceWorker是运行在浏览器后台、独立于主线程的JavaScript脚本，用于拦截请求、管理缓存、推送通知并实现离线体验；它不是普通页面脚本（无法操作DOM），也不是服务器端Node.js服务。
-
推荐用object-fit控制图片缩放裁剪：cover保持比例裁剪溢出，contain完整显示留白；需配合width/height或aspect-ratio生效，IE需fallback；容器应优先锁定宽高比，避免硬编码HTML尺寸；SVG等非位图需单独处理。
-
JavaScript中移除数组假值最推荐的方法是使用filter(Boolean)；1.JavaScript的假值包括false、null、undefined、0、""、NaN共六种；2.filter(Boolean)利用隐式类型转换筛选出真值，语法简洁高效；3.也可用filter(item=>item)实现相同效果，但不如Boolean构造函数简洁；4.reduce可手动构建新数组过滤假值，但代码更冗长；5.若项目已使用Lodash，_.compact()语义明确且兼容性好，但引入额外依赖。因此，
-
JavaScript可直接在浏览器控制台运行，无需配置环境；首个小项目是点击切换“未完成”/“已完成”文字，需用textContent而非innerHTML，script应置于</body>前或用DOMContentLoaded确保DOM加载完成。
-
使用CSSGrid结合grid-auto-flow:dense可高效实现等间距瀑布流布局，1.将容器设为display:grid；2.使用repeat(auto-fill,minmax(200px,1fr))定义自适应列；3.设置grid-auto-rows:auto使行高随内容变化；4.启用grid-auto-flow:dense实现密集填充以减少空白；5.通过gap:16px统一行列间距；该方案利用Grid二维布局优势，相比浮动或Flexbox能真正实现错落有致的视觉效果，且无需JavaScript干
-
JavaScriptDate对象内部只存UTC时间戳，但方法默认按本地时区解析；创建时需用带Z或偏移的ISO字符串，显示时应明确时区并用Intl.DateTimeFormat等可控方式处理，存取数据必须统一用UTC。
-
trycatch仅捕获同步运行时错误（如ReferenceError、TypeError），无法捕获异步错误；async/await中必须await后置于try内才能捕获Promise拒绝；推荐用instanceof判断错误类型；finally中return会覆盖try/catch的返回值。
-
CSS:target伪类不生效最常见的原因是URLhash与元素id不严格一致，需全等匹配（区分大小写、无空格、无编码差异），且元素须存在、唯一、已渲染、支持相关样式，并确保选择器语法正确、优先级足够。
-
使用transition:transform0.3scubic-bezier(0.4,0.0,0.2,1)统一控制位移与缩放过渡，避免属性不同步；配合cubic-bezier(0.34,1.56,0.64,1)等自然缓动曲线提升流畅度，禁用step()函数防止断裂；通过transform:translateZ(0)或will-change:transform启用GPU加速渲染，减少卡顿，确保动画连贯。
-
BOM（BrowserObjectModel）是浏览器厂商形成的事实接口集合，非W3C/ECMA标准；顶层对象为window，包含location、history、navigator、screen、frames等属性，用于JavaScript与浏览器交互。
