关于html和javascript在浏览器中的加载顺序问题的讨论(zz)

前一阵子横扫了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/beyondstorm/archive/2008/09/17/1292940.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/436065.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux中sybase删除数据库,Linux_Sybase ASE数据库的常见问题解答,1 数据库占用磁盘空间的形式 - phpStudy...

Sybase ASE数据库的常见问题解答1 数据库占用磁盘空间的形式是什么&#xff1f;Master数据库的作用是什么&#xff1f;如果master失败后果如何&#xff1f;设备文件. 存储系统表, 系统将无法使用, 除非重建master库2 段的实质是什么&#xff1f;已被SYBASE中对象使用的段可否被…

【转】.NET Core 可移植类库PCL Portable Class Library详解

转自&#xff1a;https://www.kaifaxueyuan.com/server/dotnet-core/dotnet-core-portable-class-library.html 在这一章中&#xff0c;我们将讨论什么是PCL (可移植类库)&#xff0c;以及为什么我们需要PCL。为了理解这个概念&#xff0c;让我们打开上一章创建的类库项目文件夹…

sql表的所有者

今天建立了一个表&#xff0c;名为tmp_pactrebate,默认的所有者为dbo,如果想改成所有者是自己的名字&#xff0c;例如&#xff1a;wcj 在查询分析器中执行这句话即可 EXEC sp_changeobjectowner dbo.tmp_pactrebate, wcj 改后的表名为:wcj.tmp_pactrebate select * from wcj.tm…

loadrunner linux 端口,Linux下loadrunner generator的安装

Loadrunner linux generator version&#xff1a;9.5Step1&#xff1a;建立一个普通用户loadrunner&#xff0c;目录&#xff1a;/home/loadrunner&#xff0c;将安装文件考到/home/loadrunner下面&#xff0c;但是需要使用root用户安装&#xff0c;./installer.sh –consoleSt…

设计模式C++实现(4)——原型模式、模板方法模式

软件领域中的设计模式为开发人员提供了一种使用专家设计经验的有效途径。设计模式中运用了面向对象编程语言的重要特性&#xff1a;封装、继承、多态&#xff0c;真正领悟设计模式的精髓是可能一个漫长的过程&#xff0c;需要大量实践经验的积累。最近看设计模式的书&#xff0…

【转】医疗业务学习笔记--DICOM协议的基础内容!!!!!!!!!!

转自&#xff1a;医疗业务学习笔记--DICOM协议的基础内容 - 知乎 本文首发于“雨夜随笔”公众号&#xff0c;欢迎关注。 DICOM协议是医疗领域对如何处理、存储、打印和传输医疗图片的一系列标准。DICOM是 Digital Imaging and Communications in Medicine 的缩写&#xff0c;…

linux去掉u盘写保护,最全面win10系统下u盘写保护怎么去掉

U盘写保护就是只能读取U盘中的内容&#xff0c;但是却不能修改或者将其它文件保存在U盘&#xff0c;有时候U盘写保护妨碍我们使用&#xff0c;有些朋友想要将其接除&#xff0c;对此&#xff0c;我给大家整理了win10移除写保护的方法&#xff0c;希望能帮助到你U盘是通过USB接口…

PHPBB安装

安装phpbb&#xff1a; 1、先下载phpbb安装包&#xff0c;根据自己需要下载中文包或英文包&#xff1b; 2、上传到phpmysql空间里&#xff0c;解压缩&#xff1b; 3、建立数据库&#xff1b; 4、在地址栏里输入自己的域名http://example.com/ 5、根据提示安装&#xff0c;其中会…

设计模式C++实现(5)——桥接模式

软件领域中的设计模式为开发人员提供了一种使用专家设计经验的有效途径。设计模式中运用了面向对象编程语言的重要特性&#xff1a;封装、继承、多态&#xff0c;真正领悟设计模式的精髓是可能一个漫长的过程&#xff0c;需要大量实践经验的积累。最近看设计模式的书&#xff0…

【转】CT基本概念(必须掌握)!!!!!!!!!!!!!!

