JavaScript判断DOM何时加载完毕的技巧

处理HTML DOM文档存在一个难题是，JavaScript可以在DOM完全加载之前执行，这会给你的代码引发不少的潜在问题。浏览器的渲染和操作顺序大致如下列表：

HTML解析完毕
外部脚本和样式表加载完毕
脚本在文档内解析并执行
HTML DOM完全构造起来
图片和外部内容加载
网页完成加载

在网页头部并且从外部文件加载的脚本会在HTML真正构造之前执行。如前所述，这是个至关重要的问题，因为这两处执行的脚本并不能访问还不存在的DOM。幸好，我们还有若干的补救方法。
目前，最常用的级数是完全等待整个页面加载完毕才执行DOM操作。这种技术只需利用window对象的load事件来绑定一个函数，页面加载完毕即可触发。


代码如下:

addEvent(window, "load", function(){
// do something
});

最简单的操作却是最慢的。在加载过程的顺序列表中，你会注意到页面的加载完毕与否完全被最后一步所掌控。这就是说，如果页面有很多的图片、视频等，用户可能得登上一段时间JavaScript才执行。
另一种级数可用以监听 DOM 加载状态，可能是最复杂的（从实现角度来看），但也是最有效地。
这项技术在不堵塞浏览器加载的情况下尽可能快地检查 HTML DOM文档是否已经加载了执行所必须得属性。以下是检查HTML DOM是否可用的几个要点：

document: 你需要知道DOM文档是否已经加载。若能足够快地检查，运气好的话你会看到undefined。
document.getElementsByTagName和document.getElementById：频繁使用document.getElementsByTagName和document.getElementById函数检查文档，当存在这些函数则表明DOM已经加载完毕。
document.body: 作为额外补充，检查元素是否已经完全加载。理论上前一个检查应该已经能做出判断，但我发现有些情况下还是不够。
使用这些检查就足够判断DOM是否可用了（“足够”在此表示可能会有一定毫秒级的时间差）。这个方法几乎没有瑕疵。单独使用前述检查，脚本应该可以在现代浏览器中运行得相对良好。但是，最近（2008年?）Firefox实现了缓存改进，使得window加载事件实际上可以在脚本能检查到DOM是否可用之前触发。为了能发挥这个优势，我同时为window加载事件附加检查，以期能获得更快的执行速度。

最后，domReady函数集合了所有需要在DOM可用时就执行的函数的引用。一旦DOM被认为是可用的，就调用这些引用并按顺序一一执行。


代码如下:

// 监听 DOM 是否可用的函数
function domReady(f) {
// 假如DOM已经加载，马山执行函数
if(domReady.done) return f();

// 假如我们已经增加了一个函数
if(domReady.timer) {
// 把它假如待执行函数清单中
domReady.ready.push(f);
} else {
// 为页面加载完毕绑定一个事件，以防它最先完成。
addEvent(window, "load", isDOMReady);
// 初始化执行函数的数组
domReady.ready = [f];
// 尽可能快的检查DOM是否已可用
domReady.timer = setInterval(isDOMReady, 13);
}
}

// 检查 DOM 是否已可操作
function isDOMReady() {
// 如果我们能判断出DOM已可能，忽略
if(domReady.done) return false;

// 检查若干函数和元素是否可能
if(document && document.getElementsByTagName && document.getElementById && document.body) {
// 如果可用，我们停止检查
clearInterval(domReady.timer);
domReady.timer = null;

// 执行所有正在等待的函数
for(var i = 0; i < domReady.ready.length; i++) {
domReady.ready[i]();
// 记录我们在此已经完成
domReady.ready = null;
domReady.done = true;
}
}
}

现在我们来看看在HTML文档中是如何执行的。假设已经将domReady函数写到一个名为domready.js的外部文件中


代码如下:

<html>
<head>
<title> Testing DOM Loading</title>
<script src="domready.js"></script>
<script>
domReady(function(){
alert("The DOM is loaded!");
// do something
});
</script>
</head>
<body>
<h1>Testing DOM Loading</h1>
<!-- 这里是大量的HTML -->
</body>
</html>

赞 (0)

