首页

面试题:window.onload和DOMContentLoaded的区别

kkcode
2023-08-22  阅读 154

考点:页面渲染过程

一、何时触发这两个事件?

1、当 onload 事件触发时,页面上所有的 DOM,样式表,脚本,图片,flash 都已经加载完成了。

2、当 DOMContentLoaded 事件触发时,仅当 DOM 加载完成,不包括样式表,图片,flash。

二、为什么要区分?

开发中我们经常需要给一些元素的事件绑定处理函数。但问题是,如果那个元素还没有加载到页面上,但是绑定事件已经执行完了,是没有效果的。这两个事件大致就是用来避免这样一种情况,将绑定的函数放在这两个事件的回调中,保证能在页面的某些元素加载完毕之后再绑定事件的函数。

当然 DOMContentLoaded 机制更加合理,因为我们可以容忍图片,flash 延迟加载,却不可以容忍看见内容后页面不可交互。

这里又要牵扯到页面加载渲染的原理了:

1、加载样式表会阻塞外链脚本的执行

一些 Gecko 和 Webkit 引擎版本的浏览器,包括 IE8 在内,会同时发起多个 Http 请求来并行下在样式表和脚本。但脚本不会被执行,直到样式被加载完成。在未加载完之前甚至页面也不会被渲染。但是在 opera 中样式的加载不会阻塞脚本的执行。

因此:目前通用的作法是把脚本和样式都以外链形式引入,甚至在 jquery 的官方文档中也是这样推荐的。对于大部分脚本来说,这样的脚本等待外链的机制还是有意义的,比如一些 DOM 和样式操作需要读取元素的位置,颜色等。这就需要样式先于脚本加载

检验方法:尝试强制使服务器端使 style 延迟一段时间才加载(甚至 10 秒),测试的结果是,在某些版本的 Firefox,Chrome 中最后一段脚本仍然是可以读出 style 的属性值(因为 style 始终先于 javascript 加载),比如 #FF0000 或者 rgb(255, 0, 0),而这验证了我上面的说法。而在 opera 中却无法读出 style 的属性。代码如下:

html 文件内容

<!DOCTYPE html>
<head>
    <linkrel="stylesheet"href="stylesheet.css">
    <scriptsrc="script.js"></script>
</head>
<body>
    <divid="element">The element</div><
/body>
</html>


stylesheet.css 文件内容
#element { color: red; }


script.js文件内容
document.addEventListener('DOMContentLoaded',function(){
     alert(getComputedStyle(document.getElementById('element'),null).color);},
false);复制代码

2、各大 javascript 框架如何实现 domReady 事件的

早期版本的浏览器是没有 DOMContentLoaded 事件的那么它们怎么模拟实现类似功能呢?先来说说原理

(1)、如果是 webkit 引擎则轮询 document 的 readyState 属性,当值为 loaded 或者 complete 时则触发 DOMContentLoaded 事件,对 webkit525 之后版本直接可以注册 DOMContentLoaded 事件

if(Browser.Engine.webkit){  
    timer = window.setInterval(function(){
  if(/loaded|complete/.test(document.readyState))  
      fireContentLoadedEvent();
  },0);
}复制代码

(2)、IE 处理方式有多种

a、在页面临时插入一个 script 元素,并设置 defer 属性,最后把该脚本加载完成视作 DOMContentLoaded 事件来触发。这样做有一个问题是,如果插入脚本的页面包含 iframe 的话,会等到 iframe 加载完才触发,其实这与 onload 是无异的。即这个方法不准确。

b、通过 setTiemout 来不断的调用 documentElement 的 doScroll 方法,直到调用成功则出触发 DOMContentLoaded。这样做的原理是在 IE 下,DOM 的某些方法只有在 DOM 解析完成后才可以调用,doScroll 就是这样一个方法,反过来当能调用 doScroll 的时候即是 DOM 解析完成之时,与 prototype 中的 document.write 相比,该方案可以解决页面有 iframe 时失效的问题

c、首先注册 document 的 onreadystatechange 事件,但经测试后该方法与 window.onload 相当,效果不大。下面是 jquery 做的兼容性处理代码。

