Web UI - Javascript之DOM Ready

最近终于稍微适应了工作环境,终于可以让自己缓口气。于是决定要写点东西,算是督促、记录和提升自己的学习。代码的世界,你不轮它,以后就会被它轮。这个系列尽量保持在一周或两周更一篇,目标是在创造内容的时候更深刻的理解和提升自己所学的知识, 本质上,接触Javascript编程之美,我转到前端工作,其实就是因为非常喜欢和好奇Javascript(当然,也是享受频繁的用代码和用户交互的感觉)

什么是DOM Ready

还记得刚学习Javascript的时候,老师就一直各种强调教导告诉你说js的代码一定要写到window.onload里面,如下代码:
Web UI - Javascript之DOM Ready
1 window.onload=function()
2 {
3     //registered in onload
4     document.getElementById(‘demo‘).innerHTML=‘hello world‘;
5 }
window.onload
  包括各种古老的书籍中都告诉你说为了保证js能够正确运行(因为js大部分都是频繁的操作DOM),应该把代码写在onload中,而window.onload表示着web页面中所有的元素都已经加载完毕,保证了所有的DOM元素都是可用的。然而,DOM元素是丰富多彩的, 例如:img。当然一个img请求一张图片,而这张图片很大、路径错误等原因会造成请求一直下不来,如果你的页面上有这样一张图片,那么window.onload将会一直等待这张图片的加载,直到图片请求已经下来了或确认图片请求异常。这是一个可怕的过程,如果一张 图片请求了10s,那么你的用户在电脑面前面对着浏览器那个正在加载的圆圈的时候,很有可能关掉你的页面。

  这是一个很简单的case:onload太慢了。小伙鸡如果你现在竟然还在用着window.onload那就真的图样图森破了。

DOMContentLoaded

  感觉到onload太慢了,firefox为DOM纳入了一个全新的事件,叫做DOMContentLoaded,这也就是我们后来所说的DOM Ready。DOM Ready和onload不同之处在于:onload等待页面所有元素加载完毕才会执行,而DOM Ready,则 是在DOM树构建完毕即执行。这一过程可以这么形容:onload的时候页面已经呈现,而DOM Ready完毕的时候甚至用户都还没有看见页面。我们可以更快的处理一些事情,而不是等到onload之后。 而这一事件,逐渐的被广大浏览器纳入,除了那些古老的IE浏览器。

现在的前端js框架类库,例如jQuery、Zepto、YUI、mass没有个DOM Ready都不好意思称自己为库、框架。刚开始学习jQuery的时候,就对这个DOM Ready非常的感兴趣,当时因为自己的境界还停留在学习jQuery的时候,所以只能远远观望。当驾驭了jQuery的时候,我们就应该透过现象看本质——一窥jQuery源码,探索里面的秘密。

  其实DOM Ready,实现上非常简单,就是注册个DOM Ready的事件,但是低版本的IE(IE678)要么没有DOMContentLoaded事件,要么就是DOMContentLoaded的实现上有bug。

  所以,我们自己动手来实现DOM Ready吧。

首先,w3c的实现,用w3c规范注册DOMContentLoaded事件,同时针对IE8 hack,一个简单的DOM Ready示例如下:
Web UI - Javascript之DOM Ready
 1     //将一个函数注册到DOM Ready
 2     function $(fn) {
 3         if (document.addEventListener)//w3c browser
 4             document.addEventListener("DOMContentLoaded", fn, false);
 5         else if (document.attachEvent)//ie8+ browser
 6             document.attachEvent("onreadystatechange", fn);
 7     }
 8  
 9  
10     //注册一个DOM Ready事件,是不是和jQuery很像?
11     $(function () {
12         console.log(‘hello world!‘);
13     });
DOMContentLoaded

 

我们不能忘记万恶的IE

  不要忘记,在你编写了一段在现代浏览器中运行起来各种没问题so beautiful,正觉得自己碉堡了的时候,你打开了IE,然后眼睁睁的看着它对你的精神各种侮辱xxoo的那种感觉吧。没错,万恶的IE

  上面的代码中,我们针对IE进行readystatechange进行绑定,IE为DOM的一部分提供readystatechange事件。然而,IE678,在页面中有iframe的情况下,DOM Ready的加载就会被影响,没错,它在等待iframe加载完毕才会执行readystatechange事件。

为此,我做了一番模拟,如下HTML:

Web UI - Javascript之DOM Ready
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>IE下readystatechange事件测试 - linkFly</title>
 6     <script type="text/javascript">
 7 
 8         //开始记录时间
 9         var date = new Date();
