每秒扫描页面以查找关键字是否有效？

Question

所以我正在为自己和几个朋友编写个人用户脚本。用户脚本用于阻止页面上的关键字。

在我使用的页面上搜索关键字：

var filter = ["worda", "wordb", "wordc"];
var found = false;

var check =
    function () {
        //Stores the content of the head and body in the document.
        var head = $("head").html();
        var body = $("body").html();


        $.each(filter, function(index, item) {
            if ((head + body).toString().toLowerCase().contains(item.toLowerCase()))  {
                window.clearInterval(interval);
                console.log("Found: " + item);
                found = true;
                return false;
            }
        });

        if (found) {
            $("body").hide();
            var originalTitle = $(document).prop("title");
            $(document).prop("title", "Blocked");

            window.setTimeout(function() {
                if (confirm("This page contains a blocked keyword, are you sure you'd like to continue?")) {
                    $(document).prop("title", originalTitle);
                    $("body").show();
                    return;
                }
            }, 1);
        }
    };

然后我将它设置为每秒重复一次：

var interval = window.setInterval(check, 1000);

我每秒重新检查页面的原因是因为新内容可能是通过 Javascript 动态创建的，我需要确保它也被过滤。

但是，我想知道这是否是扫描页面以查找关键字的最有效方法，或者是否有更有效的方法不需要我重新检查整个页面（可能只需要重新检查新元素）。

我还想尽可能地降低间隔（我想大约 100 毫秒），但是我不知道这是否会非常节省资源。

感谢您的帮助。

Answer 1

您说得对，定期扫描页面内容是解决问题的低效方法。话虽如此，如果它每秒只运行一次，那可能不是什么大问题。

不过，还有更好的选择。 MutationObserver 接口可用于在修改文档或文档的一部分时触发事件。这非常适合您尝试做的事情：

var observer = new MutationObserver(function() {
    … scan the document for your keywords …
});
observer.observe(document, {
    childList: true,
    characterData: true,
    subtree: true
});