- изменение пользователем размера окна браузера или шрифта;
- добавление или удаление CSS-кода (как встроенного, так и во внешнем файле);
- манипуляции с элементами DOM-дерева;
- изменение таких свойств элементов страницы: class, font, display, visible, margin, padding, width, height.
- активация псевдоклассов, таких например, как :hover.
- Учитывая эти особенности можно свести к минимуму число перерисовок страниц, а для того, чтобы скорость перерисовок была наивысшей необходимо:
- обеспечить минимальную глубину и минимальный размер DOM-дерева, так как часто изменения свойств какого-либо элемента вынуждают браузер перерисовать не только сам этот элемент, но также родительские и дочерние элементы, а иногда и всю ветвь целиком;
- оптимизировать CSS-селекторы, обеспечить минимальный объем CSS-кода;
- создавать сложные элементы, анимировать их и производить другие подобные манипуляции над элементами, располагая их вне потока, используя для этого свойства position: absolute и position: fixed;
- изменять классы и стили у элементов на максимальной глубине DOM-дерева, что позволит браузеру перерисовывать лишь часть страницы;
- избегать использования таблиц в верстке, поскольку действия над их ячейками почти всегда вызывают необходимость перерасчитать и перерисовать всю таблицу целиком.
Увеличение скорости отображения веб-страниц. Особенности отображения веб-страниц. Обзор методов клиентской оптимизации
Особенности отображения веб-страниц
При изменении ряда свойств элементов веб-страницы, а также в некоторых других ситуациях, браузеры производят перерасчет геометрии и положения элементов, находящихся в потоке веб-страницы, после чего заново перерисовывают страницу или ее часть. Если веб-страница достаточно сложна, ее обновление будет заметно для пользователя и неизбежно вызовет задержку в его работе со страницей.
Вот неполный список действий, вызывающих в большинстве браузеров перерисовку страниц или их частей: