今天上推特的时候突然发现昨天重置chrome之后油猴脚本没开,才想起来自己曾经写过将推特的jpg:large转化为jpg方便直接另存为图片的脚本。
遂打开代码怀旧(油猴显示356days unchanged)
然后我就发现这么一些代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// $(setInterval(function() {
//         //alert("");

//     var a=$("img[src*='jpg:large']");
//     a.each(function(){
//         //alert($(this).attr("src"));
//         $(this).attr("src",String($(this).attr("src")).replace(/jpg:large/,"jpg"));
//         //alert($(this).attr("src"));
//     });
//      var b=$("img[src*='png:large']");
//     b.each(function(){
//        $(this).attr( "src",String($(this).attr("src")).replace(/png:large/,"png"));
//     });
//     //alert("");
// }),200);

当然现在都被我注释掉了,
当时为了解决推特下拉加载出来的新的dom元素中间图片的替换问题,没找到监听dom变化的函数,只能setinterval(),后果就真的很占用cpu,造成这一年来我一直以为推特就是个很占cpu的网页(捂脸
遂随手搜索了一下有没有监听dom变化的函数
一开始搜到的是jquery的DOMNodeInserted事件,
查阅后mdn后被推荐MutationObserver函数,
尝试之发现效果不错
现在代码为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// Select the node that will be observed for mutations
var targetNode = $("body")[0];

// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
var callback = function(mutationsList) {


    var a=$("img[src*='jpg:large']");
    a.each(function(){
        //alert($(this).attr("src"));
        $(this).attr("src",String($(this).attr("src")).replace(/jpg:large/,"jpg"));
        //alert($(this).attr("src"));
    });
     var b=$("img[src*='png:large']");
    b.each(function(){
       $(this).attr( "src",String($(this).attr("src")).replace(/png:large/,"png"));
    });
    //alert("");
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

本着拿来就用主义原则(明天还要考毛概我现在跑来干这个= =),并没有对mdn上的事例代码做过多的修改。
有效的降低了cpu占用(bgm38)(空闲时至少20%)

One thought to “解决推特jpg:large,监听dom元素内容变化的函数,MutationObserver”

Leave a comment

电子邮件地址不会被公开。 必填项已用*标注