页面加载

页面初始化加载

曾经常用的两种写法

window.onload = function(){
    $(".gravatar").on('click',function(){
        //...
    });
    //以及其他操作DOM的节点
}

第二种方法

$(document).ready(function(){
    //操作DOM相关
    //...
})

页面加载就是从你输入网址+enter开始，发生的一些列过程，最终到页面显示。从微观上分的话，页面加载有两部分
一个是以DOMContentLoaded触发为标志的DOM树的渲染完成
一个是以辅助资源img,font加载完成为触发标志的onload事件
他们两个的具体区别就是”资源的加载”这个关键点。

在获得数据响应后,页面开始解析,发生的过程为:

解析HTML结构。
加载外部脚本和样式表文件。
解析并执行脚本代码。
构造HTML DOM模型。//ready执行
加载图片等外部文件。
页面加载完毕。//onload执行

这只是，页面加载很浅的一块，前端能在页面加载上做的工作其实超级多。要知道，从你输入网站 + enter键后，发生的过程为:

重定向=>检查DNS缓存=> DNS解析 => TCP连接 => 发请求 => 得到响应=> 浏览器处理 => 最后onload

宏观页面加载

如果我们想深入了解宏观页面加载，需要掌握ECMA5新给出的一个API。 performance . 是不是感觉很熟悉呢？

performance简单讲解

以前，我们来检查浏览器的时候，大部分情况下是使用

console.time(specialNum);
console.timeEnd(specialNum);

或者

new Date().getTime();
//或者
Date.now();

上面说的两种方法，获取的精度都是毫秒级(10^-6) ，对于一些非常精确的测试，他们的作用来还是蛮有限的，而且获取数据的方式，也比较complicated.

ES5提出的performance可以获取到，微秒级别(10^-9) 。而且，能够得到后台事件的更多时间数据。

他的兼容性是IE9+ 。觉得已经足够了。

performance.timing对象

通常，我们可以从performance.timing对象上，获得我们想要的一切时间值
alt
比如，我们获得重定向时间用:

var time = performance.timing;
var redirect = time.redirectEnd - time.redirectStart; //单位为微秒

即DOMContentLoaded事件是在domContentLoaded那段触发的。图中所指的domContentLoaded其实分为两块, 一个是domContentLoadedEventStart和domContentLoadedEventEnd. 详见下述说明:(from 赖小赖小赖)

performance.now()

通常，我们会将该方法和Date.now()进行一个对比。

performance.now(); //输出是微秒级别
Date.now(); //输出是毫秒级别
其中Date.now()是输出从1970年开始的毫秒数.
performance.now()参考的是从.performance.timing.navigationStart(页面开始加载)的时间, 到现在的微秒数.
这里，我们可以使用performance.now()来模拟获取DomContentLoaded的时间。

var timesnipe = performance.now();
        document.addEventListener('DOMContentLoaded', function() {
            console.log(performance.now() - timesnipe);
        }, false);
        window.addEventListener('load', function() {
           console.log(performance.now() - timesnipe);
        }, false);
//但是这样并不等同于,只能算作约等于
performance.timing.domContentLoadedEventStart - performance.timing.domLoading; //检测domLoadEvent触发时间

上面不相等的原因就在于，当执行script的时候，DOM其实已经开始解析DOM和页面内容，所以会造成时间上比真实时间略短。另外performance还有其他几个API,比如makr,getEntries. 不过，这里因为和页面显示的关系不是很大，这里就不做过多的讲解了。有兴趣，可以参考:赖小赖小赖
接下来，我们一步一步来看一下，页面加载的整个过程.

redirect

这是页面加载的第一步(也有可能没有). 比如，当一个页面已经迁移，但是你输入原来的网站地址的时候就会发生。
或者，比如example.com -> m.example.com/home 。这样耗费的时间成本是双倍的。这里就会经过两次DNS解析，TCP连接，以及请求的发送。所以，在后台设置好正确的网址是很重要的。
如图:
alt
这里，我们可以使用.performance的属性,计算出重定向时间

redirectTime = redirectEnd - redirectStart

cache,DNS,TCP,Request,Response

