讨论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 相关文章推荐
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
JavaScript中const、var和let区别浅析
Oct 11 Javascript
微信小程序 开发之全局配置
May 05 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 Javascript
运用js实现图层拖拽的功能
May 24 Javascript
Vue-CLI 项目在pycharm中配置方法
Aug 30 Javascript
React实现todolist功能
Dec 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
咖啡与牛奶
2021/03/03 冲泡冲煮
PHP实现路由映射到指定控制器
2016/08/13 PHP
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
javascript 触发事件列表 比较不错
2009/09/03 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
从零学Python之入门(三)序列
2014/05/25 Python
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
详解Django中的过滤器
2015/07/16 Python
Python3实现Web网页图片下载
2016/01/28 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
python matlibplot绘制3D图形
2018/07/02 Python
python实现顺序表的简单代码
2018/09/28 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
园长自我鉴定
2013/10/06 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
安全目标责任书
2014/07/22 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
公司放假通知怎么写
2015/04/15 职场文书
python 实现德洛内三角剖分的操作
2021/04/22 Python