讨论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 相关文章推荐
js日期时间补零的小例子
Mar 05 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 Javascript
Angular弹出模态框的两种方式
Oct 19 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
Vue实战教程之仿肯德基宅急送App
Jul 19 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 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上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
URL编码转换,escape() encodeURI() encodeURIComponent()
2006/12/27 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
高中毕业生自我鉴定例文
2013/12/29 职场文书
学校元旦晚会方案
2014/02/19 职场文书
关爱老人标语
2014/06/21 职场文书
售后客服个人自我评价
2014/09/14 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
工作表扬信
2015/01/17 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电