浏览器Document Ready事件捕获策略

2019独角兽企业重金招聘Python工程师标准>>>

Document Ready event的触发点是在是页面的DOM结构加载完毕之后，页面显示之前，与window对象的onload事件不同，document ready事件不需要等待其他外部资源加载完毕。因此多数Javascript框架和页面的交互代码选择在document ready事件触发时执行。

1. W3C DOM标准策略

W3C DOM标准定义了DOMContentLoaded事件，这个事件在DOM结构加载完毕后立即触发，因此支持W3C DOM标准的浏览器可以直接绑定DOMContentLoaded事件，包括IE9+和近代版本的Firefox、Chrome、Safari和Opera。

var domLoadedHandler = function () {
    // 执行代码
    // ...
     
    // 解除事件
    document.removeEventListener("DOMContentLoaded", domLoadedHandler, false);
};
 
// 绑定事件
document.addEventListener("DOMContentLoaded", domLoadedHandler, false);
2. IE策略

IE8及以前的版本，不支持DOMContentLoaded事件，通常的策略是检查document的onreadystatechange事件。onreadystatechange事件在DOM的readystate发生变化时触发，当readystate为"complete"时，表示文档内容加载完毕。

var domLoadedHandle = function () {
    if (document.readystate === "complete") {
        // 执行代码
        //...
         
        // 解除事件
        document.detachEvent("onreadystatechange", domLoadedHandle);
    }
     
};
 
// 绑定事件
document.attachEvent("onreadystatechange", domLoadedHandle);
document的onreadystatechange事件触发(complete)总是在DOM加载完毕之后，但并不是立即触发，而是延迟一段不确定的时间。尽管如此，它会确定在window的onload事件之前触发。

3. doScroll方法 

Diego Perini 介绍了一种hack方法用于IE浏览器这里。一些document操作方法只能在DOM结构加载完毕之后才能进行，因此直到DOM加载完毕之前调用这些方法都会失败。他使用doScroll方法把文档移向最左边（文档本来的位置），当doScroll执行成功时，表示文档已经加载完毕。需要注意的是，这种方式只能用于主文档，而不适用iframe。

if (document.documentElement.doScroll && toplevel) {
    doScrollCheck();
}
function doScrollCheck() {
    try {
        document.documentElement.doScroll("left");
    }
    catch (error) {
        setTimeout(doScrollCheck, 1);
        return;
    } 
// 执行代码
// ...
}


jquery 2.0以前的版本使用了上面的三种策略，2.0以后因为支持的浏览器有所变化，只使用了DOMContentLoaded事件。

获取document的ready事件，还有一些其它的hack方式，大家如果有兴趣可以思考一下。

转载于:https://my.oschina.net/u/1992917/blog/607765