10         +function () {
11             //注册readystatechange函数
12             document.attachEvent("onreadystatechange", function () {
13                 //跟踪这个函数执行的时间
14                 document.getElementById(demo).innerHTML = Math.floor((new Date()).getTime() - date.getTime()) / 1000;
15             });
16         }();
17     </script>
18 </head>
19 <body>
20     <div id="demo"></div>
21     <!--这里显示readystatechange时间差-->
22     <iframe src="https://github.com/" height="20" width="800"></iframe>
23     <div id="end"></div>
24     <!--这里是DOM Ready时间差-->
25 </body>
26 <script type="text/javascript">
27     //js写在这个位置,DOM可以说已经构建完毕,跟踪执行时间
28     document.getElementById(end).innerHTML = Math.floor((new Date()).getTime() - date.getTime()) / 1000;
29 </script>
30 </html>
readystatechange

 

  然后,就发生了一些有意思的事情,如下图:

Web UI - Javascript之DOM Ready

  iframe里面特意链到Github,所以访问起来很慢(天朝,你懂的...)。可以看见,下面的DOM Ready的代码执行的很快,但是上面的readystatechange,ie8下我们忍了,但是这ie6、7是个神马情况???12s后才执行,简直就是坑爹夫斯基啊!!!!!这玩意儿尼玛不靠谱啊。

  我用写好的DOM Ready进行测试,效果如下:

Web UI - Javascript之DOM Ready

  这速度,这效果,so beautiful啊...

  总结起来就是,有iframe的页面,readystatechange并不靠谱,那么我们需要单独处理一下这个情况,针对这一情况,最著名的莫过于Diego Perini发现的hack:

Web UI - Javascript之DOM Ready
 1 +function(fn)//ie678检测iframe的DOMReady
 2 {
 3     try {
 4         //IE下页面DOM没有加载完成,调用doScroll会报错
 5         document.documentElement.doScroll("left");
 6         //没有报错,证明DOM已经加载完毕,执行DOM Ready里需要执行事件
 7         fn();
 8     } catch (e) {
 9         //重复调用自己
10         setTimeout(arguments.callee, 1);
11     }
12 }(function(){
13     document.getElementById(‘demo‘).innerHTML=‘hello world!‘;
14 });
ie678hack

  好的,现在我们也已经知道了怎么解决IE下的问题,那么现在,我们就应该把这两段代码合并,封装一个DOMReady库,下次使用我们直接就可以用了。没错,DOM Ready其实就这点东西,是不是so easy啊。那么我们准备封装类库吧。

  让我们想想,jQuery的DOM Ready是不是可以多个事件绑定到DOM Ready?那么我们也来实现这样的效果,检测DOM Ready,然后执行事件集合,在Js,就用数组来实现。

  其实代码上很大一部分参照了jQuery源码,但是jQuery解耦解的实在丧心病狂,所以一个DOM Ready跳转了不下30多个方法,当然,侦听DOM Ready的代码并不是很繁琐,jQuery主要在DOM Ready的将要执行的事件上进行了良好的解耦和封装。 好了话不多说,上源码:

源码

  Javascript源码:  

Web UI - Javascript之DOM Ready
 1 /*!
 2 * by - linkfly
 3 * cnblogs - http://www.cnblogs.com/silin6/ 
 4 */
 5 (function (window, undefined) {
 6     /*
 7     *                                   checkReady
 8     * event model:ready ->> bindReady ->> 
 9     *                                   ie(iframe):doScrollCheck ->> checkReady
10     */
11     var readyList = [],                     //DOM Ready执行的数组
12         document = window.document,
13         DOMContentLoaded,                   //DOMReady事件
14         isReady = false,                    //DOM是否准备完毕
15         triggerReady = function () {        //触发ready事件
16             while (readyList.length) {
17                 readyList[0].call(window); //指定上下文
18                 readyList.shift();
19             }
20         };
21     //ready执行方法,检测需要的环境是否已经准备好,它是DOM Ready最后一道关卡
22     var checkReady = function () {
23         if (!document.body) { return setTimeout(checkReady, 1); }
24         isReady = true; //标识完成
25         triggerReady();
26     },
27     //本来还想使用一个wait数组表示当前正在等待执行的数据,但是因为下面用的addEventListener和attachEvent,所以直接让js Event维护即可
28      bindReady = function () {         //绑定ready
29          //body必须存在
30          //如果DOM Ready,则直接触发,Firefox3.6之前并没有readyState,考虑市场因素抛弃这部分兼容
31          if (document.readyState === ‘complete‘ || isReady) { return setTimeout(triggerReady, 1); }
32          if (document.addEventListener) {//w3c
33              document.addEventListener("DOMContentLoaded", DOMContentLoaded, false);
34              //如果没有赶上DOM Ready,则监听load
35              window.addEventListener("load", checkReady, false);
36          } else if (document.attachEvent) {//ie
37              document.attachEvent("onreadystatechange", DOMContentLoaded);
38              window.attachEvent("onload", checkReady);
39              //ie下多iframe
40              var toplevel = false;
41              try {
42                  toplevel = window.frameElement == null;
43              } catch (e) { }
44              if (document.documentElement.doScroll && toplevel) {
45                  doScrollCheck();
46              }
47          }
48      },
49     doScrollCheck = function () {                  //ie678检测iframe的DOMReady
50         try {
51             //IE下页面DOM没有加载完成,调用doScroll会报错
52             document.documentElement.doScroll("left");
53             checkReady();
54         } catch (e) {
55             setTimeout(doScrollCheck, 1);
56         }
57     },
58     ready = function (fn) {                 //DOM Ready
59         //判定fn有效性代码略过...
60         readyList.push(fn);
61         bindReady();
62     };
63     ~function () {
64         if (document.addEventListener) {
65             DOMContentLoaded = function () {
66                 document.removeEventListener("DOMContentLoaded", DOMContentLoaded, false);
67                 checkReady();
68             };
69         } else if (document.attachEvent) {
70             DOMContentLoaded = function () {
71                 if (document.readyState === "complete") {
72                     document.detachEvent("onreadystatechange", DOMContentLoaded);
73                     checkReady();
74                 }
75             };
76         }
77     }();
78     window.$ = window.ready = ready;
79 })(window);
DOM Ready

 

  HTML源码:
