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

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
});

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

Is it efficient to scan the page for a keyword every second?

javascript

jquery

html

optimization

memory-efficient