Javascript 移除显示器：Chrome中无延迟？

我有一个Chrome扩展，它基本上删除了一个按钮，并在第三方网页中添加了另外两个HTML元素。它通过观察当前选项卡上的URL来实现这一点，如果它与正则表达式匹配，它将继续并执行HTML注入。然而，即使是相当高端的笔记本电脑，我也看到了少量的延迟。我将CSS设置为

display:none

的按钮在被删除并替换为我的2个HTML元素之前出现了几分之一秒

有没有可能在我的Chrome扩展中的js脚本删除按钮之前的那一刻删除这个延迟，这样用户就看不到原来的按钮显示了？到目前为止，我确保负责将按钮属性设置为none的js文件在其前5行中包含此代码。ChromeAPI中是否有允许我在加载页面之前删除该按钮的内容

My code.js

var tabURL = window.location.href;
var origBtn = document.getElementsByClassName("Btn Btn-short Btn-primary Mend-med")[0];

if(origBtn != null) origBtn.style.display = "none";

var canProceed = correctURL(); //external method check if it matches url regex
if(canProceed == true){
    var rowElm = document.getElementsByClassName("Grid-table W-100 Fz-xs Py-lg")[0];
    var div = document.createElement('div');

    div.innerHTML = "<div class='extelms'>\
        <div class='selectContainer'>\
            <select required class='form-control' name='dayselect' id='days'>\
                <option value='1'>1 Day</option>\
                <option value='2'>2 Days</option>\
                <option value='3'>3 Days</option>\
                <option value='4'>4 Days</option>\
                <option value='5'>5 Days</option>\
                <option value='6'>6 Days</option>\
                <option value='7'>7 Days</option>\
            </select>\
            <button id='submit'>Submit</button>\
        </div>\
    </div>\
    </div>";
    document.getElementsByClassName("Grid-u Px-med Fz-sm Va-mid")[0].appendChild(div);
    document.getElementsByClassName("Grid-u Px-med Fz-sm Va-mid")[0].style.display = '-webkit-inline-box';
}

---

假设当我试图从网页中搜索要删除的元素时，由于网站的元素尚未加载，因此不会发生HTML元素的替换

确保按钮从不出现的一种方法是包括

.Btn.Btn short.Btn primary.Mend med{display:none；}

---

在

fantasy.css

中（可能有一个更明确的选择器）。内容脚本样式表能够影响原始DOM（尽管清单键名为

Content\u scripts

）。您仍然需要等待DOM完成加载，然后才能向DOM添加按钮；没有办法解决这个问题。

你可以通过默认隐藏正文并在代码注入后立即显示来提高感知性能。我尝试了你的方法，在URL是目标URL时隐藏正文（

display:none

）（因为它不应该对无关的网站这样做）注入和取消隐藏（即

display:initial

）看看您的延迟与显示无关：无速度本身。相反，请看3种不同的脚本注入模式以及如何检测url更改。两者都有延迟。在文档开始时注入，如果要消除延迟，请使用MutationObserver。这是一个极好的解决方案。现在，原始按钮从未出现，但注入元素的出现仍有一点延迟，这比我最初看到的要好。使用MutationObserver和document start，您可以添加按钮或无缝修改页面，而不会出现任何可感知的延迟，就像那样。

  "content_scripts": [
    {
      "matches": ["https://basketball.fantasysports.yahoo.com/nba/*"],
      "css": ["fantasy.css"],
      "js": ["js/fantasy.js"],
      "run_at": "document_end"
    }
  ]