监视页面变化

Question

我正在为Stack Overflow编写Chrome扩展，并且在页面更新（即将注释/答案添加到内容）时需要重新运行检查。

我试过订阅$(document).ajaxComplete()，但那似乎从未出现过。

我发现绑定到DOMSubtreeModified允许我正确更新，但它似乎也经常触发也。在页面加载时，它可以被调用21次（有时它只被调用一次）。同样，如果我在控制台中执行jquery选择，该事件将再次触发。

$(setup); 

var hits = 0; 
var original_title; 

function setup() 
{ 
    original_title = document.title; 
    doWork(); 
} 

function doWork() 
{ 
    //unbind so our own changes don't cause infinite loops of the event. 
    $("#mainbar").unbind("DOMSubtreeModified", findSkeets); 

    //Debug: Add the Number of function hits to the title bar 
    hits++; 
    document.title = "(" + hits + ") " + original_title; 

    //Do Work Here 

    //Rebind to the event now that we've finished executing; 
    $("#mainbar").bind("DOMSubtreeModified", findSkeets); 
} 

是否有更有效的方法来监视页面的变化？我看到一些Chrome挂在了SO上，这可能是这个扩展的结果，所以我想尽可能地减少影响。

Answer 1

DOMSubtreeModified为存在众所周知的低效率的过时Mutation Events API，目前已不适用（在其他原因中）的一部分。根据MDN，DOM Mutation Events是一种功能，，“已经从网站中删除”“是被丢弃的过程”和“用它的Web应用程序可以在任何时候打破”。

您应该使用新的MutationObserver API，这也更有效。
（该mutation-summary库提供了一个有用的inteface到这个新的API。）

还参见this answer的更多细节和this answer一个类似的用例：一个Chrome扩展使用MutationObserver API来检测（并修饰）异步加载的Google搜索结果。