(1)在chrome瀏覽器的開發(fā)過程中，我們會看到network面板中有這兩個數(shù)值，分別對應(yīng)網(wǎng) 絡(luò)請求上的標(biāo)志線，這兩個時間數(shù)值分別代表什么？

(2)我們一再強(qiáng)調(diào)將css放在頭部，將js文件放在尾部，這樣有利于優(yōu)化頁面的性能，為什么這種方式能夠優(yōu)化性能？

(3)在用jquery的時候，我們一般都會將函數(shù)調(diào)用寫在ready方法內(nèi)，這是什么原理？

首先看一下

DOMContentLoaded顧名思義，就是dom內(nèi)容加載完畢。那什么是dom內(nèi)容加載完畢呢？我們從打開一個網(wǎng)頁說起。當(dāng)輸入一個URL，頁面的展示首先是空白的，然后過一會，頁面會展示出內(nèi)容，但是頁面的有些資源比如說圖片資源還無法看到，此時頁面是可以正常的交互，過一段時間后，圖片才完成顯示在頁面。從頁面空白到展示出頁面內(nèi)容，會觸發(fā)DOMContentLoaded事件。而這段時間就是HTML文檔被加載和解析完成。

這時候問題又來了，什么是HTML文檔被加載和解析完成。要解決這個問題，我們就必須了解瀏覽器渲染原理。

當(dāng)我們在瀏覽器地址輸入URL時，瀏覽器會發(fā)送請求到服務(wù)器，服務(wù)器將請求的HTML文檔發(fā)送回瀏覽器，瀏覽器將文檔下載下來后，便開始從上到下解析，解析完成之后，會生成DOM。如果頁面中有css，會根據(jù)css的內(nèi)容形成CSSOM，然后DOM和CSSOM會生成一個渲染樹，最后瀏覽器會根據(jù)渲染樹的內(nèi)容計(jì)算出各個節(jié)點(diǎn)在頁面中的確切大小和位置，并將其繪制在瀏覽器上。

下面就是頁面加載和解析過程中，瀏覽器的一個快照

上面我們看到在解析html的過程中，html的解析會被中斷，這是因?yàn)閖avascript會阻塞dom的解析。當(dāng)解析過程中遇到<script>標(biāo)簽的時候，便會停止解析過程，轉(zhuǎn)而去處理腳本，如果腳本是內(nèi)聯(lián)的，瀏覽器會先去執(zhí)行這段內(nèi)聯(lián)的腳本，如果是外鏈的，那么先會去加載腳本，然后執(zhí)行。在處理完腳本之后，瀏覽器便繼續(xù)解析HTML文檔。

同時javascript的執(zhí)行會受到標(biāo)簽前面樣式文件的影響。如果在標(biāo)簽前面有樣式文件，需要樣式文件加載并解析完畢后才執(zhí)行腳本。這是因?yàn)閖avascript可以查詢對象的樣式。

這里需要注意一點(diǎn)，在現(xiàn)在瀏覽器中，為了減緩渲染被阻塞的情況，現(xiàn)代的瀏覽器都使用了猜測預(yù)加載。當(dāng)解析被阻塞的時候，瀏覽器會有一個輕量級的HTML（或CSS）掃描器（scanner）繼續(xù)在文檔中掃描，查找那些將來可能能夠用到的資源文件的url，在渲染器使用它們之前將其下載下來。

在這里我們可以明確DOMContentLoaded所計(jì)算的時間，當(dāng)文檔中沒有腳本時，瀏覽器解析完文檔便能觸發(fā)?DOMContentLoaded?事件；如果文檔中包含腳本，則腳本會阻塞文檔的解析，而腳本需要等位于腳本前面的css加載完才能執(zhí)行。在任何情況下，DOMContentLoaded?的觸發(fā)不需要等待圖片等其他資源加載完成。

接下來，我們來說說load，頁面上所有的資源（圖片，音頻，視頻等）被加載以后才會觸發(fā)load事件，簡單來說，頁面的load事件會在DOMContentLoaded被觸發(fā)之后才觸發(fā)。

