一、方法引用来源和应用

此动态加载css方法 loadCss，剥离自Sea.js，并做了进一步的优化（优化代码后续会进行分析）。

因为公司项目需要用到懒加载来提高网站加载速度，所以将非首屏渲染必需的css文件进行动态加载操作。

二、优化后的完整代码

/*
* @function 动态加载css文件
* @param {string} options.url -- css资源路径
* @param {function} options.callback -- 加载后回调函数
* @param {string} options.id -- link标签id
*/
function loadCss(options){
 var url = options.url,
 callback = typeof options.callback == "function" ? options.callback : function(){},
 id = options.id,
 node = document.createElement("link"),
 supportOnload = "onload" in node,
 isOldWebKit = +navigator.userAgent.replace(/.*(?:AppleWebKit|AndroidWebKit)\/?(\d+).*/i, "$1") < 536, // webkit旧内核做特殊处理
 protectNum = 300000; // 阈值10分钟，一秒钟执行pollCss 500次
 node.rel = "stylesheet";
 node.type = "text/css";
 node.href = url;
 if( typeof id !== "undefined" ){
 node.id = id;
 }
 document.getElementsByTagName("head")[0].appendChild(node);
 // for Old WebKit and Old Firefox
 if (isOldWebKit || !supportOnload) {
 // Begin after node insertion
 setTimeout(function() {
  pollCss(node, callback, 0);
 }, 1);
 return;
 }
 if(supportOnload){
 node.onload = onload;
 node.onerror = function() {
  // 加载失败(404)
  onload();
 }
 }else{
 node.onreadystatechange = function() {
  if (/loaded|complete/.test(node.readyState)) {
  onload();
  }
 }
 }
 function onload() {
 // 确保只跑一次下载操作
 node.onload = node.onerror = node.onreadystatechange = null;
 // 清空node引用，在低版本IE，不清除会造成内存泄露
 node = null;
 callback();
 }
 // 循环判断css是否已加载成功
 /*
 * @param node -- link节点
 * @param callback -- 回调函数
 * @param step -- 计步器，避免无限循环
 */
 function pollCss(node, callback, step){
 var sheet = node.sheet,
  isLoaded; 
 step += 1;
 // 保护，大于10分钟，则不再轮询
 if(step > protectNum){
  isLoaded = true;
  
  // 清空node引用
  node = null;
  callback();
  return;
 }
 if(isOldWebKit){
  // for WebKit < 536
  if(sheet){
  isLoaded = true;
  }
 }else if(sheet){
  // for Firefox < 9.0
  try{
  if(sheet.cssRules){
   isLoaded = true;
  }
  }catch(ex){
  // 火狐特殊版本，通过特定值获知是否下载成功
  // The value of `ex.name` is changed from "NS_ERROR_DOM_SECURITY_ERR"
  // to "SecurityError" since Firefox 13.0. But Firefox is less than 9.0
  // in here, So it is ok to just rely on "NS_ERROR_DOM_SECURITY_ERR"
  if(ex.name === "NS_ERROR_DOM_SECURITY_ERR"){
   isLoaded = true;
  }
  }
 }
 setTimeout(function() {
  if(isLoaded){
  // 延迟20ms是为了给下载的样式留够渲染的时间
  callback();
  }else{
  pollCss(node, callback, step);
  }
 }, 20);
 }
}

三、解析代码

一、参数

本方法支持三个参数，可进行扩展。

1.1 opations.url

url是需要引入的css资源路径，也即标签的href属性内容。

1.2 options.id

id是标签的id属性。这个参数为非必要参数，可不传。主要作用是标记当前标签，方便js进行查找，以确定是否已加载某个css文件。

1.3 options.callback

callback是css文件加载完成后会调用的回调函数。也存在特殊场景下，文件加载失败，回调函数仍旧执行的情况。

二、生成标签，并插入头部head，进行加载资源

var url = options.url,
 callback = typeof options.callback == "function" ? options.callback : function(){},
 id = options.id,
 node = document.createElement("link");
node.rel = "stylesheet";
node.type = "text/css";
node.href = url;
if( typeof id !== "undefined" ){
 node.id = id;
}
document.getElementsByTagName("head")[0].appendChild(node);

