Chrome performance.timing 錯誤輸出（不匹配開發工具）

Question

我編寫了一個簡單的擴展程序，將我的網頁重定向到所需的站點，並通過所有 URL 的內容設置禁用 JavaScript。

我的代碼是

1. 盡管我的后台腳本，我等待頁面狀態為“完成”
2. 當頁面完成時，我通過 chrome.tabs.executescript() 注入一個腳本
3. 我的腳本使用 chrome.runtime.sendMessage() 將所需的統計信息發送回我的擴展程序的后台頁面，在那里我打印它們。
4. 然后我將該頁面重定向到給定的 URL（硬編碼的“google.com”）
5. 回到步驟 1

我的目標是多次閱讀“ https://google.com ”頁面加載時間以及 DOM 計數和資源計數等，雖然它沒有給出任何錯誤，但它提供的時間與開發工具時間不匹配。 現在我不確定哪個是錯誤的 Dev-Tool 或 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

顯現

{
    "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