讨论html与javascript在浏览器中的加载顺序问题


Posted in Javascript onNovember 27, 2013

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

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

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

三、html页面的生命周期?

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

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

关于html的加载:

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

document.write("xxxx");

<script type="text/javascript" src="aaa.js"></script>

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

<script type="text/javascript" src="aaa.js"></script>

在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 相关文章推荐
Knockoutjs的环境搭建教程
Nov 26 Javascript
使用js判断控件是否获得焦点
Jan 03 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
Dec 01 Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 Javascript
Javascript缓存API
Jun 14 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 Javascript
vue.js学习之递归组件
Dec 13 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 Javascript
老生常谈jquery id选择器和class选择器的区别
Feb 12 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
js替代copy(示例代码)
Nov 27 #Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 #Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 #Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 #Javascript
JS、CSS加载中的小问题探讨
Nov 26 #Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 #Javascript
使用js解决由border属性引起的div宽度问题
Nov 26 #Javascript
You might like
提升PHP执行速度全攻略(下)
2006/10/09 PHP
php实现图片添加水印功能
2014/02/13 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
浅谈PHP的反射机制
2016/12/15 PHP
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
Python类定义和类继承详解
2015/05/08 Python
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
python基于SMTP协议发送邮件
2019/05/31 Python
python实现可变变量名方法详解
2019/07/01 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
Intersport西班牙:在线体育商店
2019/11/06 全球购物
Python如何实现单例模式
2016/06/03 面试题
护理专业毕业生自荐信范文
2014/01/05 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
长城导游词
2015/01/30 职场文书
2015员工年度考核评语
2015/03/25 职场文书
签订劳动合同通知书
2015/04/16 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP