javascript - 使用waitForKeyElements，是否可以防止显示关键元素，只有在我的代码修改后才显示？

Question

我有this userscript ^{(在 Stack Overflow 的大力帮助下编写)} 网站 metal-archives.com。

它的结构是这样的:

function appendColumn(...) {
    // code for appending column
    // code for making the table sortable   
}

waitForKeyElements ("table", appendColumn);        

除了在您切换子选项卡(表格)时出现视觉故障/延迟外，该脚本运行正常。

切换时，额外的(第 6 列)最初会按预期显示。但是随后，该表会暂时以其原始形式显示，然后最终以应有的第 6 列显示。

要查看此内容，请安装脚本，访问 this typical target page ，然后切换子选项卡(在 Complete Discography、Main、Lives、Demos、Misc 等之间)。
它看起来像这样:

---

我试图通过添加以下内容使初始表不出现:

GM_addStyle(".display.discog {display: none;} ");

到 appendColumn() 的开头和:

GM_addStyle(".display.discog {display: inline !important;} "); 

到 appendColumn() 的结尾。
但这没有任何区别。

---

我在该页面上使用了 Firefox Network Monitor，当您切换标签时似乎:

• 代码立即修改表(从缓存加载？？——因为网络监视器中没有条目)。
• 然后从服务器加载表格(相关的 HTML 文件)。
• 然后最后一次修改表格。

如何更改代码(在使用 waitForKeyElements 时)以防止显示关键元素，并且仅在我的代码修改后才显示它？

或者如何加快响应速度？

谢谢。

Answer 1

我加载了您的脚本，添加了时间线，并对其进行了测试。从 AJAX-complete 到表被修复和完成所耗时只有 400 到 500 毫秒!对于大多数人和情况来说，这已经足够快了。

但是，对于那些您绝对想挤出毫秒的时间，您可以切换到 MutationObserver。它们挑剔、脆弱且跨浏览器的可移植性较差，但速度很快。
在这种情况下，MutationObservers 将 AJAX 到固定表的时间缩短到 20 到 40 毫秒的范围。

我建议使用类似 Mutation Summary 的库消除过程中的一些痛苦。

从简单 waitForKeyElements() 实现转换为 Mutation Summary:

1. 添加

   @require https://raw.githubusercontent.com/rafaelw/mutation-summary/master/src/mutation-summary.js
   

   到您的元数据 block 。

2. 将您的 waitForKeyElements 回调和简单选择器插入此结构:

   var muteObserver = new MutationSummary ( {
       callback: handleDiscographyChanges,
       rootNode: $( {ANY-JQUERY-SELECTOR} )[0],
       queries: [ {element: {A-SIMPLE-SELECTOR}} ]
   } );
   
   function handleDiscographyChanges (muteSummaries) {
       var mSummary    = muteSummaries[0];
       if (mSummary.added.length) {
           {YOUR-CALLBACK} ( $(mSummary.added[0]) );
       }
   }
   

例如在这种情况下，更改:

waitForKeyElements (".display.discog", appendColumn);

收件人:

var muteObserver = new MutationSummary ( {
    callback: handleDiscographyChanges,
    rootNode: $("#band_disco")[0],
    queries: [ {element: ".discog"} ]
} );

function handleDiscographyChanges (muteSummaries) {
    var mSummary    = muteSummaries[0];
    if (mSummary.added.length) {
        appendColumn ( $(mSummary.added[0]) );
    }
}

rootNode 是通过检查页面结构确定的。

---

---

---

作为引用，包含 3 种可选方法和计时记录的完整脚本如下。它仅在 Firefox 上进行了测试，但应该也可以与 Tampermonkey 一起使用(也许)。

查看每行正上方的 //OPTION n 行以选择性地注释掉。

// ==UserScript==
// @name        Metal Archives (discography pages) - Reviews column split and sortable tables
// @include     http://www.metal-archives.com/bands/*
// @include     http://www.metal-archives.com/band/*
// @grant       none
// @require     http://code.jquery.com/ui/1.9.1/jquery-ui.min.js
// @require     https://greasyfork.org/scripts/2199-waitforkeyelements/code/waitForKeyElements.js?version=6349
// @require     https://greasyfork.org/scripts/5844-tablesorter/code/TableSorter.js?version=21758
// @require     https://raw.githubusercontent.com/rafaelw/mutation-summary/master/src/mutation-summary.js
// ==/UserScript==