如果我们的域名输入正确的话，接着，浏览器会查询本地是否有域名缓存(appCache)，如果有，则不需要进行DNS解析，否则需要对域名进行解析，找到真实的IP地址，然后建立3次握手连接，发送请求，最后接受数据。通常，这一部分，可以做的优化有:
发送请求的优化:加异地机房，加CDN.(加快解析request)
请求加载数据的优化:页面内容经过 gzip 压缩，静态资源 css/js 等压缩(request到response的优化)
ok~ 使用performance测试时间为:

// DNS 缓存时间
    times.appcache = t.domainLookupStart - t.fetchStart;
// TCP 建立连接完成握手的时间
    times.connect = t.connectEnd - t.connectStart;
//DNS 查询时间
    times.lookupDomain = t.domainLookupEnd - t.domainLookupStart;
//整个解析时间
var lookup = t.responseEnd - t.fetchStart;

其实，只要对照那个图查查over，不用太关注上面的式子。使用时需要注意，performance的相关操作，最好放在onload的回调中执行，避免出现异常的bug.

jquery ready事件浅析

jquery主要做的工作就是兼容IE6,7,8实现DOMContentLoaded的效果.由于现在主流只要兼容到IE8, 剩下IE6,7我们不做过多的分析了。
目前流行的做法有两种，一种是使用readystatechange实现，另外一种使用IE自带的doScroll方法实现.

readyStateChange

这其实是IE6，7，8的特有属性，用它来标识某个元素的加载状态。但是现在w3c规定，只有xhr才有这个事件。所以，这里，我们一般只能在IE中使用readyStateChange否则，其他浏览器是没有效果的。
详见:readyState兼容性分析
这样，我们模拟jquery的ready事件时就可以使用:

document.onreadystatechange = function () {
  if (document.readyState == "interactive" || document.readyState == "complete") {
        //添加回调...
  }
}

理想很丰满，现实很骨感。事实上, 当readyState为interactive时， Dom的结构并未完全稳定，如果还有其他脚本影响DOM时, 这时候可能会造成bug。另外为complete时，这时候图片等相关资源已经加载完成。这个时候模拟触发DOMContentLoaded事件，其实和onload事件触发时间并没有太久的时间距离。这种方式兼容低版本IE还是不太可靠的。
另外提供一个doScroll方式

doScroll兼容

这是IE低版本特有的，不过IE11已经弃用了。使用scrollLeft和scrollTop代替. doScroll 的主要作用是检测DOM结构是否问题，通常我们会使用轮询来检测doScroll是否可用，当可用的时候一定是DOM结构稳定，图片资源还未加载的时候。
我们来看一下jquery中实现doScroll的兼容:

  //低版本的IE浏览器，这里添加监听作为向下兼容，如果doScroll执行出现bug，也能保证ready函数的执行
            document.attachEvent( "onreadystatechange", DOMContentLoaded );
            window.attachEvent( "onload", jQuery.ready );
//在ready里面会对执行做判断，确保只执行一次
            var top = false;
// 如果是IE且不是iframe就通过不停的检查doScroll来判断dom结构是否ready
try {
    top = window.frameElement == null && document.documentElement;
} catch(e) {}
if ( top && top.doScroll ) {
    (function doScrollCheck() {
        if ( !jQuery.isReady ) {//ready方法没有执行过
            try {
                // 检查是否可以向左scroll滑动,当dom结构还没有解析完成时会抛出异常
                top.doScroll("left");
            } catch(e) {
                //递归调用,直到当dom结构解析完成
                return setTimeout( doScrollCheck, 50 );
            }
            //没有发现异常,表示dom结构解析完成,删除之前绑定的onreadystatechange事件
            
            //执行jQuery的ready方法
            jQuery.ready();
        }
    })();
}
//看看jQuery.ready()方法:
ready:function(wait) {
    if (wait === true ? --jQuery.readyWait : jQuery.isReady) {
        //判断页面是否已完成加载并且是否已经执行ready方法
        //通过isReady状态进行判断, 保证只执行一次
        return;
    }
    if (!document.body) {
        return setTimeout(jQuery.ready);
    }
    jQuery.isReady = true; //指示ready方法已被执行
      //这也是上面两次绑定事件的原因,会保证只执行一次
    if (wait !== true && --jQuery.readyWait > 0) {
        return;
    }
    //以下是处理ready的状态
    readyList.resolveWith(document, [jQuery]);
    if (jQuery.fn.trigger) {
    //解除引用
        jQuery(document).trigger("ready").off("ready");
    }
}

以上就是jquery 兼容ready的方法。

转载

segmentfault