javascript的页面加载及性能优化(兼容IE7)

标签：

通常来说，window.onload就够用了，如果想加载多个事件，我们可以采取以下方式：

window.onload = function(){

}

但是如果我们需要页面完全呈现前做一些东西呢，如通过脚本加载其他js文件，或在IE6实现fixed……这些东西就要用到domReady 了，domReady好像是jQuery的叫做，一个加载函数。在W3C的草稿中，它其中是一种事件，名为 DOMContentLoaded。DOMContentLoaded事件比onload事件快许多，它是在DOM树建成之时就触发，而onload必须 要等待页面所有元素的资源都下载完毕时才触发。在标准游览器中调用这个事件很简单的：

IE虽然有这么多私有事件，但却没有一个与它相同的，最接近的是readystatechange，加上其他乱七八糟的东西，我们还是能够模拟DOMContentLoaded的。

有时我们加载事件时，可能不是单是通过一个函数就加载完的。比如我要用window.onload加载一段代码，但我还通过JS文件加载一个开源插 件，那个插件当它要处理DOM，还是需要等到DOM树完成之时，因此它可能也要搞一个window.onload块。这时页面拥有两个 window.onload代码块，很显然，第二个会覆盖掉第一个。这时，我们就要用到loadEvent这样的多重加载函数了。

在标准游览器中，因为有addEventListener，很轻松就实现DOMContentLoaded的多重加载，那IE怎么办？唯一的办法 是，无论是addEventListener还是attachEvent都执行，把多个要加载的代码整合到一块，一次性执行。因此，我们需要一个数组。

那么怎样执行它们，上面仅仅是添加事件，我们需要另一个函数，专门用来执行它的。

那么我们要在什么时候执行上面的函数呢？我们仅讨论IE的情况。在IE中，任何DOM元素都有一个doScroll 方法，无论它们是否支持滚动条。为了判断DOM树是否建成，我们只看看documentElement是否完整就是，因为，它作为最外层的元素，作为 DOM树的根部而存在，如果documentElement完整的话，就可以调用doScroll方法了。当页面一加载JS时，我们就执行此方法，当然要 如果documentElement还不完整就会报错，我们在catch块中重新调用它，一直到成功执行，成功执行时就可以调用 fireContentLoadedEvent 方法了。

我们要页面加载JS立即执行此函数，是直接pollDoScroll()吗？！不要忘记，它只是应用于IE中，我们还要判定一下浏览器。如果支持 addEventListener，也肯定支持DOMContentLoaded了（不考虑旧版本），否则就运行pollDoScroll函数。

完整的代码如下：

}

javascript的页面加载及性能优化(兼容IE7)

标签：

原文地址：http://www.cnblogs.com/koleyang/p/4882162.html