Chrome浏览器性能。定时输出错误(不匹配DEV-TOOLS)

时间:2018-12-04 00:18:46

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

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

我的代码是

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

我的目标是通过DOM计数和资源计数等多次读取“ https://google.com”页面加载时间 尽管它没有给出任何错误,但是它提供的时序与Dev-Tool时序不匹配。现在我不确定哪个是开发工具或Performance.Timings。 在重定向之后,它只有第一次与计时匹配,与chrome DEV-TOOL从未匹配。

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

我的铬建材低于

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

enter image description here

清单

{
    "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
    //  }
    // );


});

1 个答案:

答案 0 :(得分:0)

enter image description here

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

也可以选择提取开始,但是在这种情况下,浏览器缓存已禁用,因此没有必要使用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

TO

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