domReady和onload

最近面试的时候被问到了什么是domReady。

之前一直使用传统的window.onload,但是如果页面有大量的图片需要加载，那么资源还未加载完成的话用户触发页面上的事件怎么办？这时，我们就引入了domReady，只需要dom树构建完成，就触发回调函数。

本人只是从初学者角度理解一下domReady

未考虑的因素还很多，所以我简单记录一下，等以后自己水平高了再来补充。

首先了解一下浏览器渲染引擎的HTML解析流程.

解析html标签，构建页面中的dom树。
构建render树，解析样式信息。
布局render树，确定dom元素在页面的位置大小等信息。
绘制render树，渲染到页面显示。
window.onload 是第四步介绍触发，这会大大影响用户体验，因为图片样式还没加载完，用户如果点击轮播图切换之类的，都没办法绑定触发事件。

DOMContentLoaded是页面文档完全加载并解析完毕之后,会触发的事件，HTML文档不会等待样式文件,图片文件,子框架页面的加载(load事件可以用来检测HTML页面是否完全加载完毕(fully-loaded))。

使用方法

document.addEventListener(‘DOMContentLoaded’, fn,false);
兼容性：ie6，7，8不支持

然后我把司徒正美老师的《JavaScript框架设计》介绍的domReady在ie低版本下处理的代码扒来学习一下。

function myReady(fn){

    //对于现代浏览器，对DOMContentLoaded事件的处理采用标准的事件绑定方式

    if ( document.addEventListener ) {
        document.addEventListener("DOMContentLoaded", fn, false);
    } else {
        IEContentLoaded(fn);
    }

    //IE模拟DOMContentLoaded
    function IEContentLoaded (fn) {
        var d = window.document;
        var done = false;

        //只执行一次用户的回调函数init()
        var init = function () {
            if (!done) {
                done = true;
                fn();
            }
        };

        (function () {
            try {
                // DOM树未创建完之前调用doScroll会抛出错误
                d.documentElement.doScroll('left');
            } catch (e) {
                //延迟再试一次~
                setTimeout(arguments.callee, 50);
                return;
            }
            // 没有错误就表示DOM树创建完毕，然后立马执行用户回调
            init();
        })();

        //监听document的加载状态
        d.onreadystatechange = function() {
            // 如果用户是在domReady之后绑定的函数，就立马执行
            if (d.readyState == 'complete') {
                d.onreadystatechange = null;
                init();
            }
        }
    }
}

首先定义一个初始化函数init，并且定义一个开关done，使得fn回调函数只执行一次。
通过自执行函数，采用setTimeout轮询的方式，不断调用doScroll方法，MDN上的解释：在IE8中,可以使用readystatechange事件来检测DOM文档是否加载完毕.在更早的IE版本中,可以通过每隔一段时间执行一次document.documentElement.doScroll(“left”)来检测这一状态，因为这条代码在DOM加载完毕之前执行时会抛出错误(throw an error)。