Web UI - Javascript之DOM Ready
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>测试DOM Ready - linkFly</title>
 5     <!--<script src="jQuery/jquery-1.7.2.js" type="text/javascript"></script>-->
 6     <script src="DOMReady.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         //http://localhost:2969/test.html
 9         $(function () {
10             document.getElementById(test).innerHTML += <p>顶部:完毕</p>;
11             alert(window.frames[0].document.firstChild.innerHTML);
12         });
13     </script>
14     <style type="text/css">
15         img { height: 20px; width: 20px; }
16     </style>
17 </head>
18 <body>
19     <div id="test">
20     </div>
21     <div id="test2">
22     </div>
23     <div id="test3">
24     </div>
25     <img src="http://c.s-microsoft.com/en-us/CMSImages/MS_FavMoments_End_1600x540_EN_US.jpg?version=10582f1d-db23-3040-9cf3-3ec93ece226d&h=0"
26         alt="" />
27     <img src="http://c.s-microsoft.com/en-us/CMSImages/MS_FavMoments_End_1600x540_EN_US.jpg?version=10582f1d-db23-3040-9cf3-3ec93ece226d&h=1"
28         alt="" />
29     <img src="http://c.s-microsoft.com/en-us/CMSImages/MS_FavMoments_End_1600x540_EN_US.jpg?version=10582f1d-db23-3040-9cf3-3ec93ece226d&h=2"
30         alt="" />
31     <img src="http://c.s-microsoft.com/en-us/CMSImages/MS_FavMoments_End_1600x540_EN_US.jpg?version=10582f1d-db23-3040-9cf3-3ec93ece226d&h=3"
32         alt="" />
33     <img src="http://c.s-microsoft.com/en-us/CMSImages/MS_FavMoments_End_1600x540_EN_US.jpg?version=10582f1d-db23-3040-9cf3-3ec93ece226d&h=4"
34         alt="" />
35     <img src="http://c.s-microsoft.com/en-us/CMSImages/MS_FavMoments_End_1600x540_EN_US.jpg?version=10582f1d-db23-3040-9cf3-3ec93ece226d&h=5"
36         alt="" />
37     <img src="http://c.s-microsoft.com/en-us/CMSImages/MS_FavMoments_End_1600x540_EN_US.jpg?version=10582f1d-db23-3040-9cf3-3ec93ece226d&h=6"
38         alt="" />
39     <img src="http://c.s-microsoft.com/en-us/CMSImages/MS_FavMoments_End_1600x540_EN_US.jpg?version=10582f1d-db23-3040-9cf3-3ec93ece226d&h=7"
40         alt="" />
41     <img src="http://c.s-microsoft.com/en-us/CMSImages/MS_FavMoments_End_1600x540_EN_US.jpg?version=10582f1d-db23-3040-9cf3-3ec93ece226d&h=8"
42         alt="" />
43     <img src="http://c.s-microsoft.com/en-us/CMSImages/MS_FavMoments_End_1600x540_EN_US.jpg?version=10582f1d-db23-3040-9cf3-3ec93ece226d&h=9"
44         alt="" />
45     <iframe src="https://github.com/" height="200" width="800"></iframe>
46     <!--测试iframe跨域-->
47 </body>
48 <script type="text/javascript">
49     $(function () {
50         document.getElementById(test2).innerHTML += <p>底部:完毕</p>;
51     });
52 </script>
53 </html>
HTML Demo

  到了这里,是不是有点觉得onload就应该被舍弃呢?其实不然,onload也不是一无是处,例如chrome不同的图片渲染引擎,造成了无法在DOM中处理图片,当然这也是合理的,DOM树中或许图片都还没有下载呢,遇见过这样的情况,只能在onload中对图片进行处理。  

源码下载地址

 
作者:linkFly
声明:嘿!你都拷走上面那么一大段了,我觉得你应该也不介意顺便拷走这一小段,希望你能够在每一次的引用中都保留这一段声明,尊重作者的辛勤劳动成果,本文与博客园共享。

Web UI - Javascript之DOM Ready,布布扣,bubuko.com

Web UI - Javascript之DOM Ready

上一篇:python3 网址路径中带中文的处理办法


下一篇:Python性能分析指南(未完成)