Отслеживание изменений в DOM происходит медленно - PullRequest
Новая
       10

Отслеживание изменений в DOM происходит медленно

0 голосов
/ 12 декабря 2018

У меня есть очень простой кусок кода, который я сделал для чередования чатов, который позволяет мне видеть изображение, опубликованное кем-то прямо в чате.Я не делаю экстремальной проверки, я просто хочу преобразовать любую ссылку на изображение в тег <img>. 

(function() {
'use strict';
$('.tw-flex-grow-1').on("DOMSubtreeModified",function(){
    $(".link-fragment").each(function(){
        if (($(this).text().indexOf(".jpg") > 0 ) || (($(this).text().indexOf(".png") > 0 )) || (($(this).text().indexOf(".gif") > 0 ))|| (($(this).text().indexOf(".jpeg") > 0 ))){
            $(this).html("<img src='" + $(this).text() + "' width='200px'/>");
        }
    });
});

}) ();

Я обнаружил, что DomSubTreemodified может отслеживать измененияв дел.Но моя проблема в том, что это медленно.Это сделает свою работу, но это действительно медленно, и я не знаю, почему именно.И я знаю, что с большим количеством сообщений это может быть медленно из-за «.Each», но это я решу позже, это медленно только с одним сообщением.

Это неправильный подход?Как можно ускорить этот триггер, модифицированный domsubtree?

EDIT

Следуя предложению в комментариях: 

(function() {
'use strict';
var targetNode = document.getElementsByClassName('tw-flex-grow-1')[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, observer) {
    for(var mutation of mutationsList) {
        alert("test");
        if (mutation.type == 'childList') {
            $(".link-fragment").each(function(){
                if (($(this).text().indexOf(".jpg") > 0 ) || (($(this).text().indexOf(".png") > 0 )) || (($(this).text().indexOf(".gif") > 0 ))|| (($(this).text().indexOf(".jpeg") > 0 ))){
                    $(this).html("<img src='" + $(this).text() + "' width='200px'/>");
                }
            });
        }
        else if (mutation.type == 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};
var observer = new MutationObserver(callback);

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

})();

1 Ответ

0 голосов
/ 12 декабря 2018

Большая проблема, вероятно, в том, что для каждой мутации вы проходите каждую .link-fragment, даже если вы уже обработали ее.То, что вы хотите сделать, это только посмотреть на содержимое недавно добавленного узла (и его дочерних элементов) и запустить свой код на этом.Попробуйте это: 

// Select the node that will be observed for mutations
var targetNode = document.getElementById('target');

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

function alterNode(node) {
    if (node.textContent.indexOf('gif') !== -1) {
        const image = document.createElement('img');
        image.setAttribute('src', node.textContent);
        image.setAttribute('width', 200);
        image.setAttribute('height', 200);
        node.appendChild(image);
    }
}
// Callback function to execute when mutations are observed
var callback = function(mutationsList, observer) {
    for(var mutation of mutationsList) {
        mutation.addedNodes.forEach(function(node) {
            if (node.classList.contains('link-fragment')) {
                alterNode(node);               
            }
            node.querySelectorAll('.link-fragment').forEach(function(node) {
                alterNode(node);
            })
        });
    }
};

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

document.getElementById('adder').addEventListener('click', function() {
     let imageLink = document.createElement('div');
     imageLink.classList.add('link-fragment');
     imageLink.textContent = 'https://media.giphy.com/media/l2R0aKwejYr8ycKAg/giphy.gif';
     document.getElementById('target').appendChild(imageLink);
});
<div id="target"></div>

<button id="adder">Add Image Link</button>
...