生成一个dom节点，然后配置好rel、type、href等必需的属性值，以便浏览器能正常解析链接的资源。

接着，查找到head节点，将节点插入。

三、实现css资源下载状态监控的pollCss方法

pollCss方法的职责是判断插入的link节点，也即node变量反馈资源是否已加载完成。

3.1 判断的主要依据

浏览器加载css资源，会给该link节点生成sheet属性，可以根据浏览器不同，读取sheet属性相关内容，来判断是否已经加载完成。所以第一句语句var sheet = node.sheet首先要做的就是获取sheet属性值。

3.2 普通浏览器判断

try{
 if(sheet.cssRules){
 isLoaded = true;
 }
}catch(ex){
 // 火狐特殊版本，通过特定值获知是否下载成功
 // The value of `ex.name` is changed from "NS_ERROR_DOM_SECURITY_ERR"
 // to "SecurityError" since Firefox 13.0. But Firefox is less than 9.0
 // in here, So it is ok to just rely on "NS_ERROR_DOM_SECURITY_ERR"
 if(ex.name === "NS_ERROR_DOM_SECURITY_ERR"){
 isLoaded = true;
 }
}

如果读取sheet.cssRules有值，证明css资源已经链接进页面，并开始解析。此时可以判断资源加载成功。

如果读取失败，则根据抛错内容，判断是否有特定name属性ex.name === "NS_ERROR_DOM_SECURITY_ERR"。存在，则代表是低版本火狐（9.0以前），且资源已经加载成功。

3.3 旧webkit内核浏览器判断

var isOldWebKit = +navigator.userAgent.replace(/.*(?:AppleWebKit|AndroidWebKit)\/?(\d+).*/i, "$1") < 536; // webkit旧内核做特殊处理
if(isOldWebKit){
 // for WebKit < 536
 if(sheet){
 isLoaded = true;
 }
}

如果是webkit旧内核浏览器，则只需要判断sheet属性值存在，则代表资源加载完成。

3.4 增加多次循环检测

setTimeout(function() {
 if(isLoaded){
 // 延迟20ms是为了给下载的样式留够渲染的时间
 callback();
 }else{
 pollCss(node, callback, step);
 }
}, 20);

触发pollCss方法后，可能第一次检测sheet值，会检测不到。也就代表还没加载完成。所以需要进行轮询。这里是隔20ms进行一次问询，直到资源加载完成为止。

3.5 轮询容错（针对Sea.js源码的优化）

css资源加载也有可能出错的时机存在，而且存在不触发onerror方法的可能性。如果不加一个保护，则轮询可能一直持续下去，所以需要有一个极限阈值。

var protectNum = 300000, // 阈值10分钟，一秒钟执行pollCss 500次
 step = 0;
// 很多代码....
step += 1;
// 保护，大于10分钟，则不再轮询
if(step > protectNum){
 isLoaded = true;
 // 清空node引用
 node = null;
 callback();
 return;
}

这里的阈值是轮询10分钟，如果10分钟后，仍然不符合条件，则默认资源已下载完成，执行callback方法，并清空node引用。

四、确定触发pollCss检查的时机

4.1 pollCss轮询的应用场景

当浏览器内核是旧的webkit内核时，或者不支持节点触发onload方法时，才使用pollCss进行轮询。

// for Old WebKit and Old Firefox
if (isOldWebKit || !supportOnload) {
 // Begin after node insertion
 setTimeout(function() {
 pollCss(node, callback, 0);
 }, 1);
 return;
}

五、现代浏览器直接用onload和onreadystatechange做判断

现代浏览器用这种方式判断，可以避免轮询的弊端。判断也更加准确及时。

5.1 onload方法

function onload() {
 // 确保只跑一次下载操作
 node.onload = node.onerror = node.onreadystatechange = null;
 // 清空node引用，在低版本IE，不清除会造成内存泄露
 node = null;
 callback();
}

onload方法触发执行后，应立即将多个相关方法进行重置，以避免callback多次触发。

node = null;将node重置为null，是为了避免低版本的IE出现内存溢出问题，及时清除没用的dom节点。

最后，执行callback方法。

5.2 支持onload方法浏览器的处理

if(supportOnload){
 node.onload = onload;
 node.onerror = function() {
 // 加载失败(404)
 onload();
 }
}

