关于html和javascript在浏览器中的加载顺序问题的讨论（zz）

刺骨的言语ヽ痛彻心扉 2021-10-01 03:44 232阅读 0赞

## 前一阵子横扫了javascript，当时自我感觉良好。现在一想，又觉得没什么。今天的任务是把asp.net ajax中客户端页面生命周期那一章研究完。然而，因为这一章的内容使我产生了一些迷惑。这些疑惑在书中都没有只字提及。 ##

**一、html页面的详细加载过程是什么呢？页面元素在加载时的优先级是什么？**

**　　二、javascript的作用域、变量的作用域、不同脚本段之间的关系？**

**　　三、html页面的生命周期？**

这些问题真的打中了我的死穴。不了解这些，我就无法透过asp.net ajax的框架看到其底层原理。只知其然而不知其所以然。

在网上广泛查阅资料的情况下。获得了部分答案。

**关于html的加载：**

总体上，html的是按从上到下的顺序边加载边解析，边生成dom对象，至于在html中夹杂的：

document.write("xxxx");

之类的东西，它们的顺序是怎样的呢？还是一样，如果在解析html时，遇到这些东西就会停止解析，转而执行这些生成语句，如果中间插入外部链接，就转而解析、执行外部链接对应的js。对于以下语句对于不同浏览器存在不同的结果：

在ie中。不会等待aaa.js下载并解析完的，会创建另一线程搞定它，而主线程则越过去。但在ff中。则会等待，直到aaa.js下载、解析、执行完毕。

**关于javascript的执行情况**，请见本文后面所附的参考资料，里面有详尽的讨论。

**关于html中页面的生命周期：**

最重要的两个事件就是onLoad、onUnLoad。onLoad在页面加载完毕的时候触发。onUnLoad在页面的dom销毁完后触发。不过，onLoad有点特殊状况，也请参见本文后面所附的参考资料。一定要引起注意。

我看了几个站点的html源码，发现如下代码：

**<div class="ad1602"><script src="/ggjs/view1602\_w.js"></script></div>**

这是某网站在页面中显示广告的代码，国内网站，显示广告一般都是用iframe来引入第三方页面，这儿却是直接用javascript段来生成。后来，我又看了163博客生成的html代码，超变态啊。整个html代码只有一个架子，所有页面的生成都是通过js。我看到它的页面后面引入了几个js文件，最后在页面最后还有一个initAll函数的调用。我没有去仔细研究它的js代码，我怀疑它把所有表现层的功能全面放到客户端的js文件中去了。服务器端仅仅是很少的页面架子和许多的webservices。真是叹为观止啊。

**关于一个事件触发多个响应函数：**

我曾想过要自己实现一个c\#中委托一样的东西。可以让javascript的事件不止是关联到一个function。可以一次触发一个事件列表。这几天研究asp.net ajax，里面对此有封装。

asp.net ajax中，可以把一个dom元素封装成asp.net ajax中的Sys.UI.DomElement对象。然后就可以用它的方法：addHandler()、addHandlers()、removeHander()来操作事件列表。真是方便啊。当时不大明白这个原理。今天看到后面参考资料中的两段代码让我彻底明白这中间的细节：

一、使用dom 2中的接口：

if(document.addEventListener)\{  
　　　　window.addEventListener('load',f,false);  
　　　　window.addEventListener('load',f1,false);  
　　　　……  
　　\}else\{  
　　　　window.attachEvent('onload',f);  
　　　　window.attachEvent('onload',f1);  
　　　　……  
　　\}

原来，dom中早有这个概念了。才晓得。看来，我对dom还是有许多不了解的地方啊。

二、这个方法就是纯手实现了。请参见下面代码：

function addLoadEvent(func) \{

var oldonload = window.onload;

if (typeof window.onload != 'function') \{

window.onload = func;

\} else \{

window.onload = function() \{

if (oldonload) \{

oldonload();

func();

这个函数写得很巧妙。利用匿名函数搞定！

参考资料：

[javascript 控制优化页面 js 加载顺序][javascript _ js]

[html的加载过程][html]

[动态加载外部css或js文件][css_js]

[如何减少网页的内存与CPU占用][CPU]

[Javascript在页面加载时的执行顺序][Javascript]

[document.onLoad事件的奇怪现象][document.onLoad]

[javascript中的attachEvent与addEventListener][javascript_attachEvent_addEventListener]

[判断一个变量是否定义的方法][Link 1]

[居然有js写的Virtual OS][js_Virtual OS]

[javascript _ js]: http://www.webajax.cn/bcxg/2007-8-3/javascript-KongZhiYouHuaXieMian-js-JiaZaiShunXu.html
[html]: http://topic.csdn.net/t/20060402/15/4657320.html
[css_js]: http://www.xker.com/page/e2007/1220/42497.html
[CPU]: http://www.xker.com/page/e2007/1125/40491.html
[Javascript]: http://dancewithnet.com/2007/03/22/order-of-execution-of-javascript-on-web/
[document.onLoad]: http://www.knowsky.com/344718.html
[javascript_attachEvent_addEventListener]: http://blog.csdn.net/DGenerationX/archive/2007/12/23/1963730.aspx
[Link 1]: http://www.cftea.com/c/2007/04/NEVLTYFPFJI7WDJL.asp
[js_Virtual OS]: http://www.masswerk.at/jsuix/