原文地址：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
本文整理自网络