document.attachEvent("onreadystatechange",
  function(){
    if( document.readyState ==="complete"){  
          document.detachEvent("onreadystatechange", arguments.callee );  
        jQuery.ready();}
});复制代码

接下来具体看一看几大前端框架是如何综合运用这几个方法的。

jQuery.ready.promise = function( obj ) {//定义一个状态机
    if ( !readyList ) {//保证页面只创建一个延迟对象,多次使用$.ready() 则直接使用延迟对象done方法加入回调队列

        readyList = jQuery.Deferred();//异步延迟对象
        // readyRE = /complete|loaded|interactive/,
        // Catch cases where $(document).ready() is called after the browser event has already occurred.
        // we once tried to use readyState "interactive" here, but it caused issues like the one
        // discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
        if ( document.readyState === "complete" ) {//
          这个属性是只读的,传回值有以下的可能:

          //0-UNINITIALIZED:XML 对象被产生,但没有任何文件被加载。 
          //1-LOADING:加载程序进行中,但文件尚未开始解析。 
          //2-LOADED:部分的文件已经加载且进行解析,但对象模型尚未生效。 
          //3-INTERACTIVE:仅对已加载的部分文件有效,在此情况下,对象模型是有效但只读的。 
          //4-COMPLETED:文件已完全加载,代表加载成功

// Handle it asynchronously to allow scripts the opportunity to delay ready
            setTimeout( jQuery.ready );

        // Standards-based browsers support DOMContentLoaded
        } else if ( document.addEventListener ) {//符合W3C标准的浏览器
            // Use the handy event callback
            document.addEventListener( "DOMContentLoaded", completed, false );

            // A fallback to window.onload, that will always work
            window.addEventListener( "load", completed, false );//还是给load事件注册了事件,以防不测,做为回滚用

        // If IE event model is used
        } else {
            // Ensure firing before onload, maybe late but safe also for iframes
            document.attachEvent( "onreadystatechange", completed );

            // A fallback to window.onload, that will always work
            window.attachEvent( "onload", completed );

            // If IE and not a frame
            // continually check to see if the document is ready
            var top = false;

            try {//判断是否为iframe,如果不是的话采用不断的轮询scorll的方法
                top = window.frameElement == null && document.documentElement;
            } catch(e) {}

            if ( top && top.doScroll ) {
                (function doScrollCheck() {
                    if ( !jQuery.isReady ) {

                        try {
                            // Use the trick by Diego Perini
                            // http://javascript.nwbox.com/IEContentLoaded/
                            top.doScroll("left");
                        } catch(e) {
                            return setTimeout( doScrollCheck, 50 );
                        }

                        // detach all dom ready events
                        detach();

                        // and execute any waiting functions
                        jQuery.ready();//实际:readyList.resolveWith( document, [ jQuery ] );
                    }
                })();
            }
        }
    }
    return readyList.promise( obj );
};复制代码

再贴上几段其他框架的代码,大同小异,就不具体分析了

prototype

(function(GLOBAL) {
  /* Support for the DOMContentLoaded event is based on work by Dan Webb,
     Matthias Miller, Dean Edwards, John Resig, and Diego Perini. */

  var TIMER;

  function fireContentLoadedEvent() {
    if (document.loaded) return;
    if (TIMER) window.clearTimeout(TIMER);
    document.loaded = true;
    document.fire('dom:loaded');
  }

  function checkReadyState() {
    if (document.readyState === 'complete') {
      document.detachEvent('onreadystatechange', checkReadyState);
      fireContentLoadedEvent();
    }
  }

  function pollDoScroll() {
    try {
      document.documentElement.doScroll('left');
    } catch (e) {
      TIMER = pollDoScroll.defer();
      return;
    }

    fireContentLoadedEvent();
  }


  if (document.readyState === 'complete') {
    // We must have been loaded asynchronously, because the DOMContentLoaded
    // event has already fired. We can just fire `dom:loaded` and be done
    // with it.
    fireContentLoadedEvent();
    return;
  }

  if (document.addEventListener) {
    // All browsers that support DOM L2 Events support DOMContentLoaded,
    // including IE 9.
    document.addEventListener('DOMContentLoaded', fireContentLoadedEvent, false);
  } else {
    document.attachEvent('onreadystatechange', checkReadyState);
    if (window == top) TIMER = pollDoScroll.defer();
  }

  // Worst-case fallback.
  Event.observe(window, 'load', fireContentLoadedEvent);
})(this);复制代码

