关于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

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

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

相关文章

java 观察者模式_Java技术干货分享:深入理解观察者模式原理与技术

来源&#xff1a;编程技术精选观察者模式(Observer Pattern)也叫做发布-订阅(Publish/Subscribe)模式、模型-视图(Model/View)模式。这个模式的一个最重要的作用就是解耦。也就是将被观察者和观察者进行解耦&#xff0c;使得他们之间的依赖性更小&#xff0c;甚至做到毫无依赖。…

python导入pyecharts错误没有pyecharts_python报No module named 'pyecharts'的错误怎么办?

问&#xff1a;导包的时候报No module named pyecharts的错误怎么办&#xff1f;答&#xff1a;报上述错误一般是因为pyecharts这个包没有下载成功&#xff0c;下面给大家介绍一下pyecharts库的安装与使用方法&#xff01;pyecharts是Python的数据可视化库&#xff0c;可以帮助…

iOS开发:AFNetworking、MKNetworkKit和ASIHTTPRequest比较

转&#xff1a;http://www.xue5.com/Mobile/iOS/747036.html 之前一直在使用ASIHTTPRequest作为网络库&#xff0c;但是由于其停止更新&#xff0c;iOS7上可能出现更多的问题&#xff0c;于是决定更换网络库。 目前比较流行的网络库主要有AFNetworking和MKNetworkKit&#xff…

java .listfiles_Java File.listFiles()

全屏Java Java File.listFiles()方法具有以下语法。public File [] listFiles()示例在下面的代码显示如何使用File.listFiles()方法。import java.io.File;// At: W w W. y I i ba I.C o mpublic class Main {public static void main(String[] args) {// create new fileFile …

基础入门_Python-内建函数.运维开发中eval内建函数的最佳实践?

简单介绍:说明: 在指定命名空间中计算参数字符串的有效表达式,并返回一个对象,Help on built-in function eval in module __builtin__:eval(...)eval(source[, globals[, locals]]) -> valueEvaluate the source in the context of globals and locals.The source may be a…

java简单毕设_计算机毕业设计之自定义毕设课题需要如何确定工作量

“ 真正让导师满意的不是众多普通的功能&#xff0c;而是那一抹有创意的充满着生活气息的小功能。”自定义毕设课题&#xff0c;我觉得这是一种体现学生创新的一种很好的手段&#xff0c;但是有一些学生却因为脑海中没有积累足够多的专业知识以及也没有对现实生活进行足够的思考…

C#基础系列第五篇

前言&#xff1a; 完全是我在学习过程中记录的笔记&#xff0c;只不过分享一下让很多刚开始学习.net编程的人能够很快的学会C#语言 多态的一些说明(1) 多态就是为了程序的可扩展性 (2)多态的使用&#xff1a;将不同的对象当作父类来看&#xff0c;屏蔽掉各个对象间的不同&#…

罗伯特·帕丁森Robert Pattinson(2)

2019独角兽企业重金招聘Python工程师标准>>> 转载于:https://my.oschina.net/Bettyty/blog/756873

网博士自助建站系统_自助建站:自助建站到底好还是不好?

自助建站到底好还是不好&#xff1f;很多想要做企业网站的企业都比较关心这个问题&#xff0c;因为自助建站便宜、快&#xff0c;有的自助建站做出来的效果还非常好&#xff0c;不输于定制的网站的效果&#xff0c;那为什么自助建站大都还很便宜呢&#xff1f;东西还好还便宜的…

linux tar.gz zip 解压缩 压缩命令

http://apps.hi.baidu.com/share/detail/37384818 download ADT link http://dl.google.com/android/ADT-0.9.6.zip download SDK link http://dl.google.com/android/android-sdk_r11-linux_x86.tgz(能够通过翻墙得到详细的文件名称&#xff0c;再通过链接下载就可以) tar -c:…

HNU 11720 God Created The Integers

