先上圖，我們?cè)俾忉?#xff0c;這圖就是瀏覽器加載網(wǎng)頁(yè)的一個(gè)過(guò)程

當(dāng)我們?cè)跒g覽器輸入一個(gè)地址（比如:http://toadw.cn）,那么點(diǎn)擊回車后，瀏覽器是如何加載網(wǎng)頁(yè)的呢？

加載過(guò)程

一開始瀏覽器是不知道你輸入的http://toadw.cn這個(gè)東西是什么的，也不知道要去哪里給你找這個(gè)網(wǎng)頁(yè)，他需要向DNS服務(wù)發(fā)出解析請(qǐng)求
大致的步驟如下：

瀏覽器發(fā)送toadw.cn尋址請(qǐng)求給DNS服務(wù)

DNS返回?cái)?shù)據(jù)告訴瀏覽器toadw.cn的服務(wù)器地址是255.255.255.255

本地電腦緩存DNS數(shù)據(jù)，并發(fā)送請(qǐng)求給255.255.255.255這個(gè)服務(wù)器，然后瀏覽器和服務(wù)器根據(jù)HTTP協(xié)議進(jìn)行通訊

網(wǎng)頁(yè)渲染

瀏覽器拿到HTML代碼之后，它是如何顯示給大家看的呢？其實(shí)所謂的渲染就是講HTML代碼根據(jù)CSS定義的規(guī)則顯示在瀏覽器窗口中的這個(gè)過(guò)程

首先瀏覽器先把這個(gè)HTML文檔先轉(zhuǎn)化為DOM樹，然后根據(jù)這個(gè)DOM樹，進(jìn)行渲染，轉(zhuǎn)化為可視的東西

在渲染的時(shí)候，瀏覽器從上到下依次渲染DOM樹，當(dāng)發(fā)現(xiàn)有外鏈資源或腳本<link>、<img>、<script>的時(shí)候會(huì)異步發(fā)起請(qǐng)求加載，同時(shí)DOM樹的解析繼續(xù)。一般我們都會(huì)把style都放在head里面，那么這樣瀏覽器就先拿到了css樣式文件，他就知道如何講每個(gè)元素繪出來(lái)放在哪個(gè)位置。

如果遇到圖片<img>瀏覽器不會(huì)等圖片加載完再去加載，而是繼續(xù)加載，這樣就會(huì)出現(xiàn)個(gè)問(wèn)題，當(dāng)圖片加載完時(shí)，在頁(yè)面插入圖片會(huì)影響頁(yè)面的結(jié)果，瀏覽器就又要重新排布，這樣瀏覽器又要花費(fèi)時(shí)間跟經(jīng)歷去排布，所有如果圖片是固定的尺寸，我們?cè)趯慍SS的時(shí)候就應(yīng)該給他加上寬高，瀏覽器就會(huì)預(yù)留一個(gè)位置給圖片，這樣就避免了重新排布

• 回流（重排reflow）

  上文中將到的重新排布就是回流，網(wǎng)頁(yè)加載慢，有一部分原因就是回流，因?yàn)闉g覽器要耗更多的時(shí)間去重新排布渲染，但回流也是不可避免的，因?yàn)榫W(wǎng)頁(yè)中的一些效果，如鼠標(biāo)滑過(guò)、點(diǎn)擊效果等引起了頁(yè)面上某些元素的占位面積、定位方式、邊距包括瀏覽器的伸縮等的變化都會(huì)發(fā)生回流。但也有些事可以避免的，例如上文中說(shuō)的給圖片定死寬高。

• 重繪（repaint）

  有個(gè)和 reflow 看上去差不多的術(shù)語(yǔ)：repaint，中文叫重繪。如果只是改變某個(gè)元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內(nèi)部布局的屬性，將只會(huì)引起瀏覽器 repaint。repaint 的速度明顯快于reflow

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

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

理解了瀏覽器是如何渲染頁(yè)面之后我們?cè)賮?lái)比較這兩者就很好理解了

• 執(zhí)行的時(shí)間

  window.onload必須等到頁(yè)面內(nèi)包括圖片的所有元素加載完畢后才能執(zhí)行。 $(document).ready()是DOM結(jié)構(gòu)繪制完畢后就執(zhí)行，不必等到加載完畢。

• 可編寫個(gè)數(shù)不停

  window.onload不能同時(shí)編寫多個(gè)，如果有多個(gè)window.onload方法，只會(huì)執(zhí)行一個(gè) $(document).ready()可以同時(shí)編寫多個(gè)，并且都可以得到執(zhí)行

• 簡(jiǎn)化縮寫

  window.onload沒(méi)有簡(jiǎn)化寫法 $(document).ready(function(){})可以簡(jiǎn)寫成$(function(){});也可寫成$().ready()

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

這里又會(huì)聯(lián)想到 $().load()和window.onload()有沒(méi)有區(qū)別？
查看jq文檔load()事件的定義是

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

所以$(window).load()和window.onload()是沒(méi)區(qū)別的，唯一的小區(qū)別就是$(window).load()可以寫很多個(gè)。

最后來(lái)個(gè)小練習(xí)

如何用原生的JS實(shí)現(xiàn)$(doucment).ready()?

總結(jié)

以上是生活随笔為你收集整理的理解浏览器是如何加载及渲染网页的的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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