rootMargin应根据页面结构和用户滚动节奏设定：图文流用'200px 0px'，卡片流用'100px 0px'，广告位可试'-50px'；iOS Safari推荐'150px'防抖动。
rootMargin设成多少才算“提前”
不是越大越好，也不是随便填个'200px'就完事。关键看用户滚动节奏和页面结构：图文流推荐rootMargin: '200px 0px'，卡片流（高度固定）可用'100px 0px'，广告位等需强曝光的场景可试'-50px'（负值表示“离视口底边还有50px就触发”）。iOS Safari在快速滚动时容易抖动，实测'150px'比'300px'更稳。
为什么rootMargin不生效的五个常见原因
rootMargin静默失效，往往不是参数写错，而是环境没配对：
-
root没显式设为null：默认用视口，但如果父容器有overflow: hidden且你又没把它设为root，那rootMargin实际作用范围就错了 -
threshold写成数字而非数组：比如threshold: 0.1会直接让回调不触发，必须写成[0.1] - 目标元素还没挂载就调用
observer.observe()：Vue中ref未就绪、React中useEffect没执行完都属此类 -
loading="lazy"和JS懒加载共存：浏览器行为不一致，Chrome可能走preload，Safari可能忽略或报warning，必须加loading="eager"或移除该属性 - 初始化时机太晚：塞进
window.onload里，首屏内容早就渲染完了，用户已看到白块
搭配threshold怎么配才不卡顿又不错过
rootMargin和threshold是联动参数，单调一个容易翻车：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 只设
rootMargin: '200px'+threshold: 0：元素刚“露头”就加载，适合图文流，但小图可能闪一下 - 设
rootMargin: '100px'+threshold: [0, 0.5]：刚出现时占位，半进入时加载高清图，适合卡片类feed - 阈值数组越长，性能开销越大；实测
[0, 1]比[0, 0.25, 0.5, 0.75, 1]内存占用低40%以上 - 移动端慎用
threshold: 1（完全进入才加载），用户一划就滚过去，图片根本来不及加载
真实项目里怎么初始化才不丢首屏
别等DOMContentLoaded，更别等window.onload。正确时机是document.readyState === 'interactive'——HTML解析完成、DOM可访问，但样式/脚本还没全加载。最稳妥做法是在<head>里内联一段小脚本：
立即学习“前端免费学习笔记（深入）”；
if (document.readyState === 'interactive' || document.readyState === 'complete') {
initLazyLoad();
} else {
document.addEventListener('readystatechange', () => {
if (document.readyState === 'interactive') initLazyLoad();
});
}
这个点注册IntersectionObserver，配合rootMargin: '200px 0px'，能确保首屏图片在用户视线到达前就发出请求。很多人漏掉这点，结果优化了半天，首屏还是白块。