原题传送&#xff1a;http://acm.hnu.cn/online/?actionproblem&typeshow&id11720&courseid0 对于这条式子&#xff1a; 和下面的式子是等价的&#xff1a; Sp (p2 - 1) / 2 - (p - 1) / 4 那么求出Sp后有rp*Sp ≡ 1 (mod p)&#xff0c;用扩展GCD求出rp就行了。…

java equals 的区别_java中equals和==的区别是什么-百度经验

在jdk1.5以上的版本中&#xff0c;基本类型和封装类能自动转化&#xff0c;与String类型的对象和字符串常量类似。Integer i1 123; Integer i2 123 int i 123; Integer i3 new Integer(123); Integer i4 new Integer(123); …

ps命令使用 进程查看

ps命令是Process Status的缩写用来列出系统中当前运行的那些进程。ps命令列出的是当前那些进程的快照&#xff0c;就是执行ps命令的那个时刻的那些进程&#xff0c;如果想要动态的显示进程信息&#xff0c;就可以使用top命令。使用该命令可以确定有哪些进程正在运行和运行的状态…

stm32例程_如何学习STM32?

阅读全文大约10min//封面为我现在使用的STM32型号&#xff1a;旗舰版 Stm32f103ZE//本文内容是对正点原子的资料整理参考资料&#xff1a;CM3权威指南/CM4权威指南&#xff08;ARM提供&#xff09;芯片参考手册 STM32F10x中文参考手册 芯片数据手册 STM32F103xCDE_DS_CH_V5.pdf…

java compile_java中的CompileAPI入门及使用

介绍java5之前我们可以通过java提供的tools.jar来操作java编译器&#xff0c;java6提供了新的API&#xff0c;让我们可以更方便的调用。包名为javax.tools。使用通过文件编译String filePath "D:\\Client.java";//获取java编译器JavaCompiler javaCompiler ToolPro…

《Two Days DIV + CSS》读书笔记——CSS选择器

1.1.2 CSS选择器 CSS 选择器最基本的有四种&#xff1a;标签选择器、ID 选择器、类选择器、通用选择器。 【标签选择器】 一个完整的 HTML 页面由很多不同的标签组成&#xff0c;而标签选择器&#xff0c;则是决定哪些标签采用相应的 CSS 样式&#xff0c;比如&#xff0c;在 s…

TempDB为什么要根据CPU数目来决定文件个数

在SQL Server的世界中&#xff0c;SQL Server在Windows之上有一套自己的任务调度和资源分配系统&#xff0c;这使得SQL Server作为Windows的一个进程&#xff0c;却可以处理大量的并发&#xff0c;这些任务调度和资源分配非常像一个操作系统&#xff0c;因此SQL Server在Window…

python基础到实践_一本书搞定Python入门到实践

题图&#xff1a;Photo by Aaron Burden on Unsplash上周介绍了几本Python从入门到进阶书籍&#xff0c;今天推荐一本入门好书《Python编程&#xff1a;从入门到实践》&#xff0c;适合零基础小白&#xff0c;也适合有其它语言背景的程序员。书中有哪些亮点&#xff1f;2016年出…

Linux网卡eth0变成eth1修改方法

由于换了主板&#xff0c;集成网卡mac地址变了&#xff0c;70-persistent-net.rules中仍然保留了老网卡的内容&#xff0c;新网卡则被识别为eth1。 将表示老网卡的行注释掉&#xff0c;然后将表示新网卡的行中eth1改成eth0&#xff0c;在把网卡配置文件ifcfg-eth0的mac地址改成…

java微博模拟登陆_java 模拟登录新浪微博(通过cookie)

这几天一直在研究新浪微博的爬虫&#xff0c;发现爬取微博的数据首先要登录。本来打算是通过账号和密码模拟浏览器登录。但是现在微博的登录机制比较复杂。通过账号密码还没有登录成功QAQ。所以就先记录下&#xff0c;通过cookie直接访问自己的微博主页。微博登录的认证过程微博…