DOM Ready

时间 2019-11-08

标签 dom ready 栏目 HTML 繁體版

原文原文链接

1、说明 javascript

当页面有一个URL的时候，浏览器就会加载HTML，全部的HTML标签都转换完毕之后就叫作DOM树构建完毕。css

渲染引擎的职责就是把请求的内容显示在屏幕上，渲染引擎能够显示HTML，XML，图片。经过插件能够显示其余类型的文档。渲染引擎首先经过网络得到所请求的内容，一般以8k分块的方法来完成。html

这四步仅仅是HTML结构的渲染过程，并不包括加载外部的文件、脚本，外部文件的加载是贯穿HTML加载的整个过程.java

详细可参考 https://kb.cnblogs.com/page/129756/node

2、window.onload & domReady 浏览器

window.onload是浏览完绘制完全部的节点，而且当页面上全部的资源加载完毕后再执行咱们定义的业务逻辑，window.onload在外部资源（如：图片）很少的时候是没有什么问题的，可是当外部资源太多的时候，加载就会很慢，影响用户体验，这时能够把JQ的代码放在JS的ready回调里。即便用以下方法：网络

$(document).ready(function(){
             document.getElementById("header").style.color="orange";
         })

在页面的DOM树建立完成后（也就是HTML解析完第一部完成）即触发，而无需等待其余资源加载。即DOMReady实现策略：dom

1）.支持DOMCotentLoaded事件的，就使用DOMContentLoaded事件函数

2）.不支持的，就用来自Diego Perini发现的著名Hack兼容，兼容原理大概就是：经过IE中的document.docuemntElement.doScroll('left')来判断DOM树是否建立完毕。spa

因此，是DOM文档加载的步骤为:

1.解析HTML结构

2.加载外部脚本和样式文件

3.解析并执行脚本文件

4.DOM树构建完成会触发DOMcontentLoaded事件

5.加载图片等外部文件

6.页面加载完毕后会触发window.onload事件；

DOMready会是在步骤4触发的 window.onload是在步骤6触发的为了提升用户体验你总不能等图片页面加载完才执行那些js代码吧好比给页面上的按钮绑定点击事件这样就很糟糕了

PS：插播一下

递归函数（概念）

递归函数即自调用函数，在函数体内部间接或者直接的本身调用本身，即函数的嵌套调用是函数自己。

例如，下面的程序为求n!：

　　　　long fact(int n)

　　　　{

　　　　　if(n==1)

　　　　　return 1；

　　　　　return fact(n-1)*n；／／出现函数自调用

　　　　}　

浏览器的Hack（概念）

Hack是针对不一样的浏览器去写不一样的CSS样式，从而让各浏览器能达到一致的渲染效果，那么针对不一样的浏览器写不一样的CSS CODE的过程，就叫CSS HACK，同时也叫写CSS Hack。

http://www.wufangbo.com/css-hack/

https://blog.csdn.net/freshlover/article/details/12132801

DOM Ready JS

function myReady(fn){
    /*对于现代浏览器，对DOMContentLoaded事件的处理采用标准的事件绑定方式
     这是典型的经过能力检测来区分浏览器的方法
     */
    if(document.addEventListener){
        document.addEventListener("DOMContentLoaded",fn,false)//DOM要大写
    }else{
        IEContentLoaded(fn);//对于IE低版本浏览器，就使用IE的dom加载
    }

    //IE模拟DOMContentLoaded
    function IEContentLoaded(fn){
        var d=window.document; //获取window下的doc
        var done=false;//定义一个标志变量

        //只执行一次用户的回调函数init()
        var init=function(){
            if(!done){
                done=true;
                fn();
            }
        };
        //若是document的状态加载未就绪，如何当即监测到并当即调用回调函数呢；先定义一段密集调用的函数表达式
        (function () {
            try{
                //dom树未建立以前，调用doScroll的时候会抛出错误
                d.documentElement.doScroll('left');
            }catch(e){
                //y延迟再试一次
                setTimeout(arguments.callee,50);
                return;//return实现递归
            }
            init();
        })();

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

一个验证DOM Ready的实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOMReady综合案例</title>
    <script src="domReady.js"></script>
</head>
<body>
<div id="showMsg"></div>
<div >
    <img src="../images/1.jpg"/>
    <img src="../images/2.jpg"/>
    <img src="../images/3.jpg"/>
    <img src="../images/4.jpg"/>
    <img src="../images/5.jpg"/>
    <img src="../images/6.jpg"/>
</div>

<script type="text/javascript">
    var d=document;
    var msgBox=d.getElementById("showMsg");
    var img=d.getElementsByTagName("img");
    var time1=null, time2=null;
    myReady(function () {
        msgBox.innerHTML+="dom已加载！<br/>";
        time1=new Date().getTime();
        msgBox.innerHTML+="时间戳："+time1+"<br/>";
    });
    window.onload=function(){
        msgBox.innerHTML+="onload已加载！<br/>";
        time2=new Date().getTime();
        msgBox.innerHTML+="domReady比onload快："+(time2-time1)+"ms<br/>"
    };

   var isElement= function(el){
       return !!el&&el.nodeType===1;
   };
   console.log(document.getElementById("showMsg"));
</script>
</body>
</html>

var isElement= function(el){
    return !!el&&el.nodeType===1;
};

tips:

!!通常用来将后面的表达式转换为布尔型的数据（boolean).  由于javascript是弱类型的语言（变量没有固定的数据类型）因此有时须要强制转换为相应的类型，相似的如:
 a=parseInt("1234"); a="1234"+0 //转换为数字 b=1234+"" //转换为字符串 c=someObject.toString() //将对象转换为字符串 其中第1种、第4种为显式转换，二、3为隐式转换. 
布尔型的转换，javascript约定和c相似，规则为 : false、undefinded、null、0、"" 为 false ; true、一、"somestring"、[Object] 为 true .
 !!el表示判断是否el存在,存在为true,反之为false.