我們在?jQuery?中經(jīng)常使用的?$(document).ready(function() { // ...代碼... });?其實(shí)監(jiān)聽的就是?DOMContentLoaded?事件，而$(document).load(function() { // ...代碼... });?監(jiān)聽的是?load?事件。在用jquery的時候，我們一般都會將函數(shù)調(diào)用寫在ready方法內(nèi)，就是頁面被解析后，我們就可以訪問整個頁面的所有dom元素，可以縮短頁面的可交互時間，提高整個頁面的體驗(yàn)。

下面我們在來看看如何實(shí)現(xiàn)這兩個函數(shù)

1、onload事件

onload事件所有的瀏覽器都支持，所以我們不需要什么兼容，只要通過調(diào)用

window.onload = function(){
    
}

2、DOMContentLoaded?事件

DOMContentLoaded不同的瀏覽器對其支持不同，所以在實(shí)現(xiàn)的時候我們需要做不同瀏覽器的兼容。

1）支持DOMContentLoaded事件的，就使用DOMContentLoaded事件；

2）IE6、IE7不支持DOMContentLoaded，但它支持onreadystatechange事件，該事件的目的是提供與文檔或元素的加載狀態(tài)有關(guān)的信息。

3) ?更低的ie還有個特有的方法doScroll，?通過間隔調(diào)用：document.documentElement.doScroll("left");

可以檢測DOM是否加載完成。 當(dāng)頁面未加載完成時，該方法會報(bào)錯，直到doScroll不再報(bào)錯時，就代表DOM加載完成了。該方法更接近DOMContentLoaded的實(shí)現(xiàn)。

function ready(fn){

    if(document.addEventListener) {
        document.addEventListener('DOMContentLoaded', function() {
            document.removeEventListener('DOMContentLoaded',arguments.callee, false);
            fn();
        }, false);
    } 

    // 如果IE
    else if(document.attachEvent) {
        // 確保當(dāng)頁面是在iframe中加載時，事件依舊會被安全觸發(fā)
        document.attachEvent('onreadystatechange', function() {
            if(document.readyState == 'complete') {
                document.detachEvent('onreadystatechange', arguments.callee);
                fn();
            }
        });

        // 如果是IE且頁面不在iframe中時，輪詢調(diào)用doScroll 方法檢測DOM是否加載完畢
        if(document.documentElement.doScroll && typeof window.frameElement === "undefined") {
            try{
                document.documentElement.doScroll('left');
            }
            catch(error){
                return setTimeout(arguments.callee, 20);
            };
            fn();
        }
    }
};

?最后我們來回答這個問題：我們?yōu)槭裁匆辉購?qiáng)調(diào)將css放在頭部，將js文件放在尾部

在面試的過程中，經(jīng)常會有人在回答頁面的優(yōu)化中提到將js放到body標(biāo)簽底部，原因是因?yàn)闉g覽器生成Dom樹的時候是一行一行讀HTML代碼的，script標(biāo)簽放在最后面就不會影響前面的頁面的渲染。那么問題來了，既然Dom樹完全生成好后頁面才能渲染出來，瀏覽器又必須讀完全部HTML才能生成完整的Dom樹，script標(biāo)簽不放在body底部是不是也一樣，因?yàn)閐om樹的生成需要整個文檔解析完畢。

我們再來看一下chrome在頁面渲染過程中的，綠色標(biāo)志線是First Paint的時間。納尼，為什么會出現(xiàn)firstpaint，頁面的paint不是在渲染樹生成之后嗎？其實(shí)現(xiàn)代瀏覽器為了更好的用戶體驗(yàn),渲染引擎將嘗試盡快在屏幕上顯示的內(nèi)容。它不會等到所有HTML解析之前開始構(gòu)建和布局渲染樹。部分的內(nèi)容將被解析并顯示。也就是說瀏覽器能夠渲染不完整的dom樹和cssom，盡快的減少白屏的時間。假如我們將js放在header，js將阻塞解析dom，dom的內(nèi)容會影響到First Paint，導(dǎo)致First Paint延后。所以說我們會將js放在后面，以減少First Paint的時間，但是不會減少DOMContentLoaded被觸發(fā)的時間。

總結(jié)

以上是生活随笔為你收集整理的chrome浏览器中DOMContentLoaded与load时间的区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。