判断css是否已加载需先用属性选择器精确匹配href值，再结合全局set缓存防跨实例重复；动态插入后不能依赖link.onload立即执行布局操作，应加settimeout微任务延迟确保样式生效。
直接往 里塞 <link> 是可行的，但不加判断就重复插入，轻则触发多次 HTTP 请求，重则在 Safari 中引发样式层叠异常——尤其当插件支持多实例时。
如何准确判断 CSS 是否已加载
不能只查 $("head link[rel='stylesheet']") 存不存在，因为可能有多个 <link>，也可能存在同名但路径不同（比如带 ?v=1.2 或 CDN hash）的旧引用。
- 必须用属性选择器比对完整
href值：$("head link[rel='stylesheet'][href='skins/light.css']") -
.attr("href")返回的是浏览器解析后的绝对 URL（含协议、域名），比对会失败；而[href='...']是原始 HTML 属性值，匹配才可靠 - 若路径含查询参数（如
theme.css?v=2.1.0），比对字符串必须完全一致，否则会被当成“未加载” - 构建工具或 CDN 自动注入 hash（如
theme.a1b2c3.css）时，推荐改用id或自定义data-css-key标识，例如：<link rel="stylesheet" data-css-key="light-theme" href="...">
jQuery 插件中避免重复加载的写法
每次初始化都调用 $("head").append(...) 是危险的。正确做法是先查后插，并考虑跨实例共享状态。
- 基础防重逻辑：
if ($(`head link[rel="stylesheet"][href="${url}"]`).length) return; - 多实例场景下，仅靠 DOM 查询不够，需配合全局缓存：
window.__loadedCSS = window.__loadedCSS || new Set(); if (window.__loadedCSS.has(url)) return; window.__loadedCSS.add(url); - 创建元素时优先用 jQuery 构造器语法：
$("<link>", { rel: "stylesheet", href: url })，比手动.attr()更简洁且不易漏设属性 - 不要用
.prop("href", url)修改已有<link>——这不会触发重加载，部分浏览器还会忽略
动态加载后，样式真的“生效”了吗？
link.onload 只表示资源下载完成，不代表样式已计算、DOM 已重排。快速切换皮肤时，JS 紧接着操作 DOM 很容易读到旧样式值。
- 不要依赖
link.onload后立即执行布局相关 JS（比如getBoundingClientRect()） - 稳妥做法是加一层微任务延迟：
link.onload = () => setTimeout(() => { /* 你的样式依赖逻辑 */ }, 0); - 开发阶段可加
console.debug("CSS loaded:", url)辅助定位漏加载问题，上线前删掉 - 若需强保证，可用
document.styleSheets遍历检查规则是否已注入，但开销较大，仅调试用
最易被忽略的一点：路径拼接错误常被当成“加载失败”，其实是 404 导致 link.onerror 触发但没监听；建议统一加 link.onerror = () => console.warn("Failed to load CSS:", url);。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
