document.write()在页面加载完成后调用会隐式触发document.open()清空整个文档；搭配unescape()易因废弃和编码异常中断脚本；写入HTTP协议的<link>还会遭混合内容拦截；应改用createElement('link')动态注入并校验HTTPS与响应头。
document.write() + CSS link 会清空整个页面
现代浏览器在页面加载完成后调用 document.write()，会隐式触发 document.open()，把当前文档完全清空——不是追加，是重置。如果你在 DOMContentLoaded 或 onload 后用它写入 <link rel="stylesheet" href="...">，结果就是白屏或只剩新插入的 link 标签，样式根本没机会应用。
unescape() 已废弃且易抛异常
很多老代码写成 document.write(unescape("%3Clink%20rel%3D..."))，但 unescape() 自 ES5 起就被废弃，Chrome/Firefox/Safari 均已移除支持。遇到非标准编码（比如漏了 %、含 UTF-8 多字节却按单字节解）会直接抛 SyntaxError，脚本中断，后续样式和逻辑全失效。
- 必须改用
decodeURIComponent()替代unescape() - 若原始字符串来自后端拼接，需确保 URL 编码严格符合 RFC 3986，不能靠
unescape“硬扛”
混合内容拦截发生在 TCP 连接前
即使你绕过了清空和解码问题，只要 href 是 http://，浏览器会在发起任何网络请求前就丢弃该 link。DevTools Network 面板里看不到 pending 状态，只有一条 status 为 blocked:mixed-content 的记录。这不是加载失败，是策略性拦截——CSS 属于主动型混合内容，能篡改渲染树、干扰 getComputedStyle()、触发 FOUC。
- 所有
document.write('<link href="http://...">')写法都逃不过拦截 -
//协议相对路径也不安全：若目标域名无 HTTPS 端点（如某些内网字体服务），会直接 404 - 真正可靠的写法是显式用
https://，并确认第三方服务实际支持（例如把http://fonts.googleapis.com改成https://fonts.googleapis.com直接访问验证）
现代替代方案：动态创建 link 更可控
用 document.createElement('link') 替代 document.write()，不仅能避免清空文档，还能监听加载状态、捕获错误、做 fallback。
立即学习“前端免费学习笔记（深入）”；
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://cdn.example.com/style.css';
link.onload = () => console.log('CSS loaded');
link.onerror = () => console.warn('CSS load failed');
document.head.appendChild(link);
注意：仍需确保 href 是 https://，且服务端返回 Content-Type: text/css，否则即使创建成功也会被浏览器拒载（报 Refused to apply style）。
最容易被忽略的是——哪怕 link 创建成功、请求发出、返回 200，如果响应头缺 Content-Type: text/css 或存在 CSP 限制，样式照样不生效。得挨个查 Network → Response Headers 和 Console 报错。
