动态加载css方法实现和深入解析(2)

如果读取失败,则根据抛错内容,判断是否有特定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都有。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwddpp.html