原文地址：http://blog.csdn.net/superick/article/details/25393911
一，從輸入url到看到頁面的過程
從輸入url到頁面顯示出來的過程中發生了哪些事情呢？
1，域名解析，向dns服務器發出請求，將域名轉化爲ip地址
2，與服務器建立tcp鏈接，http是應用層協議，在網絡層使用的還是tcp協議
3，服務器接收http請求，執行相應的處理，返回html
4，瀏覽器接收到html，解析並渲染出頁面，此過程詳細如下：
- 1.瀏覽器開始載入html代碼，發現<head>標籤內有一個<link>標籤引用外部CSS文件，或者<script>引入的js文件。
- 2.瀏覽器又發出CSS/js文件的請求，服務器返回這個CSS/js文件，並且執行js文件。
- 3.瀏覽器繼續載入html中<body>部分的代碼，並且CSS文件已經拿到手了，可以開始渲染頁面了。
- 4.瀏覽器在代碼中發現一個<img>標籤引用了一張圖片，向服務器發出請求。此時瀏覽器不會等到圖片下載完，而是繼續渲染後面的代碼。
- 5.服務器返回圖片文件，由於圖片佔用了一定面積，影響了後面段落的排布，因此瀏覽器需要回過頭來重新渲染這部分代碼。
- 6.瀏覽器發現了一個包含一行Javascript代碼的<script>標籤，趕快運行它。
- 7.Javascript腳本執行了這條語句，它命令瀏覽器隱藏掉代碼中的某個<style>（style.display=”none”）。杯具啊，突然就少了這麼一個元素，瀏覽器不得不重新渲染這部分代碼。
- 8.終於等到了</html>的到來，瀏覽器淚流滿面……
- 9.等等，還沒完，用戶點了一下界面中的“換膚”按鈕，Javascript讓瀏覽器換了一下＜link＞標籤的CSS路徑。
- 10.瀏覽器召集了在座的各位<div><span><ul><li>們，“大夥兒收拾收拾行李，咱得重新來過……”，瀏覽器向服務器請求了新的CSS文件，重新渲染頁面。
http://www.jb51.net/web/108712.html
demo如下：
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>無標題文檔</title>
- <script type="text/javascript" src="jquery-1.7.2.min.js";></script>
- <script type="text/javascript">
- function fn(){
- alert("body.onLoad()");
- }
- window.onload=function(){
- alert("window.onload");
- }
- document.ready=function(){
- alert("document.ready");
- }
- $(function(){
- alert("$(function(){})");
- });
- $(document).ready(function(e) {
- alert("$(document).ready()");
- });
- alert("js文件被解析執行");
- </script>
- </head>
- <body onLoad="fn()">
- </body>
- </html>
1，js文件被解析執行
2，$(function(){})
3，$(document).ready()
4，document.ready
5，body.onLoad()
對調$(function(){})和$(document).ready(function(){})的順序，結果爲13245
調整$(function(){})和$(document).ready(function(){})到window.onload和document.ready的前面，結果一致
刪掉body的onLoad，5變成了window.onload
綜上，總結如下：
1，執行順序：<script>中的直接運行的js>$(function(){})=$(document).ready(function(){})>document.ready>window.load=body的onLoad
2，$(function(){})和$(document).ready(function(){})是等價的
3，body的onLoad相當於window.onload，但兩者同時存在的時候就有了很多種情況，具體可參考http://blog.csdn.net/doupei2006/article/details/7888312
4，window.onload和document.ready的區別可參考：
4，window.onload和document.ready的區別可參考：
1）.執行時間
window.onload必須等到頁面內包括圖片的所有元素加載完畢後才能執行。
$(document).ready()是DOM結構繪製完畢後就執行，不必等到加載完畢。
2）.編寫個數不同
window.onload不能同時編寫多個，如果有多個window.onload方法，只會執行一個
$(document).ready()可以同時編寫多個，並且都可以得到執行
3）簡化寫法
window.onload沒有簡化寫法，可寫在body的onLoad裏
$(document).ready(function(){})可以簡寫成$(function(){});
window.onload必須等到頁面內包括圖片的所有元素加載完畢後才能執行。
$(document).ready()是DOM結構繪製完畢後就執行，不必等到加載完畢。
2）.編寫個數不同
window.onload不能同時編寫多個，如果有多個window.onload方法，只會執行一個
$(document).ready()可以同時編寫多個，並且都可以得到執行
3）簡化寫法
window.onload沒有簡化寫法，可寫在body的onLoad裏
$(document).ready(function(){})可以簡寫成$(function(){});
參考資料： http://blog.csdn.net/itmyhome1990/article/details/7366072
http://www.jb51.net/article/21628.htm
本文整理自網絡