mootools

(function(GLOBAL) {
  /* Support for the DOMContentLoaded event is based on work by Dan Webb,
     Matthias Miller, Dean Edwards, John Resig, and Diego Perini. */

  var TIMER;

  function fireContentLoadedEvent() {
    if (document.loaded) return;
    if (TIMER) window.clearTimeout(TIMER);
    document.loaded = true;
    document.fire('dom:loaded');
  }

  function checkReadyState() {
    if (document.readyState === 'complete') {
      document.detachEvent('onreadystatechange', checkReadyState);
      fireContentLoadedEvent();
    }
  }

  function pollDoScroll() {
    try {
      document.documentElement.doScroll('left');
    } catch (e) {
      TIMER = pollDoScroll.defer();
      return;
    }

    fireContentLoadedEvent();
  }


  if (document.readyState === 'complete') {
    // We must have been loaded asynchronously, because the DOMContentLoaded
    // event has already fired. We can just fire `dom:loaded` and be done
    // with it.
    fireContentLoadedEvent();
    return;
  }

  if (document.addEventListener) {
    // All browsers that support DOM L2 Events support DOMContentLoaded,
    // including IE 9.
    document.addEventListener('DOMContentLoaded', fireContentLoadedEvent, false);
  } else {
    document.attachEvent('onreadystatechange', checkReadyState);
    if (window == top) TIMER = pollDoScroll.defer();
  }

  // Worst-case fallback.
  Event.observe(window, 'load', fireContentLoadedEvent);
})(this);复制代码

纸上学来终觉浅,绝知此事要躬行。自己写一段。

(function(window,undefined){
    hobo = {}
    var readyList = [],
    _isReady =false;

    function readyFn(){
        console.log(event.type)
        if ( document.addEventListener || event.type === "load" || document.readyState === "complete" ) {
            detach();

             _isReady =true;

            fireReady();
        

         }
    }
    
  function fireReady(){
      for (var i = 0,fn; fn = readyList[i++];) {
                fn();
          };
      readyList = null;
      fireReady = function(){}//惰性函数,防止IE9二次调用
  }


    function detach() {
        if ( document.addEventListener ) {

            document.removeEventListener( "DOMContentLoaded", readyFn, false );
            window.removeEventListener( "load", readyFn, false );

        } else {
            document.detachEvent( "onreadystatechange", readyFn );
            window.detachEvent( "onload", readyFn );
        }
    }


    hobo.ready = function(fn){
         if(readyList){
            readyList.push(fn)
         }

         if(readyList.length>1){
            return;
         }   

         if(document.readyState === 'complete'){
            setTimeout(readyFn);
         }else if (document.addEventListener) {//符合W3C 则监听 DOMContentLoaded和load事件
                 console.log('addEventListener')
                document.addEventListener('DOMContentLoaded',readyFn,false);
                document.addEventListener('DOMContentLoaded',readyFn,false);
         }else{//针对IE
                console.log('attachEvent')
            document.attachEvent('onreadystatechange',readyFn);

            document.attachEvent('onload',readyFn);
         }

            //针对IE并且非frame
            var top = false;
            try{
                top = window.frameElement===null&&document.documentElement
            }catch(e){}

            if(top&&top.doScroll){
                (function doScrollCheck(){
                    if (!_isReady) {
                         try {//每隔50秒轮询 检测是否支持doScroll()方法
                            top.doScroll("left");
                        } catch(e) {
                            return setTimeout( doScrollCheck, 50 );
                        }
                    };
                })
            }

    }
    window.hobo =hobo
}(window,void 0))


//使用

hobo.ready(function(){
    console.log(11111);
})
hobo.ready(function(){
    console.log(22222);
})复制代码

原文地址 https://www.cnblogs.com/yud123/p/7597025.html

本文为作者原创文章,转载无需和我联系,但请注明转载链接。 【前端黑猫】