loading="lazy"仅对和生效，Safari 16.4前不支持懒加载；父容器overflow: hidden或无明确宽高会导致失效。
loading="lazy" 什么时候会失效
它只对 <img alt="HTML中加载资源属性在优化Web应用网络请求中的实践" > 和 <iframe></iframe> 生效，其他标签加了也白加。Chrome、Edge、Firefox 已支持，但 Safari 直到 16.4 才完整支持 loading="lazy" 对 <iframe></iframe> 的处理——旧版 Safari 会直接忽略该属性，回退为 eager 加载。
常见失效场景包括：
- 父容器设置了
overflow: hidden或transform，导致浏览器无法准确计算元素是否进入视口 -
<img alt="HTML中加载资源属性在优化Web应用网络请求中的实践" >没有明确的宽高（比如仅靠 CSS 设置），部分浏览器可能跳过懒加载逻辑 - 页面通过 JS 动态插入图片，且插入时已处于可视区域附近，浏览器来不及注册懒加载监听
- 使用了
fetchpriority="high"并发覆盖了 lazy 行为（Chrome 115+ 支持，但两者共存时 lazy 优先级被降级）
preload 的 as 值写错会导致什么
<link rel="preload"> 的 as 属性不是可选装饰，而是决定浏览器如何调度、缓存、复用该资源的核心标识。写错就等于“告诉浏览器一个假身份”，结果往往是请求被降级或完全丢弃。
典型错误和后果：
立即学习“前端免费学习笔记（深入）”；
-
as="script"写成as="fetch"：浏览器按低优先级发起请求，且无法被后续<script src></script>复用，造成重复下载 - 字体预加载漏掉
crossorigin：即使as="font"正确，浏览器也会静默忽略，FOIT 问题照旧 -
as="style"用于预加载 JS 文件：样式解析器拒绝处理，资源进不了样式表缓存，后续<link rel="stylesheet">仍要重新请求 - 图片用
as="image"却没配imagesrcset或sizes：无法参与响应式图片决策，但至少能进内存缓存；不过多数首屏图根本不需要 preload
video 标签的 preload 属性到底该怎么设
<video></video> 的 preload 是个容易被误读的属性——它控制的是「元数据 + 视频数据」的加载策略，不是开关，且不同取值在移动端行为差异极大。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
三个值的实际表现：
-
preload="none"：不加载任何数据，连时长、尺寸都不取。适合非关键视频、用户触发才播放的场景（如评论区嵌入视频） -
preload="metadata"：只加载头部信息（时长、宽高、编码格式等），体积小、速度快，是大多数非首屏视频的合理选择 -
preload="auto"：浏览器自行决定加载量，桌面端常全量加载，移动端（尤其 iOS Safari）大概率降级为metadata，不可控
注意：loading="lazy" 和 preload 可共存，但语义不同：前者管“何时开始拉取”，后者管“拉多少”。实际项目中，loading="lazy" preload="metadata" 是更安全的组合。
webpack 中 html-loader 的 sources 配置踩坑点
当项目里有自定义组件或富文本内容（比如 CMS 输出的 HTML），默认的 sources: true 会漏掉非标准属性，比如 <my-banner></my-banner> 中的 data-src 不会被识别为资源路径，导致构建后图片 404。
修复方式不是盲目开全量，而是精准扩展：
- 用
sources: { list: [...] }显式声明需要处理的标签/属性对，避免污染默认规则 -
filter函数必须返回布尔值，且不能依赖异步逻辑（如 fetch 判断路径是否存在），否则构建卡死 - 如果用了
html-webpack-plugin注入变量（如<img src="<%=%20BASE_URL%20%>logo.png" alt="HTML中加载资源属性在优化Web应用网络请求中的实践" >），确保urlFilter能识别模板语法，否则路径解析失败 - SSR 场景下，服务端渲染时若
sources配置与客户端不一致，可能出现资源路径生成逻辑分裂，导致 hydration mismatch
真正难的不是记住每个属性怎么写，而是理解浏览器在哪个环节做了什么决策——比如 preload 是在 HTML 解析早期就发请求，而 loading="lazy" 依赖 IntersectionObserver 的回调时机。这两个机制不在同一层，混用前得先确认它们的生命周期有没有冲突。
