理解瀏覽器是如何加載及渲染網頁的

先上圖，咱們再慢慢解釋，這圖就是瀏覽器加載網頁的一個過程

當咱們在瀏覽器輸入一個地址（好比:http://toadw.cn）,那麼點擊回車後，瀏覽器是如何加載網頁的呢？

加載過程

一開始瀏覽器是不知道你輸入的http://toadw.cn這個東西是什麼的，也不知道要去哪裏給你找這個網頁，他須要向DNS服務發出解析請求
大體的步驟以下：

1. 瀏覽器發送toadw.cn尋址請求給DNS服務

2. DNS返回數據告訴瀏覽器toadw.cn的服務器地址是255.255.255.255

3. 本地電腦緩存DNS數據，併發送請求給255.255.255.255這個服務器，而後瀏覽器和服務器根據HTTP協議進行通信

網頁渲染

瀏覽器拿到HTML代碼以後，它是如何顯示給你們看的呢？其實所謂的渲染就是講HTML代碼根據CSS定義的規則顯示在瀏覽器窗口中的這個過程

1. 首先瀏覽器先把這個HTML文檔先轉化爲DOM樹，而後根據這個DOM樹，進行渲染，轉化爲可視的東西

2. 在渲染的時候，瀏覽器從上到下依次渲染DOM樹，當發現有外鏈資源或腳本<link>、<img>、<script>的時候會異步發起請求加載，同時DOM樹的解析繼續。通常咱們都會把style都放在head裏面，那麼這樣瀏覽器就先拿到了css樣式文件，他就知道如何講每一個元素繪出來放在哪一個位置。

3. 若是遇到圖片<img>瀏覽器不會等圖片加載完再去加載，而是繼續加載，這樣就會出現個問題，當圖片加載完時，在頁面插入圖片會影響頁面的結果，瀏覽器就又要從新排布，這樣瀏覽器又要花費時間跟經歷去排布，全部若是圖片是固定的尺寸，咱們在寫CSS的時候就應該給他加上寬高，瀏覽器就會預留一個位置給圖片，這樣就避免了從新排布

• 迴流（重排reflow）

  上文中將到的從新排布就是迴流，網頁加載慢，有一部分緣由就是迴流，由於瀏覽器要耗更多的時間去從新排布渲染，但迴流也是不可避免的，由於網頁中的一些效果，如鼠標滑過、點擊效果等引發了頁面上某些元素的佔位面積、定位方式、邊距包括瀏覽器的伸縮等的變化都會發生迴流。但也有些事能夠避免的，例如上文中說的給圖片定死寬高。

• 重繪（repaint）

  有個和 reflow 看上去差很少的術語：repaint，中文叫重繪。若是隻是改變某個元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內部佈局的屬性，將只會引發瀏覽器 repaint。repaint 的速度明顯快於reflow

$(img).css('width',200px)//重排
$(body).css('backgroud','#fff')//重繪

window.onload()與$(document).ready()的區別

理解了瀏覽器是如何渲染頁面以後咱們再來比較這二者就很好理解了

• 執行的時間

  window.onload必須等到頁面內包括圖片的全部元素加載完畢後才能執行。 
  $(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢。

• 可編寫個數不停

  window.onload不能同時編寫多個，若是有多個window.onload方法，只會執行一個 
  $(document).ready()能夠同時編寫多個，而且均可以獲得執行

• 簡化縮寫

  window.onload沒有簡化寫法 
  $(document).ready(function(){})能夠簡寫成$(function(){});也可寫成$().ready()

$().load()和window.onload()的區別

這裏又會聯想到 $().load()和window.onload()有沒有區別？
查看jq文檔load()事件的定義是

當指定的元素（及子元素）已加載時，會發生 load() 事件。且$(window).load 方法是 $(window).on('load',handler) 的shortcut

因此$(window).load()和window.onload()是沒區別的，惟一的小區別就是$(window).load()能夠寫不少個。

最後來個小練習

如何用原生的JS實現$(doucment).ready()?