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

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

window.onload = function(){

       func1();
       func2();
       func3();
       //更多加载事件………………

}

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

document.addEventListener(‘DOMContentLoaded‘, function(){
   alert("DOM树建成了！")
 }, false);

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

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

var loadEvent = function(fn) {
    var oldonload = window.onload;
    if (typeof window.onload != ‘function‘) {
        window.onload = fn;
    }else {
        window.onload = function() {
            oldonload();
            fn();
        }
    }
}
//*******************用法*******************
loadEvent(handler1);
loadEvent(handler2);
loadEvent(handler3);

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

window.DOMLoadEvents = [];
 
var addDOMLoadEvent = function(handler) {
    window.DOMLoadEvents[window.DOMLoadEvents.length]=handler
}
 
addDOMLoadEvent(handler);
addDOMLoadEvent(handler);
addDOMLoadEvent(handler);
//更多加载事件

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

var fireContentLoadedEvent = function() {
    if (arguments.callee.loaded) return;
    //让此函数仅仅执行一次
    arguments.callee.loaded = true;
    var handlers = window.DOMLoadEvents,length = handlers.length;
    for (var i=0; i<length; i++) {
        var func = handlers[i];
        func();//执行要在domReady运行的代码
    }
}

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

参数 描述
scrollbarDown Default. Down scroll arrow is at the specified location
scrollbarHThumb Horizontal scroll thumb or box is at the specified location
scrollbarLeft Left scroll arrow is at the specified location
scrollbarPageDown Page-down scroll bar shaft is at the specified location
scrollbarPageLeft Page-left scroll bar shaft is at the specified location
scrollbarPageRight Page-right scroll bar shaft is at the specified location
scrollbarPageUp Page-up scroll bar shaft is at the specified location
scrollbarRight Right scroll arrow is at the specified location
scrollbarUp Up scroll arrow is at the specified location
scrollbarVThumb Vertical scroll thumb or box is at the specified location
down Composite reference to scrollbarDown
left Composite reference to scrollbarLeft
pageDown Composite reference to scrollbarPageDown.
pageLeft Composite reference to scrollbarPageLeft.
pageRight Composite reference to scrollbarPageRight.
pageUp Composite reference to scrollbarPageUp.
right Composite reference to scrollbarRight.
up Composite reference to scrollbarUp.
var  pollDoScroll = function() {
    try {
        document.documentElement.doScroll(‘left‘);
    }catch(e) {
        setTimeout(arguments.callee, 10);
        return;
    }
    fireContentLoadedEvent();
}

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

if (document.addEventListener) {
    document.addEventListener(‘DOMContentLoaded‘, fireContentLoadedEvent, false);
} else {
    pollDoScroll();
}

完整的代码如下：

window.DOMLoadEvents = [];
var addDOMLoadEvent = function(handler) {
    window.DOMLoadEvents[window.DOMLoadEvents.length]=handler
}
var fireContentLoadedEvent = function() {
    if (arguments.callee.loaded) return;
    //让此函数仅仅执行一次
    arguments.callee.loaded = true;
    var handlers = window.DOMLoadEvents,length = handlers.length;
    for (var i=0; i<length; i++) {
        var func = handlers[i];
        func();//执行要在domReady运行的代码
    }
}
var pollDoScroll = function() {
    try {
        document.documentElement.doScroll(‘left‘);
    }catch(e) {
        setTimeout(arguments.callee, 10);
        return;
    }
    fireContentLoadedEvent();
}
if (document.addEventListener) {
    document.addEventListener(‘DOMContentLoaded‘, fireContentLoadedEvent, false);
} else {
    pollDoScroll();

}

时间： 2024-10-30 16:03:19

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

Javascript在页面加载时的执行顺序【转】

一.在HTML中嵌入Javasript的方法 直接在Javascript代码放在标记对<script>和</script>之间 由<script />标记的src属性制定外部的js文件 放在事件处理程序中,比如:<p onclick="alert('我是由onclick事件执行的Javascript')">点击我</p> 作为URL的主体,这个URL使用特殊的Javascript:协议,比如:<a href="

