Ускорение рендеринга дерева DOM

Question

Так что сайт, который я по какой-то причине создал, очень медленно отображает действительные элементы DOM ...

Под этим я подразумеваю, что при прокрутке страницы ОЧЕНЬ медленно.Почти как игра с низкой частотой кадров

Я играл с CSS и заметил, что когда я удаляю элементы с непрозрачностью или просто делаю их 1 . Сайт резко ускоряется.

Итак, вопрос в том, как сохранить этот визуальный стиль без ущерба для скорости рендеринга страницы

Здесьэто ссылка

http://imagedeconstructed.com/

Answer 1

1. Вы используете checkVis функцию onscroll.В зависимости от браузера ваша функция может запускаться несколько раз за прокрутку колесиком мыши.

2. В вашей функции checkVis вы несколько раз используете конструктор jQuery.Это означает, что каждый раз, когда происходит событие прокрутки , вы пересекаете DOM, чтобы найти эти элементы.

Чтобы максимизировать производительность, это чрезвычайно важно, чтобы вы кешировали свои селекторы.

---

У Twitter была такая же проблема в какой-то момент, когда прокрутка была настолько мучительно медленной, что им пришлось временно вернуться к более старой версии кода.

Подробнее об этом инциденте можно прочитать в блоге Джона Ресига (Джон является создателем jQuery):

Джон Ресиг - Извлечение из Twitter .

---

PS Возможно, вы также захотите запустить обработчик событий onscroll через таймер (setTimeout / setInterval).Джон все это покрыл ...

Answer 2

Из того, что я вижу, вы используете javascript для загрузки изображений и добавили функцию, которая добавляет изображения на страницу к событию onscroll.Таким образом, каждый раз, когда пользователь прокручивает страницу, эта функция - checkVis() - вызывается, и она кажется не слишком оптимизированной ...

Другой подход заключается в вставке изображений в разметку и использованиискрипт типа lazyload (хотя он использует аналогичный подход и гораздо более оптимизирован), чтобы загружать их только тогда, когда они находятся в области просмотра.

РЕДАКТИРОВАТЬ: кажется, что lazyload это не пригодное решение(как говорится на их сайте).Моя ошибка.