integrity属性拼写或哈希错误会静默阻断CSS加载，浏览器不发请求、不报错、Network面板无记录；必须配合crossorigin使用，哈希须为base64编码且带sha256-/sha384-/sha512-前缀，本地file://协议下校验必然失败。
integrity 属性拼写或哈希值错误直接阻断 CSS 加载
浏览器遇到 integrity 值不合法时，会静默拒绝加载该 CSS 文件——不发请求、不报错、Network 面板里完全看不到对应条目，页面就是纯 HTML 流式布局。这不是“样式没生效”，是压根没加载。
-
integrity值必须是 base64 编码后的哈希（如sha256-o28FqQ...），不能是原始 hex 字符串（如sha256-abc123） - 常见手误：漏掉算法前缀（
sha256-、sha384-）、多空格、引号不闭合、复制时带换行或不可见字符 - 用命令行生成：Linux/macOS 执行
openssl dgst -sha256 -binary style.css | openssl base64 -A；Windows 可用 PowerShell 的Get-FileHash -Algorithm SHA256+ 手动 base64 转换
漏写 crossorigin 属性，integrity 彻底失效
写了 integrity 但没配 crossorigin，浏览器直接跳过校验——相当于没写 integrity，但文件仍可能加载成功（掩盖问题）。一旦 CDN 或服务端返回的哈希不匹配，反而因缺失 crossorigin 导致 fallback 逻辑无法触发。
- 必须同时存在：
<link rel="stylesheet" href="..." integrity="sha256-..." crossorigin="anonymous"> -
crossorigin="anonymous"是最常用值；若资源需携带凭证（如 cookies），才用crossorigin="use-credentials"，但此时服务端必须返回Access-Control-Allow-Origin: *或明确域名 - CDN 返回响应头缺失
Access-Control-Allow-Origin会导致请求被浏览器拦截，Network 面板显示net::ERR_FAILED或状态为(blocked)
校验失败后 error 事件捕获不到
即使加了 crossorigin 和合法 integrity，如果校验失败，error 事件也可能不触发——因为浏览器只对已发起请求且校验失败的资源抛事件，而路径 404、DNS 失败、协议不匹配等场景根本不会走到校验环节。
- 监听要覆盖全局：
document.addEventListener('error', e => { if (e.target.matches('link[rel=stylesheet][integrity]')) loadFallbackCSS(); }); - fallback 函数里建议用
fetch()检查 URL 是否可访问，再动态创建link插入document.head，避免重复加载 - 不要依赖
window.onerror—— 它捕获不到资源加载类错误
本地开发时 file:// 协议下 integrity 校验必然失败
用双击打开 HTML 或 file:// 协议访问时，现代浏览器（Chrome/Edge）禁止对本地文件做子资源完整性校验，控制台会报 The resource was blocked because integrity check failed，哪怕哈希完全正确。
立即学习“前端免费学习笔记（深入）”；
- 这是安全限制，不是 bug，也无法绕过（
--disable-web-security仅临时验证，不可用于日常开发） - 唯一解法：启动本地 HTTP 服务，例如
python -m http.server 8000，然后访问http://localhost:8000/index.html - VS Code 用户可装 Live Server 插件，右键 HTML 文件选 “Open with Live Server”，它自动处理 CORS 和 integrity 兼容性
rel 拼写或 integrity+crossorigin 搭配问题；若存在但样式没应用，再查 Content-Type 或层叠逻辑。integrity 不是锦上添花的功能，它和 rel、href 一样，是加载链上关键一环，错一个字符就全盘失效。 