相关推荐

  • JavaScript小技巧整理篇(非常全)

    能够为大家提供这些简短而实用的JavaScript技巧来提高大家编程能力,这对于我来说是件很开心的事.每天仅花上不到2分钟的时间中,你将可以读遍JavaScript这门可怕的语言所呈现给我们的特性:performance(性能), conventions(协议), hacks(代码hack), interview questions(面试问题)及所有其他的项. #24 - 使用 === 代替 == ==(或者!=)做对比的时候会将进行对比的两者转换到同一类型再比较.===(或者!==)则不会,他

  • ko knockoutjs动态属性绑定技巧应用

    ko knockoutjs动态属性绑定技巧应用

    knockoutjs 简称 ko ko的动态属性是指,ViewModel不确定的属性,而后期却需要的属性. 什么是不确定属性,比如ListModel如果 编辑某一项,想把这一项的状态变更为Edit.数据并不包括Edit属性,mvvm绑定时,会发现报错. 那么一定需要拓展ko才能达到我们的目的. 首先来认识有值属性绑定,和 无值属性绑定: 一.有值属性绑定: JS模型: 复制代码 代码如下: $(function () { var viewModel = function () { var sel

  • javascript 图片裁剪技巧解读

    学php gd库 看到有图片裁剪 正好整一个 嗯 其实挺简单的 php版 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Res

  • Javascript的数组与字典用法与遍历对象的属性技巧

    Javascript 的数组Array,既是一个数组,也是一个字典(Dictionary).先举例看看数组的用法. 复制代码 代码如下: var a = new Array(); a[0] = "Acer"; a[1] = "Dell"; for (var i = 0; i < a.length; i++) { alert(a[i]); } 下面再看一下字典的用法. 复制代码 代码如下: var computer_price = new Array(); co

  • js中字符替换函数String.replace()使用技巧

    定义和用法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. 语法 stringObject.replace(regexp/substr,replacement)参数 描述 regexp/substr 必需.规定子字符串或要替换的模式的 RegExp 对象. 请注意,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp 对象.   replacement 必需.一个字符串值.规定了替换文本或生成替换文本的函数.

  • 最佳JS代码编写的14条技巧

    写任何编程代码,不同的开发者都会有不同的见解.但参考一下总是好的,下面是来自Javascript Toolbox发布的14条最佳JS代码编写技巧. 1. 总是使用 var 在javascript中,变量不是全局范围的就是函数范围的,使用var关键词将是保持变量简洁明了的关键.当声明一个或者是全局或者是函数级(function-level)的变量,需总是前置var关键词,下面的例子将强调不这样做潜在的问题. 不使用 Var 造成的问题 var i=0; // This is good - crea

  • 在JS数组特定索引处指定位置插入元素的技巧

    如何在JS数组特定索引处指定位置插入元素? 需求: 将一个元素插入到现有数组的特定索引处.听起来很容易和常见,但需要一点时间来研究它. // 原来的数组 var array = ["one", "two", "four"]; // splice(position, numberOfItemsToRemove, item) // 拼接函数(索引位置, 要删除元素的数量, 元素) array.splice(2, 0, "three"

  • cookie在javascript中的使用技巧以及隐私在服务器端的设置

    读取cookie字符串方法: 复制代码 代码如下: alert(document.cookie); 一个网站的cookie字符串包含了该站点域名下的所有cookie(javascript 可访问的,不包括 httponly 的cookie ),多个cookie之间用分号和一个空格隔开,最多一般是 20个或50个,例如,包含2个cookie的字符串格式为 复制代码 代码如下: document.cookie = "key1=value1; key2=value2" 一个cookie字符串

  • JS代码优化技巧之通俗版(减少js体积)

    JS代码优化技巧之通俗版(减少js体积)

    细读完这篇文章,够你优化大半天的了,关于JS优化方法大都脱离不了这三种方法. (网页总大小为155.k,而JS就占了100.3K) 是时候优化下JS了 关于JS优化的文章已经很多了,大多技术性很强,像什么变量.字符串.类型,就不做介绍了,也不需要介绍,我也不懂,你知道了也没用.大多数站长都是"拿来主义",我只需要告诉JS怎么放,删那里就可以了. 现在的网站都加的有统计代码.分享工具.评论列表.相关文章插件等工具,而要实现强大的功能,必须使用JS文件,正是这些JS插件,再增强了网站功能的

  • PHP小技巧之JS和CSS优化工具Minify的使用方法

    一.实现合并和压缩多个JS和CSS文件的代码 HTML: 复制代码 代码如下: <link rel="stylesheet" type="text/css" href="cssmin.php?get=base,style1,style2,global&path=css/&v=20131023" /><script type="text/javascript" src="jsmin.p

  • nodejs的10个性能优化技巧

    nodejs的10个性能优化技巧

    下面是我们使用Node.js时遵循的10个性能规则: 1. 避免使用同步代码 在设计上,Node.js是单线程的.为了能让一个单线程处理许多并发的请求,你可以永远不要让线程等待阻塞,同步或长时间运行的操作.Node.js的一个显著特征是:它从上到下的设计和实现都是为了实现异步.这让它非常适合用于事件型程序. 不幸的是,还是有可能会发生同步/阻塞的调用.例如,许多文件系统操作同时拥有同步和异步的版本,比如writeFile和writeFileSync.即使你用代码来控制同步方法,但还是有可能不注意

  • javascript 二进制运算技巧解析

    1.原码.反码.补码,正数减法转补码加法 js 在进行二进制运算时,使用 32 位二进制整数,由于 js 的整数都是有符号数,最高位0表示正数,1表示负数,因此,js 二进制运算中使用的整数表达范围是 复制代码 代码如下: -Math.pow(2,31) ~ Math.pow(2,31)-1 // -2147483648 ~ 2147483647 原码:最高位 0 表示正,1表示负,其余 31 位是该数的绝对值(真值的绝对值)的二进制形式 反码:正数反码与原码相同,负数反码是原码符号位不变,其余

随机推荐