关于html和javascript在浏览器中的加载顺序问题的讨论
转自:http://www.cnblogs.com/beyondstorm/archive/2008/09/17/1292940.html
前一阵子横扫了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 加载顺序
html的加载过程
动态加载外部css或js文件
如何减少网页的内存与CPU占用
Javascript在页面加载时的执行顺序
document.onLoad事件的奇怪现象
javascript中的attachEvent与addEventListener
判断一个变量是否定义的方法
居然有js写的Virtual OS
转载于:https://www.cnblogs.com/jubincn/archive/2012/09/29/3381156.html
关于html和javascript在浏览器中的加载顺序问题的讨论相关推荐
- 关于html和javascript在浏览器中的加载顺序问题的讨论(zz)
前一阵子横扫了javascript,当时自我感觉良好.现在一想,又觉得没什么.今天的任务是把asp.net ajax中客户端页面生命周期那一章研究完.然而,因为这一章的内容使我产生了一些迷惑.这些疑惑 ...
- android webview加载不出来,【新手有关问题】Android浏览器中WebView加载不出网页
当前位置:我的异常网» Android » [新手有关问题]Android浏览器中WebView加载不出网 [新手有关问题]Android浏览器中WebView加载不出网页 www.myexcepti ...
- HTML基础和JSP了解及JSP中代码加载顺序
HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...
- 环境变量path中,加载顺序,先加在配置在最前面的,如果找到不继续往下寻找。
环境变量path中,加载顺序,先加在配置在最前面的,如果找到,不继续往下寻找. 并使用已经找到的. (前言,懒得配置环境变量,直接写bat设置环境变量,然后启动Eclipse. 结果发祥32位JDK和 ...
- java代码加载_java类中代码加载顺序
package org.senssic; /** * 一般顺序:静态块-->静态变量-->成员变量-->构造方法-->静态方法(或非静态方法,需要调用) * 1.静态代码块(只 ...
- java父类与子类的构造方法_java中的加载顺序以及父类与子类的构造方法 | 学步园...
public class fatt { public static void main(String[] args) { animal a=new cat(9); } } class animal{ ...
- php 扩展加载顺序,关于PHP中extension加载顺序问题的解决方法
有的php扩展,加载是有先后顺序的,如果搞错了,会导致扩展无法加载. 1.pdo_sqlsrv是sqlserver扩展,如果在pdo扩展之前加载就会报以下错误:PHP Warning: PHP Sta ...
- JavaWeb的web.xml中context-param、listener、filter、servlet加载顺序(重点)
文章目录 结论 分析 1.context-param 2.listener 3.filter 4.servlet 总结 结论 先说结论,在JavaWeb的web.xml中的加载顺序为: context ...
- JavaScript(JS) 浏览器中设置启用或禁用
所有的现代浏览器都内置了对JavaScript的支持.通常,可能需要手动启用或禁用此支持.本章介绍在浏览器中启用和禁用JavaScript支持的过程:Internet Explorer.Firefox ...
最新文章
- 计算机中的概念: 视图 VS 镜像
- 8086 CPU 寄存器简介
- 一不小心就踩坑的fail-fast是个什么鬼?
- BZOJ5290 洛谷4438:[HNOI/AHOI2018]道路——题解
- 7.边缘检测:2D运算——Canny边缘原理、Canny边缘检测器、Canny-Matlab实战_2
- 电脑桌面游戏_二次元游戏的高人气角色,不管男女都有一个特点,是巧合吗?...
- 操作 Wave 文件(3): 接触 mmio 系列函数
- zabbix常见报错
- 第4章 基本TCP套接口编程
- LabVIEW开发结构监控系统
- Rocket MQ系列四 - 消息发送流程
- Hello!树先生 (2011)
- BIOS/UEFI基础——Protocol介绍
- 微信小程序获取今日天气预报api 免费接口
- C#绘制GPS星空图
- 推荐系统与知识图谱(2)
- 基于Idea的音乐播放器APP软件设计与实现
- 如何在网页里插入3D模型并进行互动展示?
- SendMessage用法
- 腾讯课堂在线视频下载
热门文章
- matlab 定义一个有自变量的方程_Eviews、Stata、Python、Matlab、R描述+相关+回归分析教程汇总...
- /lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.17' not found 解决办法
- USB接口定义(Z)
- REST HTTP中的POST PUT GET
- V模型的价值在于非常明确地标明了测试过程中存在的不同级别,并且清楚地描述了这些测试阶段和开发过程各阶段的对应关系。在V模型中,测试工作在编码之后才能进行,所以在软件开发早期各个阶段引入的错误不能及时被
- 支付宝瓜分9亿,20倍大概能分到多少钱?
- BRAND-NEW OF DOUBLES工作组合的新作品
- 好用的Perl包 Class::Ref
- Java面向对象进阶
- java停车收费系统 源码开源_Java开源商城源码推荐,从菜鸡到大神,永远绕不开的商城系统