1. 网页滚动才显示内容的技术到底叫什么？
核心名词与定义
在网页加载流程中，滚动才显示内容的技术通常被称为懒加载（lazy loading）。它的核心目标是让浏览器在真正需要资源时才进行加载，减少网络请求数量、降低初次渲染成本，从而提升首屏加载速度。
此技术并不仅限于图片，还包括文本块、模块、广告位等的延迟加载。优先加载可视区域的内容，其他内容等用户滚动时再加载，是提高性能最直接的手段。
实现目标与常见术语
懒加载的目标是实现渐进呈现，避免阻塞渲染路径；常见的相关术语还包括占位符（skeleton screens）、占位图片/渐变背景、以及加载占位符的可访问性。
2. 懒加载的原理解析
工作原理
核心原理是检测资源是否进入可视区域，当元素进入视窗时触发真正加载，当元素离开视窗或进入安全距离时暂停或取消加载以节省带宽。
现代做法多依赖IntersectionObserver API，它能够在目标元素进入或离开视口时给出回调，无需监听滚动事件，更高效。
触发时机与优化点
触发时机通常通过设置rootMargin和threshold来控制，确保在元素临近可见区域就开始加载，提升感知速度，但又避免过早加载造成资源浪费。
3. 常见实现方式：图片、文本、模块等的懒加载实现
基于浏览器原生属性与API
浏览器原生支持的懒加载属性通常为 loading="lazy"，它能让浏览器自行判断何时加载资源，对简单场景友好，但对复杂场景并非万能。
结合占位符与占用策略，可以实现更一致的用户体验；可访问性，确保屏幕阅读器也能识别资源的懒加载意图。
基于滚动监听与视图判断
另一种实现是通过IntersectionObserver来观察目标元素是否进入视口，并在进入时执行加载逻辑，支持图片、文本块、组件等多种资源。
// 懒加载示例：图片资源通过 data-src 暂存，进入视口后正式加载
document.querySelectorAll('img[data-src]').forEach(img => {const obs = new IntersectionObserver(entries => {entries.forEach(entry => {if (entry.isIntersecting) {const el = entry.target;el.src = el.dataset.src;el.removeAttribute('data-src');obs.unobserve(el);}});}, { rootMargin: '200px' });obs.observe(img);
});
4. SEO优化在懒加载中的应用全解析
SEO友好懒加载要点
为确保搜索引擎能抓取内容，合理实现懒加载的同时保障可被索引，需要提供可爬取的静态信息或服务端渲染（SSR）选项，避免把关键内容完全隐藏。
推荐做法是对关键文字、标题、结构化数据进行服务端渲染或在首次渲染时输出，并将图片等非关键资源设为渐进加载，以避免影响LCP和CLS。
图片与文本的加载策略
图片资源的懒加载要点包括：合理设置 width/height 以防布局跳动、使用 alt 描述与可访问性属性，确保随时能被屏幕阅读器理解。
文本块的懒加载需要谨慎，避免让重要内容在用户进入页面后仍不可见；文本的可见性与可索引性应与图片的策略一致，以维持页面价值。
5. 常见坑与部署注意事项
CLS、LCP与首屏体验
不恰当的懒加载可能导致CLS波动和LCP下降，因此在实现时要设定占位内容、合理尺寸、以及预加载策略，使首屏呈现更稳定。
在滚动加载时，若占位区域与实际图片尺寸不符，往往会造成页面布局跳动，应持续监控并优化。
可访问性与兼容性
确保懒加载的实现对所有用户都可用，键盘导航与屏幕阅读器可控，必要时提供替代文本或备用内容，以保持包容性。
对于旧浏览器，可能需要回退方案，如使用逐步加载或显式占位符，以避免功能中断。
