Рефлюкс и перерисовки
Когда размер, расположение и другие изменения делают скрытые элементы в дереве произошло восстановление потребностей. Когда макет страницы и геометрия атрибуты потребности изменения в рефлюкс.
При визуализации дерева некоторых свойств элементов обновления, но свойства влияют только на внешний вид и стиль, это не будет влиять на макет, такие как цвет фона.
Это вызовет перемещение страницы собственности
- Box свойство, связанные с моделью
- Найдите соответствующее свойство
- Изменение внутреннего узла факторов
| Модель Бокса | разместить | письменность |
|---|---|---|
| ширина | верх | выравнивания текста |
| высота | дно | Переполнение-й |
| набивка | осталось | начертание шрифта |
| поле | право | переполнение |
| дисплей | позиция | семейство шрифтов |
| ширина рамки | поплавок | высота линии |
| граница | Чисто | vertival выравнивания |
| мин-высота | бело-пространство | |
| размер шрифта |
Только свойство триггера перерисовки
| Только перерисовки недвижимость |
|---|
| цвет |
| граница радиуса |
| видимость |
| текст-отделка |
| фон |
| фоновая картинка |
| фон положение |
| фон-повторить |
| фон-размер |
| план-цвет |
| контур |
| план-стиль |
| Контур ширина |
| коробчатого тень |
Хром слоя для создания условий
- 3D или преобразования в перспективе (перспективное преобразование) свойства CSS
- Видео ускорения декодирования с использованием узла
- 2D узел контекста имеет контекст 3D (WebGL) или ускоренного
- CSS непрозрачности делать на своей собственной анимации или использования WebKit преобразования анимированный элемент
- Он имеет фильтрующий элемент ускоренные CSS
- Существует узел потомок элемента содержит композитный слой (один элемент имеет дочерний элемент, дочерние элементы в своем собственном слое)
- Нижний элемент содержит композиционный слой и Z-индекс одноуровневых элементы (другие слова, вышеупомянутые элементы отображаются в композиционном слое)
Процесс Новый DOM
- После получения множества слоев разделяются на DOM
- Стиль Результаты расчета для каждого узла слоя (пересчитывать style- вес стиля)
- И генерирующий Образец позиции (layout- relayout рефлюкс) для каждого узла
- Каждый узел заполняется в слой обращается растровое изображение (Paint Setup и перерисовки цветной отделки
- Слои, загруженные в GPU в качестве текстуры
- В соответствии с несколькими слоями, чтобы генерировать конечное изображение на экране (Композитный Layers- рекомбинация слой) на страницу
Практическое применение пунктов оптимизации
- В качестве альтернативы перевода топа с изменениями
- Альтернативная видимость с непрозрачностью
- Не изменяйте DOM один за другим стилем, предопределенный класс, а затем модифицировать DOM имя класса
- После того, как не изменяя DOM в автономном режиме, таких как: первый DOM для отображения: ни один (один раз оплавления), а затем изменить в 100 раз, а затем положить его на дисплей
- Не атрибут значений узлов DOM в цикле в виде петли в переменной
- Не используйте макеты таблиц, может быть небольшими, небольшое изменение приведет к повторной компоновке всей таблицы
- Выберите скорость анимации для достижения
- Для нового слоя анимации
- Включить аппаратное ускорение GPU
