javascript - Chrome 性能.计时错误输出(与开发工具不匹配)

Question

我编写了一个简单的扩展程序，通过所有 URL 的内容设置禁用 JavaScript，将我的网页重定向到所需的网站。

我的代码是

1. 我通过后台脚本等待页面状态为“完成”
2. 页面完成后，我通过 chrome.tabs.executescript() 注入(inject)脚本
3. 我的脚本使用 chrome.runtime.sendMessage() 将所需的统计信息发送回我的扩展程序的后台页面，我在其中打印它们。
4. 然后我将该页面重定向到给定的网址(硬编码的“google.com”)
5. 返回第 1 步

我的目标是多次读取“https://google.com”页面加载时间以及DOM计数和资源计数等 虽然它没有给出任何错误，但它提供的计时与开发工具计时不匹配。现在我不确定开发工具或 Performance.Timings 哪个是错误的。 只有第一次它与我重定向后的计时相匹配，它永远不会与 chrome DEV-TOOL 匹配。

如果有人想测试它，我已经包含了下面的所有代码。

我的 Chrome 版本如下

Windows 10 (64 Bit) also tested on UBUNTU 16.04 with Chromium 70.0.3538.77
Google Chrome   70.0.3538.110 (Official Build) (64-bit) 
Revision    ca97ba107095b2a88cf04f9135463301e685cbb0-refs/branch-heads/3538@{#1094}
OS  Windows
JavaScript  V8 7.0.276.40
Flash   31.0.0.153 

我的打印格式是 URL,DOM_Loaded,ON_LOAD,DOM_Count,Req_Count

Dom_loaded : performance.timing.domContentLoadedEventEnd-performance.timing.navigationStart,
on_load : performance.timing.loadEventEnd - performance.timing.navigationStart,
Dom_count : document.getElementsByTagName('*').length,              
req_count : window.performance.getEntriesByType("resource").length

list

{
    "name" : "JS BLOCK settings",
    "version" : "1",
    "description" : "Block JS of Brower",
    "icons":{
        "128" : "js-logo.png",
        "48" : "js-logo.png",
        "16" : "js-logo.png"
    },
    "permissions": [
        "browsingData", 
        "contentSettings",
        "tabs",
        "<all_urls>" 
    ],
    "browser_action": {
        "default_icon": "js-logo.png"


    },
    "background": {
        "scripts": ["background.js"]

    },
    "externally_connectable": {
    "ids": [
      "*"
    ],
    "matches": ["https://www.google.com/"],
    "accepts_tls_channel_id": false
  },
    "manifest_version": 2
}

self_script.js

function send_stats(){

    chrome.runtime.sendMessage(

        {
            Dom_loaded : performance.timing.domContentLoadedEventEnd-performance.timing.navigationStart,
            on_load : performance.timing.loadEventEnd - performance.timing.navigationStart,
            Dom_count : document.getElementsByTagName('*').length,              
            req_count : window.performance.getEntriesByType("resource").length

        }, function(response) {
        }
    );

    console.log("IT WORKS");

}

send_stats();

背景.js

document.addEventListener('DOMContentLoaded', blockjs);

var mytabid = 0

var b = "https://google.com" 
chrome.tabs.onUpdated.addListener(
    function (tabId , info) {
        if (info.status == 'complete') {
            mytabid = tabId
            console.log("Going to exec")
            chrome.tabs.executeScript(tabId , {
                file: "self_script.js"
            // code: new_redirect
            });

            setTimeout(function(){
                console.log("JUST BEFORE UPDATE")
                chrome.tabs.update(mytabid,{url: b})
            },5000)

      }
});


function blockjs(tab) {

    chrome.contentSettings['javascript'].set({
        primaryPattern:  "<all_urls>",
        setting: 'block'
    })

}

// URL,DOM_Loaded,ON_LOAD,DOM_Count,Req_Count
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {


    console.log(sender.tab.url+","+request.Dom_loaded+","+request.on_load+","+request.Dom_count+","+request.req_count)

    // var millisecondperhour = 3600000;
    // var onehourago = (new Date()).getTime() - millisecondperhour;
    // chrome.browsingData.remove({
    // "since": onehourago
    // }, {
    //     "appcache": true,
    //     "cache": true,
    //     "cookies": true
    //  }
    // );


});

Answer 1

问题出在 (Background.js) 中的 chrome.tabs.update(mytabid,{url: b}) 。通常，当我们请求网页时，它会启动navigation.start事件，但是当我们重定向网页时，chrome会在redirect.end之后花费一些时间，即DomainlookupStart。

也可以选择 fetch Start，但在这种情况下，浏览器缓存被禁用，因此没有必要选择 fetchStart。

要获得确切的答案，请更改background.js

Dom_loaded : performance.timing.domContentLoadedEventEnd-performance.timing.navigationStart,
on_load : performance.timing.loadEventEnd - performance.timing.navigationStart,
Dom_count : document.getElementsByTagName('*').length,              
req_count : window.performance.getEntriesByType("resource").length

致

Dom_loaded : performance.timing.domContentLoadedEventEnd-performance.timing.domainLookupStart,
on_load : performance.timing.loadEventEnd - performance.timing.domainLookupStart,
Dom_count : document.getElementsByTagName('*').length,              
req_count : window.performance.getEntriesByType("resource").length