要避免 IntersectionObserver 立即触发，需设 threshold: [0] 并配合 rootMargin（如 '200px'）；懒加载图片须用 data-src 替代 src，回调中赋值并清理；复用单个 observer 实例，加载后调用 unobserve；不支持时降级为节流 scroll + getBoundingClientRect。
IntersectionObserver 构造函数怎么传参才不触发立即加载
默认情况下，new IntersectionObserver() 创建的观察器会立刻检查目标元素是否在视口内，导致图片等资源“懒加载”失效。关键在 threshold 和 rootMargin 的配合。
-
threshold: 0（默认）只表示“哪怕有 1px 进入视口就回调”，但首次检查时若元素已在视口内，就会立刻触发callback—— 这不是懒加载，是立即加载 - 真正安全的做法是设
threshold: [0]（数组形式）+ 合理的rootMargin，例如'200px'，让元素距离视口底部还有 200px 时就开始加载，同时避免首屏元素被误触发 - 如果必须严格“滚动到才加载”，且首屏不含懒加载元素，可加一个
loaded标志位，在回调中先判断entry.isIntersecting && !entry.target.dataset.loaded
img 元素 src 被提前解析导致预加载失效
浏览器在 DOM 解析阶段就会对 <img src="xxx"> 发起请求，哪怕 JS 还没执行、Observer 还没注册。所以不能直接写 src，得用占位属性。
- 把真实地址存进
data-src或data-srcset，HTML 写成<img alt=""> - 在
callback中拿到entry.target后，手动赋值：img.src = img.dataset.src，再删掉dataset.src防重复 - 注意：不要用
src="about:blank"或透明 base64 占位——某些浏览器仍会发起请求或触发 referrer；更稳妥的是用src="data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs"
监听多个元素时如何避免反复 new Observer
每个 IntersectionObserver 实例可以观察多个目标，反复 new 不仅开销大，还容易因销毁时机不对造成内存泄漏或漏触发。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 全局只创建一个实例，复用它调用
observer.observe(el)添加所有需要懒加载的元素 - 移除监听用
observer.unobserve(el)，而不是observer.disconnect()—— 后者会停掉整个观察器，影响其他元素 - 如果某元素加载完成后不再需要监听（比如图片已显示），务必调用
unobserve，否则它持续占用观察资源，尤其在长列表中会明显拖慢滚动性能
兼容性 fallback 怎么写才不破坏现代流程
IE 完全不支持 IntersectionObserver，但强行 polyfill（如 intersection-observer）可能引入额外请求和初始化延迟。更轻量的做法是降级为 scroll + getBoundingClientRect。
立即学习“前端免费学习笔记（深入）”；
- 先检测：
if ('IntersectionObserver' in window)，不支持时走传统方案 - scroll 方案别用
onscroll直接绑 body —— 触发太频繁，改用throttle（例如 Lodash 的throttle(fn, 100)）或requestAnimationFrame节流 - 关键区别：scroll 方案无法感知元素是否“真正进入视口”（比如被
overflow: hidden父容器裁剪），而 IO 可以；所以 fallback 里要做el.getBoundingClientRect().top 判断，且要加上父容器滚动偏移
最易被忽略的一点：Observer 实例本身不会自动销毁，页面长期存在（比如 SPA 路由切换）时，记得在组件卸载或离开页面前调用 observer.disconnect()，否则监听器持续驻留，可能引发内存泄漏或跨路由误加载。
