讨论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 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
广告切换效果(缓动切换)
May 27 Javascript
javascript模拟的Ping效果代码 (Web Ping)
Mar 13 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
js格式化时间的简单实例
Nov 27 Javascript
浅谈原型对象的常用开发模式
Jul 22 Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
Angular开发实践之服务端渲染
Mar 29 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
ES6 Set结构的应用实例分析
Jun 26 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中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
php生成HTML文件的类方法
2019/10/11 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
用户注册常用javascript代码
2009/08/29 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
2010/09/10 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
opencv+python实现均值滤波
2020/02/19 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
美丽乡村建设实施方案
2014/03/23 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/09/30 职场文书
运动与健康自我评价
2015/03/09 职场文书
护士求职简历自我评价
2015/03/10 职场文书
肖申克的救赎观后感
2015/06/02 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
简述Java中throw-throws异常抛出
2021/08/07 Java/Android