У каждого языка программирования есть свои нюансы, и Javascript не исключение. Одним из таких примеров является влияние, которое может оказать использование собственных API DOM на ваше приложение. Многие люди не знают, но использование определенных свойств/методов может вызвать перекомпоновку, и если у вас их достаточно за короткий промежуток времени, вы заметите значительное отставание в общей отзывчивости. На приведенном ниже графике показана временная шкала производительности Chrome в веб-приложении, которое страдает от этого.
Фиолетовая часть представляет собой рендеринг, на который приходится большая часть временной шкалы, и если мы углубимся в период от 2100 мс до 3200 мс, вы увидите, что это в первую очередь вызвано вызовом метода getBoundingClientRect для нескольких элементов.
Отказ от использования этого метода приведет к значительному сокращению времени рендеринга (чем меньше, тем лучше). Как вы, наверное, догадались, getBoundingClientRect не единственный, который вызывает перекомпоновку, и более полный список можно найти в основной ссылке здесь.
Так как же нам защититься от этих перекомпоновок? Разрешите представить новую библиотеку под названием reflow-rejector. Он был построен с использованием этих трех принципов.
- Должен быть на виду у разработчиков, чтобы его нельзя было легко игнорировать
- Настраивается так, что вы можете определить свои собственные ограничения
- Написан на ванильном JS, так что он будет работать с любым фреймворком JS.
Reflow-rejector будет поддерживать очередь событий, где событие определяется как использование любого свойства или метода, вызывающего перекомпоновку. Эта очередь будет проверяться каждые intervalMs, и если количество событий превышает maxAllowed, она уведомит разработчика либо через окно предупреждения, либо просто сообщение об ошибке консоли. Пожалуйста, посмотрите GIF ниже для лучшего понимания. Демонстрационное приложение считывает свойство offsetLeft для 20 элементов, что превышает значение maxAllowed по умолчанию, равное 10.
Несколько вещей, на которые следует обратить внимание, прежде чем добавить его в свой проект. Его следует использовать только для режима разработки, так как вы, вероятно, не захотите, чтобы ваши клиенты видели это окно с предупреждением. Прототипы Element (и другие) не будут перезаписаны, если библиотека не инициализирована. Вы также можете условно запускать и останавливать библиотеку, используя статические методы инициализации и разрыва.
Reflow-rejector имеет открытый исходный код, поэтому, если вы хотите увидеть дополнительную функциональность, не стесняйтесь взломать ее самостоятельно. Существует небольшое демонстрационное веб-приложение и модульные/интеграционные тесты, чтобы гарантировать, что ваши изменения не вызовут регрессии. Удачного кодирования, и пусть перекомпоновки вашего приложения всегда будут в вашу пользу.