一步一步实现listview加载的性能优化

listview加载的核心是其adapter,本文针对listview加载的性能优化就是对adpter的优化,总共分四个层次: 0.最原始的加载 1.利用convertView 2.利用ViewHolder 3.实现局部刷新 [转载请保留本文地址:http://www.cnblogs.com/goagent/p/5158064.html]  〇.最原始的加载 这里是不经任何优化的adapter,为了看起来方便,把listview的数据直接在构造函数里传给adapter了,代码如下: 1 priv

提升页面加载速度的优化方法

1.CSS精灵图片技术 将一个页面涉及的所有零星图片都包含到一张大的图片中,然后利用CSS技术展现出来,可以减少http请求,减少整个网页的图片大小,提高页面性能. 2.合并js文件和css文件 减少GET请求次数,提高加载速度. 3.延迟可见区域外的内容 4.压缩文本和图片 如gzip压缩技术,可以减少页面加载时间 5.确保功能图片优先加载 6.图片格式优化 如png格式 7.使用高级JPEG格式图片 8.精简代码 9.使用AJAX 在不加载整个页面的情况下对网页的某部分进行更新,即实现异步更

webdriver定位页面元素时使用set_page_load_time()和JavaScript停止页面加载

原文:https://my.oschina.net/u/2344787/blog/400507?p={{page}} 引言: 在使用webdriver的get方法打开页面时,可能页面需要加载的元素较多导致加载时间很长,而时间过长会导致后面的操作无法进行,甚至直接报错:所以在页面加载到一定时间,实际需要定位的元素很大可能上已经加载出来时,需要停止页面的加载,进而进行下面的操作: 例如:get 汽车之家页面时会等待很长时间,其实页面基本元素都已加载,可进行后续操作 可以通过set_page_load

javascript 实现页面加载完再显示页面

document.onreadystatechange = function () { if (document.readyState == "complete") { document.body.style.display = "block"; } else { document.body.style.display = "none"; }; }; document.onreadystatechange  是用来监听页面加载过程中的状态! re

JavaScript Html页面加载完成三种写法

//一.Html页面加载完成的JS写法 //1. $(function () {     alert("窗体Html页面加载完成方法一"); }); //2. $(document).ready(function () { alert("Html页面加载完成方法二"); }); //3. window.onload = function () {     alert("Html页面加载完成方法三");     }; 原文地址:https://ww

JavaScript 之 页面加载事件

一.onload 加载事件 onload 是 window 对象的一个事件,也可以省略 window 直接使用. 常用方式: <head><script> windown.onload = function() { // 方法体 } </script><head>  这个事件是等待页面加载完成之后,再执行 <script> 标签的内容.即页面上所有的元素创建完毕,并且引用的外部资源下载完毕(js,css,图片)  注意:该事件相比于在 <b

Javascript实现页面加载完成后自动刷新一遍清除缓存文件

我们有些时候在加载页面时,会出现缓存文件对当前文件的表现效果有干扰,如有些缓存的样式文件会是页面效果发生改变,这时我们希望页面在加载时能自动刷新一遍清楚缓存文件. 但是由于跳转页面肯定会用到BOM部分的window对象的内容来改变当前window,自动改变window几乎不太可能控制window的加载次数,因为每次新window产生一切变量及对象内容都会清掉.这时候可以考虑是否可以通过获取页面跳转加载时原页面传来的信息不同而做判断来控制window是继续跳转还是停止跳转.这时,就可以用到wind

页面加载中的图片性能优化【转】

我的大部分性能优化工作都集中在JavaScript和CSS上,从早期的Move Scripts to the Bottom和Put Stylesheets at the Top规则.为了强调这些规则的重要性,我甚至说过,“JS和CSS是页面上最重要的部分”. 几个月后,我意识到这是错误的.图片才是页面上最重要的部分. 我关注JS和CSS的重点也是如何能够更快地下载图片.图片是用户可以直观看到的.他们并不会关注JS和CSS.确实,JS和CSS会影响图片内容 的展示,尤其是会影响图片的展示方式(比如