简单其实不简单

innerHTML操作的改进

function asyncInnerHTML(HTML, callback) {
    var temp = document.createElement('div'),
        frag = document.createDocumentFragment();
    temp.innerHTML = HTML;
    (function(){
        if(temp.firstChild){
            frag.appendChild(temp.firstChild);
            setTimeout(arguments.callee, 0);
        } else {
            callback(frag);
        }
    })();
}

看看上面的代码，对平常我们用的innerHTML做了些许改进，不管在用处上还是浏览器呈现上都有所进化。

• 使用setTimeout防止出现浏览器堵塞现象（及长时间没反应，突然一下子呈现的现象）
• 使用DocumentFragment提升效率

再来看下它的作用吧

var htmlStr = '<div><p>...</p><p>...</p><div><div>...</div>';
asyncInnerHTML(htmlStr, function(fragment){
    // You can treat 'fragment' as a regular node.
    document.body.appendChild(fragment);
});

我想这已经很明了了，这函数强于 string 转 DOM 并得到转化后的DOM对象，做点记录方便以后使用吧！

这函数的出处看这里

用JS动态监听CSS加载

周五时有个工作时需求等CSS加载完后后再执行些JS代码，但发现使用onload在Firefox chrome下不行但IE8下却可以。

第一次发现IE也有让我省心的时候啊！

问谷大叔得知研究这问题的人还挺多的：

• 在射雕的lab中发现有两个测试 load js css css preload，讲得挺多的，而且在其seajs中已经运用上了，拜之~~
• 在国外一相当大的专业问答网站中找到相同问题，也有不少人给出了解答 javascript capturing load event on link。主要讲到两种方案：
  1. 使用settimeout循环判断不同浏览器中当CSS加载完或失败时的特性，射雕使用的方案也是这种，但特性有所不同；
  2. 方案挺有意思的，同时创建link、img标签并将CSS的URL同时赋于两个标签，用img标签的onerror事件做为加载监听器，但这种方案会产生两个请求，并且img标签所发出的请求会标注不支持gzip。
• 在 Cross Browser Stylesheet Preloading中也提供了一解决方案，但代码是基于mootools写的，最重要的一点是延时判断link标签的ownerNode或owningElement属性，没用过这两个属性，不懂！！！

继续问谷大叔找到关于ownerNode（返回节点与此相关联的样式表文件的。）以及owningElement（返回附加到元素节点上的属性）的定义。

this.link.id = this.getID(); // 创建link标签时给标签加上了ID属性
// 注意 这里的file = document.styleSheets[0]; 或 document.getElementsByTagName('link')[0].sheet;
var owner = file.ownerNode ? file.ownerNode : file.owningElement;
if(owner && owner.id == this.getID()) {
    this._onready();
    return;
}

并且看到了对link标签事件支持情况：

IE6-IE9、opera  都支持link标签的 onload  onerror事件
firefox chrome  safari 都不支持link标签的 onload  onerror事件