Отключение Javascript Mutation Observer против игнорирования изменения обратного вызова

Я использую Mutation Observer для отслеживания изменений на странице, чтобы реагировать на новые изображения, добавляемые на страницу, и обновлять их URL-адреса. Существует также часть JS, которая выполняет отложенную загрузку и изменяет URL-адреса, когда изображения приближаются к области просмотра, используя Intersection Observer.

Вопрос в следующем: быстрее ли отключить наблюдателя мутации перед изменением URL-адреса в части с отложенной загрузкой и снова подключить его снова сразу после изменения, или же быстрее пометить элемент DOM каким-либо образом (сохранить его в list, пока он обновляется) и игнорировать изменение функции обратного вызова?

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

JS - это библиотека оптимизации изображений, поэтому она не контролирует, что и когда происходит на странице, на которой она включена.

Вероятно, это зависит от сложности DOM и некоторых других вещей. Это задача, которую вы можете (и должны) выполнить самостоятельно всего за несколько секунд / минут, либо вручную открыв performance.now (), либо путем профилирования в панели devtools Performance.

wOxxOm 04.04.2021 06:37

Я думаю, что все сводится к тому, насколько быстры и легки методы наблюдения () и Disconnect (). Если они просто добавляют и удаляют из внутреннего списка браузера, он должен быть в порядке и чище, так как в любом случае альтернатива состоит в том, чтобы оставить себе такой список элементов, которые ожидают рассмотрения. Размер DOM, который я не могу контролировать, поскольку JS предназначен для быть включенным на любую страницу, следуя простым некоторым правилам. Прежде чем реализовывать оба способа и проверять производительность на них, я подумал, что спрошу здесь ... :)

Simon - ShortPixel 04.04.2021 08:13

Я считаю, что должно быть наоборот: вы сначала измеряете, а затем подтверждаете, если необходимо. Это потому, что без фактического измерения самостоятельно вы не должны полагаться на чье-либо мнение или измерения, выполненные в неизвестных и непроверенных условиях.

wOxxOm 04.04.2021 08:16
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
19
0

Другие вопросы по теме