В этой статье описывается метод JS, чтобы предотвратить мигание при прокрутке макета Div, и используется с вами для вашей ссылки. Конкретные методы следующие:
Недавно я подвергался эксплуатации Page Performance, и есть много тонкого и оригинального контента, такого как рендеринг браузера. Есть много информации, поэтому я выбрал некоторые для перевода и меморандума.
JavaScript записывает и читает DOM несколько раз и вызывает «удары макета», что приводит к тому, что документ обрабатывает процесс построения дерева рендеринга
Кода -копия выглядит следующим образом: из DOM Tree1).
// читать
var h1 = element1.clientHeight;
// написать (макет недействителен)
element1.style.height = (h1 * 2) + 'px';
// Читать (Touch Release)
var h2 = element2.clientHeight;
// написать (макет недействителен)
element2.style.height = (h2 * 2) + 'px';
// Читать (Touch Release)
var h3 = element3.clientHeight;
// написать (макет недействителен)
element3.style.height = (h3 * 2) + 'px';
Когда DOM записан, макет является недействительным и должен быть перестроен в определенный момент времени. Но браузер ленив, и он хочет подождать, пока текущая операция (или рамка) не закончится перед повторным прибором.
Однако, если мы считываем геометрические значения из DOM до конца текущей операции (или рамки), то мы заставляем браузер для перераспределения макета заранее. Это называется «принудительная синхронная макет», которая убьет производительность.
В современных настольных браузерах побочные эффекты ухабистых макетов могут быть не очевидными; Но на низких мобильных устройствах проблема серьезной.
Быстрое решение
В идеальном мире мы можем читать и писать DOM в партиях, просто переставив заказ на выполнение кода. Это означает, что документ должен быть переупорядочен за один раз.
Скопируйте код следующим образом:/ Читать
var h1 = element1.clientHeight;
var h2 = element2.clientHeight;
var h3 = element3.clientHeight;
// написать (макет недействителен)
element1.style.height = (h1 * 2) + 'px';
element2.style.height = (h2 * 2) + 'px';
element3.style.height = (h3 * 2) + 'px';
// документы переставляются в конце рамы
Так что насчет реального мира?
Это не так просто в реальности. В крупных программах коды распространяются повсюду, и есть такие опасные DOMS. Мы не можем легко (и, очевидно, не должны) смешивать наш прекрасный, декорный код вместе, чтобы контролировать порядок выполнения. Итак, чтобы оптимизировать производительность, как мы можем читать и писать?
Познакомьтесь с запросом
window.requestanimationFrame планирует функцию, которая будет выполнена в следующем кадре, аналогично SetTimout (FN, 0). Это очень полезно, потому что мы можем использовать его для планирования всех операций DOM записи, которые будут выполнены вместе в следующем кадре, а операции чтения DOM будут выполняться синхронно в текущем порядке.
Скопируйте код следующим образом:/ Читать
var h1 = element1.clientHeight;
// Писать
requestAnimationFrame (function () {
element1.style.height = (h1 * 2) + 'px';
});
// читать
var h2 = element2.clientHeight;
// Писать
requestAnimationFrame (function () {
element2.style.height = (h2 * 2) + 'px';
});
...
Я надеюсь, что описание в этой статье будет полезно для каждого веб -программирования на основе JavaScript.