页面的onload和ready问题总结

最新推荐文章于 2023-06-13 23:01:03 发布

LittleLeeZi

最新推荐文章于 2023-06-13 23:01:03 发布

阅读量1.6k

点赞数

分类专栏： javascript html 文章标签： html

javascript 同时被 2 个专栏收录

11 篇文章

订阅专栏

html

7 篇文章

订阅专栏

一，从输入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://oilbeater.com/%E6%8A%80%E6%9C%AF%E7%9B%B8%E5%85%B3/2014/05/08/from-url-to-webpage.html

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.οnlοad=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.youkuaiyun.com/doupei2006/article/details/7888312
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(){});

参考资料： http://blog.youkuaiyun.com/itmyhome1990/article/details/7366072

http://www.jb51.net/article/21628.htm

本文整理自网络