5.3 不支持onload方法浏览器的处理

if(supportOnload){
 // 代码...
}else{
 node.onreadystatechange = function() {
 if (/loaded|complete/.test(node.readyState)) {
  onload();
 }
 }
}

四、后记

选择剥离Sea.js方法进行改造的原因：因为该js库使用人群很广泛，如果出问题，作者也会及时修复。所以，以此代码为蓝本进行改造契合公司的用户群，避免大面积出现问题。

在产品上应用该方法后，到目前为止，未有客户反馈样式异常问题。所以，看本文章的程序猿们，可以放心使用。

ps：公司用户群有1千多万的用户量，涉及大大小小繁杂的浏览器，从IE6到chrome都有。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# 动态  # 加载css  # jQuery动态加载css文件实现方法  # 如何实现JavaScript动态加载CSS和JS文件  # javascript实现动态加载CSS  # IE8中使用javascript动态加载CSS的解决方法  # 加载  # 清空  # 回调  # 火狐  # 是为了  # 不支持  # 也即  # 判断是否  # 定值  # 都有  # 也有  # 还没  # 也会  # 相关内容  # 一句  # 也就  # 多个  # 要做  # 只需要  # 不符合 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)  如何在云主机快速搭建网站站点？  香港服务器选型指南：免备案配置与高效建站方案解析  香港服务器部署网站为何提示未备案？  如何安全更换建站之星模板并保留数据？  如何选择PHP开源工具快速搭建网站？  如何在HTML表单中获取用户输入并用JavaScript动态控制复利计算循环  javascript日期怎么处理_如何格式化输出  网站制作软件有哪些,制图软件有哪些？  Laravel如何配置和使用队列处理异步任务_Laravel队列驱动与任务分发实例  网站建设保证美观性，需要考虑的几点问题！  C语言设计一个闪闪的圣诞树  Python自动化办公教程_ExcelWordPDF批量处理案例  原生JS获取元素集合的子元素宽度实例  Laravel如何处理表单验证？（Requests代码示例）  教你用AI润色文章，让你的文字表达更专业  Laravel怎么解决跨域问题_Laravel配置CORS跨域访问  详解Android——蓝牙技术 带你实现终端间数据传输  JavaScript如何实现错误处理_try...catch如何捕获异常？  Python自然语言搜索引擎项目教程_倒排索引查询优化案例  进行网站优化必须要坚持的四大原则  Laravel如何保护应用免受CSRF攻击？（原理和示例）  Laravel如何使用集合（Collections）进行数据处理_Laravel Collection常用方法与技巧  Claude怎样写约束型提示词_Claude约束提示词写法【教程】  Java遍历集合的三种方式  Laravel怎么多语言本地化设置_Laravel语言包翻译与Locale动态切换【手册】  在centOS 7安装mysql 5.7的详细教程  JavaScript如何实现倒计时_时间函数如何精确控制  JS经典正则表达式笔试题汇总  javascript基于原型链的继承及call和apply函数用法分析  Laravel如何实现API版本控制_Laravel版本化API设计方案  Laravel Octane如何提升性能_使用Laravel Octane加速你的应用  详解jQuery中的事件  活动邀请函制作网站有哪些,活动邀请函文案？  javascript事件捕获机制【深入分析IE和DOM中的事件模型】  手机怎么制作网站教程步骤,手机怎么做自己的网页链接？  大连 网站制作,大连天途有线官网？  微信小程序 canvas开发实例及注意事项  惠州网站建设制作推广,惠州市华视达文化传媒有限公司怎么样？  手机软键盘弹出时影响布局的解决方法  微信小程序 require机制详解及实例代码  laravel怎么配置Redis作为缓存驱动_laravel Redis缓存配置教程  JavaScript如何操作视频_媒体API怎么控制播放  Laravel怎么处理异常_Laravel自定义异常处理与错误页面教程  Laravel Eloquent访问器与修改器是什么_Laravel Accessors & Mutators数据处理技巧  如何用腾讯建站主机快速创建免费网站？  使用PHP下载CSS文件中的所有图片【几行代码即可实现】  浅析上传头像示例及其注意事项  MySQL查询结果复制到新表的方法(更新、插入)  最好的网站制作公司,网购哪个网站口碑最好，推荐几个？谢谢？