0

0

讨论html与javascript在浏览器中的加载顺序问题_javascript技巧

php中文网

php中文网

发布时间:2016-05-16 17:12:11

|

1288人浏览过

|

来源于php中文网

原创

前一阵子横扫了javascript,当时自我感觉良好。现在一想,又觉得没什么。今天的任务是把asp.net ajax中客户端页面生命周期那一章研究完。然而,因为这一章的内容使我产生了一些迷惑。这些疑惑在书中都没有只字提及。

一、html页面的详细加载过程是什么呢?页面元素在加载时的优先级是什么?

二、javascript的作用域、变量的作用域、不同脚本段之间的关系?

三、html页面的生命周期?

这些问题真的打中了我的死穴。不了解这些,我就无法透过asp.net ajax的框架看到其底层原理。只知其然而不知其所以然。

在网上广泛查阅资料的情况下。获得了部分答案。

关于html的加载:

总体上,html的是按从上到下的顺序边加载边解析,边生成dom对象,至于在html中夹杂的:

document.write("xxxx");

之类的东西,它们的顺序是怎样的呢?还是一样,如果在解析html时,遇到这些东西就会停止解析,转而执行这些生成语句,如果中间插入外部链接,就转而解析、执行外部链接对应的js。对于以下语句对于不同浏览器存在不同的结果:

在ie中。不会等待aaa.js下载并解析完的,会创建另一线程搞定它,而主线程则越过去。但在ff中。则会等待,直到aaa.js下载、解析、执行完毕。

关于javascript的执行情况,请见本文后面所附的参考资料,里面有详尽的讨论。

关于html中页面的生命周期:

最重要的两个事件就是onLoad、onUnLoad。onLoad在页面加载完毕的时候触发。onUnLoad在页面的dom销毁完后触发。不过,onLoad有点特殊状况,也请参见本文后面所附的参考资料。一定要引起注意。

我看了几个站点的html源码,发现如下代码:

这是某网站在页面中显示广告的代码,国内网站,显示广告一般都是用iframe来引入第三方页面,这儿却是直接用javascript段来生成。后来,我又看了163博客生成的html代码,超变态啊。整个html代码只有一个架子,所有页面的生成都是通过js。我看到它的页面后面引入了几个js文件,最后在页面最后还有一个initAll函数的调用。我没有去仔细研究它的js代码,我怀疑它把所有表现层的功能全面放到客户端的js文件中去了。服务器端仅仅是很少的页面架子和许多的webservices。真是叹为观止啊。

万彩商图
万彩商图

专为电商打造的AI商拍工具,快速生成多样化的高质量商品图和模特图,助力商家节省成本,解决素材生产难、产图速度慢、场地设备拍摄等问题。

下载

关于一个事件触发多个响应函数:

我曾想过要自己实现一个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();

     }

   }

}


这个函数写得很巧妙。利用匿名函数搞定!

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Word 字间距调整方法汇总
Word 字间距调整方法汇总

本专题整合了Word字间距调整方法,阅读下面的文章了解更详细操作。

2

2025.12.24

任务管理器教程
任务管理器教程

本专题整合了任务管理器相关教程,阅读下面的文章了解更多详细操作。

2

2025.12.24

AppleID格式
AppleID格式

本专题整合了AppleID相关内容,阅读专题下面的文章了解更多详细教程。

0

2025.12.24

csgo视频观看入口合集
csgo视频观看入口合集

本专题整合了csgo观看入口合集,阅读下面的文章了知道更多入口地址。

29

2025.12.24

yandex外贸入口合集
yandex外贸入口合集

本专题汇总了yandex外贸入口地址,阅读下面的文章了解更多内容。

58

2025.12.24

添加脚注通用方法
添加脚注通用方法

本专题整合了添加脚注方法合集,阅读专题下面的文章了解更多内容。

1

2025.12.24

重启电脑教程汇总
重启电脑教程汇总

本专题整合了重启电脑操作教程,阅读下面的文章了解更多详细教程。

3

2025.12.24

纸张尺寸汇总
纸张尺寸汇总

本专题整合了纸张尺寸相关内容,阅读专题下面的文章了解更多内容。

5

2025.12.24

Java Spring Boot 微服务实战
Java Spring Boot 微服务实战

本专题深入讲解 Java Spring Boot 在微服务架构中的应用,内容涵盖服务注册与发现、REST API开发、配置中心、负载均衡、熔断与限流、日志与监控。通过实际项目案例(如电商订单系统),帮助开发者掌握 从单体应用迁移到高可用微服务系统的完整流程与实战能力。

1

2025.12.24

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.6万人学习

AngularJS教程
AngularJS教程

共24课时 | 2万人学习

CSS教程
CSS教程

共754课时 | 16.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号