Js — насколько наказуемо использовать ручные отслеживалки загрузки?

Question

[Kim_Soal]

По определенным причинам, непонятно когда именно загрузится определенный кусок dom-дерева, а хочется сразу на это реагировать, не дожидаясь загрузки остального.

Конкретно в моем случае, я пытался отслеживать вставку данных после ajax запроса в определенном сайте, в рамках работы расширения для хрома, но вопрос хотелось бы обобщить да и вообще понять кто как делает.

почему нельзя/плохо использовать вот такую конструкцию и/или что лучше её.

var listener = setInterval( functuin(){
    if( document.getElementById('#bla') != null ) {
        clearInterval( listener );
        doSomeCall();
    }
}, 50 )

Comments

[dollar]

Что значит наказуемо? Вы боитесь наказания?

[Kim_Soal]

dollar, ну, в рамках такого сервиса как многоуважаемый Тостер или любой другой форум, кто-то да приведет пример огромной страницы с десятками тысяч дом-узлов по которым каждые n-милисекунд искать негоже.

[dollar]

Kim_Soal, максимум, что вы получите, это нагрузку на процессор. И продлится она до тех пор, пока элемент не загрузится. Но я не верю, что выбор элемента вообще может нагрузить проц, и тем более подвесить браузер. 50мс - это огромная пауза.

[Kim_Soal]

SmInc, тут привели пример $.ajaxComplete
а есть возможность нативно перехватывать все xhr запросы?
это так работают расширения прокси/впн встаиваемые в браузер?

если так, то зная запрос, можно всё обернуть своими промисами?

[Kim_Soal]

dollar, да я вот тоже думаю, что если нет списка из 10к+ елементов, то процу пройтись и вернуть true/false не такая и беда.
опять-таки, просто интересно, кто как это делает.

[dollar]

Kim_Soal, я так делал лет 5 назад. Причем, я не останавливался при выполнении условия (надо было все ссылки обработать, а не было гарантии, что все они загружены). Но через 30 сек останавливал поиск. Вроде даже событие загрузки документа не отслеживал, лень было.

Answer 1

[dollar]

Сам так делал. Вполне нормально.
Если расширение публичное, то можно в настройках сделать галочку "ускорять загрузку". А можно и не делать.

Кстати, можно пойти по пути прокси - и перехватывать сами ajax-запросы и фильтровать уже их.

Есть webRequest

Comments

[Kim_Soal]

ну мне тоже нормально, интересно подробнее.
расширение только пример.

ajaxComplete только обертка на джеквери аджакс методы. из того же расширения вообще вполне может быть разная область видимости жеж, же если итам, итам джеквери.

[dollar]

Kim_Soal, почитайте про chrome.webRequest. Это фича, позволяющая манипулировать трафиком - смотреть, подменять, блокировать.

Answer 2

[Владимир Проскурин]

почему нельзя/плохо использовать вот такую конструкцию и/или что лучше её.

По той причине, что вы каждые 50мс обращаетесь к DOM, а это ресурсозатратно. Если расширение пишите только для себя, то пофиг. Нужно выбирать лучшее из двух зол. Если у вас нет другого способа, то нужно использовать какой есть, только немного его обдумать (например увеличить интервал таймера).
Но раз у вас расширение (а значит кроссбраузерность не нужна), то я думаю, вам лучше подойдет вот это MutationObserver

Comments

[dollar]

Куда дальше увеличивать таймер? Он и так большой. За 50 миллисекунд можно выспаться. Не будет там никакой нагрузки.

[Kim_Soal]

ну это как я понял следит за изменением дом в целом сразу и так же приблизительно тоже что я написал в примере.

пишу не только для себя.
но, например, пусть это будет какой-то популярный сайт видео-хостинга, который подгружает данные скрытыми областью видимости/ограничениями безопасности расширения тригерами в виде аджакс запроса и мне нужно понимать когда именно человеку показать кнопочку "скачать видео", ради которой и нужно расширение.

хотя вопрос наоборот в том, чтобы не привязываться к расширениям.
вот например, дали мне проэкт где все скрипты подгружаются после window.onload
а мне нужно реализовать видео-прелодаер, который начнет отображатся пока сам паралельно наполовину загрузится и нет возможности повлиять на этап подгрузки моего модульного скрипта.

[Никита Егоров]

Вроде mutationObserver сам работает через sitInterval, правдо более оптимизированный.

[Владимир Проскурин]

dollar, эмм, 50мс это 20 раз в секунду, что дофига. Такие вещи нехорошо делать, т.к. это неминуемо приводит к теории разбитых окон, и там уже будет не один таймер на 50мс, а десятки таких. Зачем это делать, когда есть MutationObserver? Для старых браузеров есть Mutation events.

Kim_Soal

ну это как я понял следит за изменением дом в целом сразу и так же приблизительно тоже что я написал в примере.

Нет, неправильно. Он также следит за тем элементом, что вы укажите. Первый аргумент метода observe принимает целевой элемент DOM, во втором вы можете указать параметры, указывающие за какими данными следить (детьми, атрибутами и.т.д.). Это получается довольно эффективно.

но, например, пусть это будет какой-то популярный сайт видео-хостинга, который подгружает данные скрытыми областью видимости/ограничениями безопасности расширения тригерами в виде аджакс запроса и мне нужно понимать когда именно человеку показать кнопочку "скачать видео", ради которой и нужно расширение.

Используйте MutationObserver и не бойтесь. Указываете при window.onload в него родительский элемент списка видео или блока с видео (этот элемент должен быть доступен сразу), и ждете результат.

[Владимир Проскурин]

Никита Егоров, там внутри мощные механизмы отслеживания событий. При изменении содержимого блока, сразу вызывается emit события, которое ловит MutationObserver

[Kim_Soal]

Никита Егоров, тоже подумал что раз адекватного способа прослушки нет, там все приблизительно так же.

[Kim_Soal]

Владимир Проскурин, так там в доках с мозиллы дев создается сначало глобальный слушатель. Потом уже в него передается конкретный дом-узел с параметрами, который уже, да, с событием, возвращается. Но то что создается глобальный обьект, меня натолкнуло на подобные размышления + если бы был подобный механизм, вокруг него бы уже 10 лет как (с учетом поддержки заявленого метода) обрасла бы экосистема методов