html css javascript 載入的順序

標籤：

html /css /javascript 這三者的載入順序影響整個頁面的載入速度。而載入速度的快慢直接影響pv（訪問量）,而且會影響經濟收入。在大網站中，可能開啟速度快一秒，一年能多帶來上億的收入。所以我們一定要重視。

一、總體原則

　　載入的總體原則是順序載入，即從頁面的head到body結束順序載入。瀏覽器發送請求，伺服器返回了這整個頁面的代碼。所以，下一步是對這個頁面代碼進行渲染。

二、載入順序

　　如果結構是這樣寫的：

 

　　首先會載入link裡面的css檔案。但是在這裡要記住，css檔案和image檔案跟html代碼是並行下載的。

　　　　也就是說，載入css檔案的同時，html的DOM結構還在繼續載入構建。在載入的過程中如果發現某個css或者img時，會發送一個請求，然後html繼續構建，當伺服器發送回資料來以後，添加到相應的dom樹位置就好了。

　　但是走到script ，載入js的時候就不同了。需要載入完整個js檔案後，才會往下走代碼。不會並行下載。所以，按上面圖上的寫法，載入link的時候也會在載入js。只有當js載入完後，才會構建body裡的DOM樹。這時注意的問題是，js代碼運行時，

　　DOM並沒有載入在頁面中，所以在js檔案裡要加入jQuery的$(document).ready(function(){}) 或window.onload 或者js檔案裡只有函數，否則會報錯。

 

三、js檔案的置放位置。

　　1、放在head 中，在link標籤上面。所以上面圖中的放置是不正確的。正確放法是：

　　2、放在body的最下面

 

 

 

　　

 

html css javascript 載入的順序