图片占位闪烁本质是浏览器无法预估尺寸导致布局跳动，与网速无关；必须内联设置width/height属性（如）以预留空间，禁用width="100%"或height="auto"，并配合decoding="async"防解码阻塞、首屏图禁用loading="lazy"。

慢网速下图片占位闪烁，本质是浏览器无法预估图片尺寸导致布局跳动（layout shift），和网络快慢关系不大——即使 5G 下没设宽高照样闪。关键在 HTML 层预留空间、控制加载节奏、避免回流。

必须设置 width 和 height 属性

内联写原始图宽高值（非响应式尺寸），例如 。浏览器据此计算宽高比，提前分配空间，图片加载中不触发重排。

• 不要写 width="100%" 或 height="auto"，这等于没设
• 比例要准：1200×675 对应 16:9，可用 aspect-ratio: 16/9 替代，但 Safari 15.4+ 才完全支持
• 老版本 Safari 可用 padding-top: 56.25% + position: relative + 子元素绝对定位兜底

sizes 要匹配真实容器宽度

srcset 告诉浏览器“有哪些图”，sizes 告诉它“这张图在页面里实际占多宽”。写错 sizes 就会下载远超需要的大图，慢网下更易卡顿、延迟渲染。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 查真实宽度：用 Chrome DevTools → Elements → 查 computed styles → width，看各断点下图片容器的实际像素宽
• 典型写法：sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
• 禁用 sizes="100vw" ——除非真是全屏大图，否则侧边栏小图也会拉 1920w 图

用 decoding="async" 防主线程阻塞

大图解码默认同步进行，哪怕只下 768w 的图，没加该属性，浏览器仍会卡住渲染线程，用户感知就是“卡一下再突然出现”。

• 必须加在 上：
• 内部的 也要单独加
• Chrome 78+、Firefox 69+、Safari 15.4+ 支持；旧版忽略不影响功能，只是没优化

慎用 loading="lazy" 在首屏区域

懒加载不是万能药。首屏 Hero 图、Logo、登录头像加了 loading="lazy"，慢网下可能白屏 2 秒以上，LCP 直接超标。

• 首屏关键图必须删掉 loading="lazy"，甚至加
• 非首屏图加 lazy 后，仍需配 width/height 防止进入视口瞬间跳动
• 自定义 IntersectionObserver 懒加载时，别再叠用原生 lazy，行为冲突可能重复请求

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！