【问题标题】:Chrome performance.timing wrong outputs (NOT MATCHING WITH DEV-TOOLS)Chrome performance.timing 输出错误(与开发工具不匹配)
【发布时间】:2019-05-05 08:18:48
【问题描述】:

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

我的代码是

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

我的目标是多次阅读“https://google.com”页面加载时间以及 DOM 计数和资源计数等 虽然它没有给出任何错误,但它提供的时序与 Dev-Tool Timings 不匹配。现在我不确定哪个是错误的 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();

background.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
    //  }
    // );


});

【问题讨论】:

  • 我无法在 Windows 7 的 Chrome 70 或 72 中重现它,因此问题可能是 Chrome 中特定于平台的错误。或者,您可能有另一个扩展程序以某种方式干扰了结果 - 尝试使用仅包含您的扩展程序的新浏览器配置文件。
  • 我的测试是在窗口 10 Chrome 70 中进行的。但我会在其他 Chrome 上再次尝试使用我的扩展程序
  • @wOxxOm 你能给我看屏幕截图吗?我刚刚在新安装的 Chrome 上再次测试了它,但结果相同:(
  • 也在 UBUNTU 16.04 上测试,Chromium 70.0.3538.77 没有变化
  • 它解决了我从navigation.start 花费时间,而chrome 需要domainLookupStart

标签: javascript browser google-chrome-extension google-chrome-devtools web-performance


【解决方案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

【讨论】:

    猜你喜欢
    • 2015-06-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-08-08
    • 1970-01-01
    • 2019-06-15
    • 2015-10-08
    • 1970-01-01
    相关资源
    最近更新 更多