讨论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 相关文章推荐
关于JavaScript的一些看法
May 27 Javascript
javascript使用location.search的示例
Nov 05 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 Javascript
微信小程序搭建自己的Https服务器
May 02 Javascript
vue实现搜索过滤效果
May 28 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中截取字符串支持utf-8
2007/01/18 PHP
php 如何获取数组第一个值
2013/08/06 PHP
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
2014/01/22 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
Python聚类算法之基本K均值实例详解
2015/11/20 Python
python使用正则表达式替换匹配成功的组
2017/11/17 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
python中栈的原理及实现方法示例
2019/11/27 Python
CentOS 7如何实现定时执行python脚本
2020/06/24 Python
pycharm永久激活超详细教程
2020/10/29 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
2014两会学习心得:时代的发展
2014/03/17 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python