function appendColumn(jNode) {
    logTime ("Table fixed");

    // STEP 1+2: SPLIT THE 'REVIEWS' COLUMN INTO A 'REVIEWS' COLUMN AND A 'RATINGS' COLUMN
    var tbl = jNode[0];     // table reference

    // If the current sub-table has no data, then stop the execution of the function
    if (tbl.rows[1].cells[0].innerHTML == '<em>Nothing entered yet. Please add the releases, if applicable. </em>') {
        return;
    }

    var newCell, newText;

    const cols = tbl.rows[0].cells.length - 1;

    var tr = tbl.tHead.children[0],
    th = document.createElement('th');

    th.innerHTML = "Ratings";
    th.className = "ratingsCol";
    tr.appendChild(th);

    for (i = 1; i < tbl.rows.length; i++) {
        k = tbl.rows[i].cells[cols].innerHTML;    // Retrieve the content of the current cell of the Review column and store it to variable k


        re1 = /<a [^>]*>[^(]*[(]([^)]+)/ ;        // (RegEx which matches the 'Ratings' percentage(incl.the % symbol)
        l = re1.exec(k);                          // (Execute the RegEx and store it to variable l)

        newCell = tbl.rows[i].insertCell(-1);     // Add a new cell (for the new 'Ratings' column ) -for each row-

        if (re1.test(k) != 0){                    // If the RegEx has matches, (only) then create new cells with...

            re0 = /(<a [^>]*>)[0-9]*[^(]/ ;       // (RegEx which matches the reviews URL)
            url = re0.exec(k);                    // (Execute the RegEx and store it to variable url)

            newCell.innerHTML = url[1] + l[1] + '</url>'; // ...the Ratings percentage (which is also a link to the Reviews)...


            re2 = /<a [^>]*>([0-9]*)[^(]/ ;       // (RegEx which matches the 'Reviews' number)
            m = re2.exec(k);                      // (Execute the RegEx and store it to variable m)

            newCell = tbl.rows[i].cells[cols];    //
            newCell.innerHTML = url[1] + m[1] + '</url>'; // ...and the Reviews number (which is also a link to the Reviews)
        }
    }

    //  STEP 3: MAKE THE DISCOGRAPHY TABLE SORTABLE  (using the jQuery plugin "tablesorter")
    $(tbl).tablesorter ( {
        cssAsc: 'up',
        cssDesc: 'down',
        headers: {
              0: {sorter: false}
        }
    } );
}

//OPTION 1
//waitForKeyElements (".display.discog", appendColumn);

$(document).ajaxComplete (function (e, xhr, config){
    logTime ("Ajax complete");
    //OPTION 2
    return; //-- For compare test

    if (config.url.indexOf ('/tab/') != -1){
        $(".display.discog").each ( function () {
            appendColumn ( $(this) );
        } );
    }
} );

$("#band_disco > ul > li").on ("click", "a.ui-tabs-anchor", function (zEvent) {
    logTime (zEvent.target.textContent + " tab was clicked.");
} );

function logTime (lableTxt) {
    var tNow    = new Date ();
    console.log (tNow.toLocaleFormat ('%H:%M:%S') + "." + tNow.getMilliseconds (), " <== " + lableTxt);
}

//OPTION 3
//*--- Remove leading slash, from this line, to comment out block, below.
var muteObserver = new MutationSummary ( {
    callback: handleDiscographyChanges,
    rootNode: $("#band_disco")[0],
    queries: [ {element: ".discog"} ]
} );
//*/ -- Tail end of optional comment block

function handleDiscographyChanges (muteSummaries) {
    var mSummary    = muteSummaries[0];
    if (mSummary.added.length) {
        appendColumn ( $(mSummary.added[0]) );
    }
}

请注意，此示例中省略了样式代码和一些原始注释。