-
video标签默认非响应式，需显式设置width:100%、height:auto及object-fit；注意父容器布局、iOS全屏限制、viewport配置与固有尺寸影响。
-
SVG不支持padding，因其为替换元素；需用viewBox调整内容内边距或外层容器设padding；flex/grid中无viewBox易塌陷，须显式设置。
-
用padding-top百分比能锁住宽高比，因为其值按父容器宽度计算，如16:9设为56.25%；需配合position:relative/absolute、height:0及三层结构实现，避免嵌套干扰。
-
Lazy.js通过惰性求值实现延迟计算，核心是将操作封装为惰性序列，仅在调用toArray()等终端方法时才触发实际计算，链式调用不立即执行，而是组合函数逻辑，迭代时按需处理数据，并支持短路优化与函数组合，避免中间数组生成，提升性能并节省内存。
-
导航栏下拉菜单需父元素设position:relative、子菜单用position:absolute并配top:100%和left:0，通过.nav-item:hover控制显隐；须消除悬停间隙、兼顾触屏与键盘可访问性。
-
本文解析JavaScript导航菜单切换功能失效的根本原因：NodeList.length是只读属性而非方法，误加括号导致TypeError中断执行，使状态变量未更新、后续逻辑无法进入else分支。
-
JavaScript的展开运算符（SpreadOperator）是三个英文句点...，它能把可迭代对象（如数组、字符串）或类数组对象“打散”成独立的元素，也支持将对象的属性逐个展开。它常用于数组合并、对象合并、函数调用传参等场景，写法简洁且可读性强。用展开运算符合并数组传统方式合并数组常用concat()或手动push，而展开运算符让操作更直观：直接把一个数组“铺开”，再与其他元素一起组成新数组。合并两个或多个数组：constarr1=[1,2];consta
-
CSS动画循环需设animation-iteration-count:infinite，但首尾帧不一致会导致跳变；配合alternate方向、forwards填充及合理keyframes定义才能实现平滑循环。
-
HTML5提供scrollIntoView()和window.scrollTo()两种原生方法实现平滑回到顶部，结合滚动监听、requestAnimationFrame优化及键盘可访问性支持，可构建兼容性好、性能优、无障碍的返回顶部功能。
-
用position:absolute定位提示框时，父容器必须设为relative，否则提示框会相对于视口定位而飘至左上角；z-index需配合position才生效；推荐用opacity+visibility实现淡入淡出动画。
-
使用HTML的<picture>元素可实现WebP图片的智能交付：浏览器优先加载WebP格式，不支持时自动回退至JPEG/PNG，兼顾性能与兼容性。
-
JavaScript是必须立刻实践的工程工具，核心能力是操作DOM实现网页交互，并通过Node.js扩展至服务端；它不适用于计算密集型任务、直接硬件操作或原生移动端功能。
-
WKWebView缓存需调用WKWebsiteDataStore.removeData(ofTypes:)显式清理，不能依赖NSURLCache；必须指定缓存类型（如DiskCache、MemoryCache、ServiceWorkerRegistrations等）、时间范围，并在completionhandler中reload页面，否则仍加载旧资源。
-
核心是让关键内容优先渲染：拆分HTML标记非首屏内容、剥离非必要资源、内联关键CSS；Linux需预装中文字体或@font-face内联TTF；weasyprint需压缩图片、降DPI、禁用自动嵌入；puppeteer应waitForFunction检测DOM就绪。
-
border会让元素变大是content-box的默认行为，width仅指内容区，border和padding向外撑；全局设box-sizing:border-box可解决，并需重置伪元素及注意兼容性。
