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.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。