-
float与position:sticky无法共存，因float使元素脱离文档流，而sticky要求元素在常规流中；正确方案是用flex或grid布局配合sticky，并确保父容器可滚动且侧边栏为直接子元素。
-
rel属性是决定浏览器行为与安全的关键属性，必须配合target="_blank"才生效；单独使用rel="noopener"无效，需显式声明以防止reversetabnabbing攻击，且现代最佳实践为rel="noopenernoreferrer"。
-
history.scrollRestoration='manual'用于禁用浏览器在前进/后退和刷新时自动恢复滚动位置，默认为'auto'；设为'manual'后需配合beforeunload和pageshow事件手动调用scrollTo(0,0)确保置顶。
-
应通过设置autocomplete属性、规避敏感name值、禁用明文日志与本地存储、减少输入法干预等方式降低风险，但无法彻底防止截图、录屏等本地侧信道攻击，服务端校验和传输加密才是安全核心。
-
必须掌握操作HTML元素的核心DOM方法：一、通过ID获取单个元素；二、通过类名获取元素集合；三、通过标签名获取元素集合；四、通过CSS选择器获取元素；五、为元素绑定事件监听器；六、创建并插入新元素；七、替换或删除现有元素。
-
sm:表示视口宽度≥640px时生效，lg:表示视口宽度≥1024px时生效，二者不互斥且lg优先级更高。
-
hidden和block不能直接做响应式图片切换，因为它们只控制显示/隐藏，不阻止图片预加载；浏览器会提前下载所有img的src，导致带宽浪费。
-
FID必须用JavaScript主动监听计算上报，不能靠HTML控制；其本质是用户触发事件到浏览器开始处理的排队延迟，需用event.timeStamp减performance.now()近似计算，且监听须尽早注册并过滤后台事件。
-
直接用createIndex为非主键字段建索引，核心是明确集合、字段名和索引选项；需确认集合存在且字段实际存在，支持单字段、多字段组合及unique/sparse/background等参数，建完需用getIndexes()和explain()验证。
-
可通过HTML5的FormData与file输入框结合XMLHttpRequest或fetch实现图片上传：一、XMLHttpRequest方式需创建FormData并手动配置xhr；二、fetch方式以Promise风格简化异步流程；三、启用multiple属性可批量上传；四、配合FileReader可实现本地预览。
-
应使用CSSanimation-duration配合lineartiming实现hover加速，避免marquee；纯CSS会重置动画导致跳帧，真无缝需JS控制requestAnimationFrame。
-
通过配置Git自定义合并驱动和外部Python脚本，可实现HTML与CSS文件的智能合并；在.gitattributes中为.html和.css文件指定merge=html_merge和css_merge驱动，并用gitconfig全局注册对应驱动命令，调用~/bin/merge_html.py和merge_css.py脚本；脚本使用BeautifulSoup等库解析文件结构，安全合并语义一致的变更并保留冲突标记；结合Magit的钩子机制，在.pre-merge-commit中调用tidy和csslint
-
视频滤镜面板核心是用JavaScript动态拼接完整filter字符串并全覆盖更新，否则亮度/饱和度等参数会丢失；overflow:hidden、内联标签未设display、position:fixed、跨域CORS及Safari兼容性等问题会导致filter静默失效。
-
AnimationWorklet不是CSS动画替代品，而是将动画逻辑移至独立线程运行的底层执行环境，用于实现高帧率、响应式、数据驱动动画；它不操作DOM，仅通过effect.setKeyframes()更新transform/opacity等可合成属性。
-
preload失效主因是未严格匹配as属性、缺失crossorigin、或未将资源接入渲染流程，如字体需as="font"+crossorigin，CSS需onload切换rel，否则仅下载不生效。
