小编red*_*rum的帖子

W3C指定用户代理必须返回的事件列表及其对应的时序,如果他们想要支持Navigation Timing API.

您可以在此处看到一个列表:http://www.w3.org/TR/navigation-timing/#process

在大多数情况下,了解哪个过程与哪些事件相关.但有一点令我困惑不解是什么之间正在进行的domContentLoadedEventStart和domContentLoadedEventEnd.

这是我到目前为止所理解的,并基于我的反思:

1. domLoading // UA开始解析文档.
2. domInteractive// UA已完成解析文档.用户可以与页面进行交互.
3. domContentLoaded//文档已完全加载并解析,并且已执行延迟脚本(如果有).(异步脚本,如果有的话,可能会或可能不会执行???)
4. domComplete// DOM树是完全构建的.异步脚本(如果有)已执行.
5. loadEventEnd// UA有一个完整的页面.所有资源,如图像,swf等,都已加载.

domContentLoaded通过了解触发事件#4(domComplete)但未触发先前事件的内容,应该能够推断出阶段#3()之后发生的事情.

因此,人们会认为"异步脚本(如果有的话,已执行")意味着异步脚本在阶段#3之后但在事件#4之前执行.但根据我的测试,这不是发生的事情,除非我的测试是错误的.(我尝试复制我的测试JSFiddle,但我无法使deferred/async脚本工作,因为无法在外部脚本上添加属性.)

所以我的问题是:在domContentLoadedEventStart和之间发生了什么过程domContentLoadedEventEnd？

我有两个我想测试的功能; 一个只在"现代浏览器"中运行的另一个只在"较旧"的浏览器中运行.

我使用Jasmine作为我的测试框架和Karma来运行我的测试.Karma将推出许多运行所有测试的浏览器.

我的问题是在所有浏览器中测试我的所有功能会导致一些测试失败.例如,在IE8中测试时,测试仅应在现代浏览器中运行的函数将失败.

要测试的代码:

function getStuffFromSmartBrowser() {
    return 'foo';
}

function getStuffFromNotSoSmartBrowser() {
    return 'bar';
}

if ('intelligence' in browser) {
    getStuffFromSmartBrowser();
} else {
    getStuffFromNotSoSmartBrowser();
}

原始测试代码:

describe("A suite", function () {
    it("for smart browsers", function () {
        expect(getStuffFromSmartBrowser()).toEqual('foo');
    });
});

describe("A suite", function () {
    it("for not so smart browsers", function () {
        expect(getStuffFromNotSoSmartBrowser()).toEqual('bar');
    });
});

在这些测试用例中,一种测试将在一种类型的浏览器中失败,而另一种测试在另一种类型的浏览器中将失败.

替代测试代码:

describe("A suite", function () {
    if ('intelligence' in browser) {
        it("for smart browsers", function () {
            expect(getStuffFromSmartBrowser()).toEqual('foo');
        }); …