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

前一阵子横扫了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();

}

}

}

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

赞 (0)

相关推荐

  • 在javascript中执行任意html代码的方法示例解读

    今天码代码中偶然发现有一种情况javascript的eval()函数无法执行html代码,比如: 复制代码 代码如下: <script>eval('<li>hehe</li>')</script> 代码是不会执行的,但是改为如下就可以执行了: 复制代码 代码如下: <script>eval('</script><li>hehe</li><script>')</script>

  • JavaScript改变HTML元素的样式改变CSS及元素属性

    改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法: 复制代码 代码如下: document.getElementById(id).style.property=new style <p id="p2">Hello World!</p> <script> document.getElementById("p2").style.color="blue"; </script> JS改变

  • Javascript获取HTML静态页面参数传递值示例

    给大家看一下我的代码 只要把这些代码嵌入到页面文件即可 例一 利用正则表达式来获取 复制代码 代码如下: var LocString = String(window.document.location.href); function getQueryStr(str) { var rs = new RegExp("(^|)" + str + "=([^&]*)(&|$)", "gi").exec(LocString), tmp; i

  • javascript打印html内容功能的方法示例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)

    HTML元素,属性已经十分丰富了.但是,在某些场合下,也会显得捉襟见肘,这时候自定义属性就发挥了十分关键的作用. Html元素的自定义属性,使用起来,十分方便,例如: <input type="button" value="Click Me, Baby!" /> 假设我们现在需要限制,这个按钮,只能点击2次,然后就失效了. 通常的实现方式,是可以利用全局变量的形式来记录点击次数,但我们这里用自定义属性来实现这个功能,展示一下自定义属性的优势:我们对上面的

  • 使用javascript过滤html的字符串(注释标记法)

    复制代码 代码如下: function DeleteHtmlFromStartToEnd(str, begin, end) {            str = str.replace(begin + end, "");            if (str.indexOf(begin) == -1) {//没找到                return str;            }            var substr = str.substring(str.inde

  • Javascript小技巧之生成html元素

    Javascript 生成 HTML元素的方法在本文中介绍2种,第一种是比较正规的创建元素方法,第二种是利用javascript中的write()方法直接写出html元素. 方法一: 复制代码 代码如下: //createElement()创建input元素到obj对象中   var obj = document.createElement('input');   //选择要生成地点的前一个元素   var before = document.getElementById('before'); 

  • javascript操作html控件实例(javascript添加html)

    复制代码 代码如下: //下拉列表的填充 _showSchools: function (data) { //data代表是一个数据对象 var mySelect = document.getElementById("selectSchools"); //获取下拉框                mySelect.options.length = 0;                //将option添加到select标签里面                for (var index

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

    前一阵子横扫了javascript,当时自我感觉良好.现在一想,又觉得没什么.今天的任务是把asp.net ajax中客户端页面生命周期那一章研究完.然而,因为这一章的内容使我产生了一些迷惑.这些疑惑在书中都没有只字提及. 一.html页面的详细加载过程是什么呢?页面元素在加载时的优先级是什么? 二.javascript的作用域.变量的作用域.不同脚本段之间的关系? 三.html页面的生命周期? 这些问题真的打中了我的死穴.不了解这些,我就无法透过asp.net ajax的框架看到其底层原理.只

  • jsp页面中的代码执行加载顺序介绍

    1. java是在服务器端运行的代码,jsp在服务器的servlet里运行,而javascript和html都是在浏览器端运行的代码.所以加载执行顺序是是java>jsp>js. 2. js在jsp中的加载顺序 页面上的js代码时html代码的一部分,所以页面加载的时候是由上而下加载.所以js加载的顺序也就是页面中<script>标签出现的顺序.<script>标签里面的或者是引入的外部js文件的执行顺序都是其语句出现的顺序,其中js执行的过程也是页面装载的一部分. 2

  • 基于springMVC web.xml中的配置加载顺序

    目录 springMVC web.xml中的配置加载顺序 1.Spring上下文环境的配置文件 2.SpringMVC配置文件 加载顺序是 web.xml加载顺序及Spring包扫描注意 1.web.xml文件中配置文件加载顺序 2.SpringMVC配置事务管理时 springMVC web.xml中的配置加载顺序 在这里就不详细说web.xml的文件中的具体配置,就简单说明一下其中配置信息的加载顺序: 在web.xml文件中元素的加载顺序与它们在 web.xml 文件中的先后顺序无关. 加载

  • javascript操作向表格中动态加载数据

    本文实例为大家分享了javascript实现向表格中动态加载数据的具体代码,供大家参考,具体内容如下 首先在HTML中编写表格信息 <table width="500px" border="1"> //表格头部信息 <thead> <tr> <th>编号</th> <th>姓名</th> <th>身份</th> <th>操作</th>

  • JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)

    目录: 懒加载的意义(为什么要使用懒加载) 原理 代码 在上篇文章给大家介绍了JavaScript实现图片懒加载(Lazyload),大家可以参考下. 懒加载的意义(为什么要使用懒加载) 对页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB.当页面图片很多时,页面的加载速度缓慢,几S钟内页面没有加载完成,也许会失去很多的用户. 所以,对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区

  • Android中WebView加载网页设置进度条

    Android中WebView加载网页设置进度条

    本文实例为大家分享了Android中WebView加载网页设置进度条的具体代码,供大家参考,具体内容如下 效果: xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" a

  • JQuery中DOM加载与事件执行实例分析

    本文实例讲述了JQuery中DOM加载与事件执行原理.分享给大家供大家参考.具体分析如下: JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件:当用户单击某个按钮时,也会生成事件.虽然利用传统的JavaScript事件能完成这些交互,但jQuery增加并扩展了基本的事件处理机制.jQuery不仅提供了更加优雅的事件处理语法,而且极大地增强了事件处理能

  • 浅谈js在html中的加载执行顺序,多个jquery ready执行顺序

    jQuery $(document).ready()执行顺序: 当页面DOM 元素全部加载完毕后就执行.ready().$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 如果在.ready()执行之前有javascript代码存在,那么javascript将怎么执行呢? 答案是先执行.ready()之前的javascript代码,然后执行.ready(). 多个$(document).ready()的执行顺序并非单纯的顺序执行,其与嵌套层级也有一定的关系.

  • JavaScript性能优化总结之加载与执行

    JavaScript性能优化总结之加载与执行

    前言 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载和执行脚本时出现阻塞的原因在于,脚本可能会改变页面或 JavaScript 的命名空间,它们对后面页面内容造成影响.一个典型的例子就是在页面中使用document.write(),例如清单 1 清单 1 JavaScript 代码内嵌示例 <html> <head> <title

  • 高性能的javascript之加载顺序与执行原理篇

    高性能的javascript之加载顺序与执行原理篇

    前言 javascript在浏览器中的性能,可以认为是开发者所面临的最严重的可用性问题,今天,自己看完高性能的javascript的加载和执行这一章,聊聊怎么解决js的加载顺序和执行的原理,下面话不多说了,来一起看看详细的介绍: 当浏览器遇到<script>标签的时候,浏览器必须先话时间下载外链的文件然后并执行,在这过程中,页面渲染和用户交互是完全被阻塞的. 脚本放在哪里比较好? 这种情况无疑是存在严重的性能问题的,由于脚本会阻塞页面的渲染,直到它们全部下载并执行完成后,页面渲染才会继续,下面

随机推荐