转自&#xff1a;http://www.bmecn.com/wenku/knowledge/988.html 1.像素&#xff08;Pixel&#xff09;和体素&#xff08;Voxel&#xff09; 像素&#xff08;Pixel&#xff09;是构成图像的基本单位&#xff0c;即图像可被分解成的最小的独立信息单元。因为图像是二维的&a…

linux下sublime安装目录在那,linux下sublime text 3安装到配置

1. Sublime Text 3的下载安装到官方网站上http://www.sublimetext.com/3下载64位(系统位64位)的.deb安装包(http://c758482.r82.cf2.rackcdn.com/sublime-text_build-3059_amd64.deb)&#xff0c;下载后双击安装即可。安装好之后&#xff0c;通过命令subl即可打开程序&#xff…

推荐笔记本用户使用的硬盘。。。2.5”战胜台式机硬盘 日立7K320-250GB

2.5”战胜台式机硬盘 日立7K320-250GB 相关评测文章参考&#xff1a;http://www.beareyes.com.cn/2/lib/200808/07/20080807034_8.htm 转载于:https://www.cnblogs.com/bingdongli/archive/2008/10/05/1304169.html

设计模式C++实现(6)——适配器模式

软件领域中的设计模式为开发人员提供了一种使用专家设计经验的有效途径。设计模式中运用了面向对象编程语言的重要特性&#xff1a;封装、继承、多态&#xff0c;真正领悟设计模式的精髓是可能一个漫长的过程&#xff0c;需要大量实践经验的积累。最近看设计模式的书&#xff0…

【转】dcmtk程序包综述(1)!!!!!!

转自&#xff1a;https://blog.csdn.net/shenziheng1/article/details/70053152 1.前言 本文对dcmtk程序包做了简单介绍&#xff0c;包括主要接口类的简单说明&#xff0c;可用的工具以及一些例子。下一步工作准备详细分析每个程序包中的接口类功能&#xff0c;并结合源码和d…

edusoho linux 500错误,EduSoho网校系统如何处理500 Internal Server Error? - EduSoho官网

500 代表着服务器处理异常&#xff0c;因此需要找出服务报的异常。如何找出异常&#xff1f;根据框架提供的机制&#xff0c;只需要在web/app.php中将开发模式打开&#xff0c;就可以看到具体异常。$kernel new AppKernel(prod, false);改成$kernel new AppKernel(prod, true…

SQL大全

--语 句              功 能 --数据操作 SELECT   --从数据库表中检索数据行和列 INSERT   --向数据库表添加新数据行 DELETE   --从数据库表中删除数据行 UPDATE   --更新数据库表中的数据 --数据定义 CREATE TABLE  --创建一个数据库表 …

设计模式C++实现(7)——装饰模式

装饰模式&#xff1a;动态地给一个对象添加一些额外的职责。就增加功能来说&#xff0c;装饰模式相比生成子类更为灵活。有时我们希望给某个对象而不是整个类添加一些功能。比如有一个手机&#xff0c;允许你为手机添加特性&#xff0c;比如增加挂件、屏幕贴膜等。一种灵活的设…

【转】dcmtk程序包综述(2)!!!!!

转自&#xff1a;https://shenchunxu.blog.csdn.net/article/details/70054161 有删改 1.dcmnet程序包 dcmnet是一个网络库及可用工具。 该模块包含了实现DICOM网络通信的所有函数集&#xff0c;即&#xff1a;DICOM上层有限状态机(DICOM Upper Layer Finite State Machine)&…

较为周全的Asp.net提交验证方案 (下)

接上篇。 下面要对这个生成的“提交验证”类进行功能扩展&#xff0c;通过.Net的“部分类”或“扩展方法”技术都可以轻松实现&#xff0c;这里采用的是“部分类”技术&#xff1a; 引用生成的ADO.NET Entity Framework数据模型的命名空间&#xff0c;且声明为部分类。 书写静态…

linux 14.04安装方法,Ubuntu 14.04 安装配置GNOME经典界面

Ubuntu 14.04上基本完美支持GNOME经典界面&#xff0c;安装配置步骤如下&#xff1a;1. 安装gnome-session-flashbacksudo apt-get install gnome-session-flashback这个包安装后&#xff0c;注销后&#xff0c;在登录界面就能选择GNOME Flashback (Compiz)这个桌面环境了。2. …