瀏覽器如何加載Javascript資源？

我在Google上搜索瞭解瀏覽器如何加載資源（CSS，JS，圖像，HTML等），以及何時製作原型代碼，然後基於我的測試得到了一些困惑。以下是我的plnkr代碼，我添加了<script>以添加延遲10秒來測試文檔加載與窗口加載。瀏覽器如何加載Javascript資源？

Plnkr Code

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script data-require="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
    // executes when HTML-Document is loaded and DOM is ready 
    console.log("document loaded at "+new Date()); 

    }); 
    $(window).load(function() { 
    // executes when complete page is fully loaded, including all frames, objects and images 
    console.log("window loaded at "+new Date()); 
    }); 
</script> 
    </head> 

    <body> 
    <h1 class="red">First element :-)</h1> 
    <script src="https://httpbin.org/delay/60"></script> 
    <h1 class="blue">Second element:-)</h1> 
    </body> 

</html>

我有以下看法和疑問

我的理解是瀏覽器不顯示頁面，直到完整的頁面不會被解析，即DOM準備。但是，一旦我測試了這個示例頁面，我確實看到我的第一個H1標籤被渲染，然後等待加載下一個<script>，然後呈現第二個H1標籤。是不是頁面應該等待先構建完整的DOM然後嘗試渲染？
爲什麼$（窗口）.load和$（文件）。就緒事件得到在同一時刻被炒魷魚嗎？

來源

2016-02-09 joy

當所有的資源（如圖片等）與DOM一起加載時，會觸發window.load，而只加載DOM時觸發document.ready。 – DinoMyte

即使他們還沒有收到整個頁面，大多數瀏覽器肯定會開始渲染（對於慢速鏈接上的非常大的頁面，這是非常明顯的）。 – jcaron

Re：加載/就緒，你沒有任何圖像會延遲'加載'。另請注意，這兩個事件的詳細信息都是特定於瀏覽器的。 jQuery試圖平滑事情，但我不確定你可以指望在所有瀏覽器上100％完全相同的行爲。 – jcaron

我的理解是瀏覽器不顯示頁面，直到完整的頁面不會被解析，即DOM準備。

不正確。瀏覽器遞增地呈現頁面。

爲什麼$（window）.load和$（document）.ready事件在同一時刻被激發？

ready在HTML文檔完成渲染後立即觸發。一旦

load火災作爲HTML文檔完成渲染和外部資源（如圖像）已加載。

您沒有比樣式表以外的任何外部資源（可開始快速地加載和完成加載的頁面的其餘部分加載之前）和腳本（該塊DOM解析反正）。

來源

2016-02-17 16:56:05 Quentin

加載事件在文檔加載過程結束時觸發。不一定在渲染完成後。 –

瀏覽器如何加載Javascript資源？

回答

相關問題