Пусть CSS JavaScript низкую производительность?
Буду часто вызывать перерисовки возвращения приведет к частому визуализации пользовательского интерфейса, в конечном итоге приводит к замедлению JS.
Есть два потока: один поток JavaScript синтаксического анализа, что делает поток пользовательского интерфейса является, по сути, две взаимоисключающие две нити.
Когда JavaScript UI нить работает поток прерывается пауза, и наоборот.
Ну, это почему?
Причина заключается в том, что при запуске на поток пользовательского интерфейса страницах оказываемых JS скрипт будет неизбежно меняются некоторый стиль на просмотре страницы, для того, чтобы сделать эти изменения более точно Js сценарий пришлось ждать UI рендеринг потока завершается, когда он должен выполнить.
Поэтому, когда элементы стиля страницы часто меняется, когда пользовательский интерфейс поток будет продолжать оказывать, в результате запоздалую реакцию коды, расслоения плотной ситуации Катона.
рефлюкс
- Когда часть (или все) из-за размером размера элемента, расположение, скрыть и другие изменения в визуализации дереве и должны быть восстановлены. Это называется оплавления (оплавления)
- Когда макет страницы и геометрические свойства изменяются потребности в колбе с обратным холодильником
-
Срабатывание макет страницы атрибута веса:
1, модель коробки будет инициировать повторный макет связанных атрибутов: ширину, высоту, отступы, запас, бегите дисплей, граница ширину, границы, мин-Heigh.
2, позиционирование и плавучие свойство будет инициировать повторное размещение: сверху, снизу, слева, справа, положение, поплавок, Clear
3, изменить внутреннюю структуру текстового узла вызовет повторное размещение: выравнивания текста = левый, переполнение-Y, начертание шрифта, переполнение, семейство шрифтов, Line-высота, vertival-ALIGN = левый, белый-Space, размер шрифта
Перерисовка
- При визуализации дерева некоторые элементы должны быть обновлены атрибуты, но эти атрибуты влияют только на элемент внешнего вида, стиля, и не будет влиять на макет, такие как цвет фона. Это называется называется перерисовки.
-
只触发重绘的属性:
цвет
границы стиля
границы радиуса
видимости
текста украшения
фона
Фоновое изображение
фон положение
фон-повторить
фон-размер
очертание цвета
наброски
наброски стиле
наброски ширины
коробчатого тень
Резюме: рефлюкс вызывает перерисовку и перерисовывать не обязательно вызывать рефлюкс
Теперь мы знаем, что эти атрибуты будут вызывать рефлюкс, то как избежать кипения с обратным холодильником это?
На самом деле, есть два способа:
Во-первых, не использовать больше, чем может вызвать рефлюкс свойств слоя,
Во-вторых, чтобы создать новый слой, так что с обратным холодильником в этих слоях внутри, и ограничить объем рефлюкса перерисовывать, снижая рабочую нагрузку оператора браузера
Новый процесс DOM
1. После получения множества слоев разделяется на DOM
2. Узлы каждого слоя рассчитываются результаты модели (Перерасчет style-- вес стиль)
3. Для каждого узла генерирует графики и позицию (Layout-- рефлюксная relayout )
4. заполненный слой каждого узла , чтобы нарисовать растровое изображение (Setup Paint Paint-- и перерисовку)
5. закачанный слой в качестве текстуры на GPU
6. множество слоев , чтобы соответствовать странице , чтобы генерировать конечное изображение на экране (Composite Layers-- слои переустройство)
Частое рефлюкса будет перерисовывать элемент DOM в покое в виде отдельного слоя, то влияние этого и вернуться к перерисовывать элемент DOM только в этом слое.
Chrome автоматически создаются слои для создания условий
- 3D или преобразования в перспективе (перспективное преобразование) свойства CSS
- С помощью ускоренного декодирования видео <видео> узел
- 2D контекст имеет 3D (WebGL) контекст или ускорение <холст> узел
- Гибридные плагинов (например, Flash)
- CSS непрозрачности делать на своей собственной анимации или использования WebKit преобразования анимированный элемент
- Это ускорило фильтрующий элемент CSS
- Существует узел потомок элемента содержит композитный слой (один элемент имеет дочерний элемент, дочерние элементы в своем собственном слое)
- Нижний элемент содержит композиционный слой и Z-индекс одноуровневых элементы (другие слова, вышеупомянутые элементы отображаются в композиционном слое)
Как создать слой л два способа вручную:
- будет-изменение: преобразование
- преобразование: translateZ (0)
Chrome браузер больше инструментов ниже слоев можно просматривать слои информации, что делает браузер может просматривать страницу элементы будучи перерисовывается.
Слои могут быть уменьшены путем перерисовки и обратным холодильником, а следовательно, потребление синтетического слоя потребует баланс между этими двумя!
Фактические точки оптимизации:
1. перевести заменить верхнюю изменение
2. непрозрачность альтернативной видимость, а также translate3d или translateZ этих атрибуты могут создавать слои существования может предотвратить обратный поток
3. Не изменяйте DOM один на один стиль, заранее определенный класс, затем модифицировать DOM имя класса
4. изменить DOM в автономном режиме, например: первый DOM для отображения: ни один (один раз оплавления), а затем изменить в 100 раз, а затем вывести его из шоу, если вам нужно использовать JS для создания мульти-дом бар в стиле вы можете скрыть этот РОМ, а затем установить их
5. не помещайте узлы DOM значения свойства в цикле как цикл в переменной. Браузер имеет механизм буферизации для возвращения , который будет храниться в множестве возврата внутри стека, когда стек полный браузер будет вызывать изменение на единовременное все стиль и обновление стека. Но если вы получаете фактический стиль этих элементов несколько раз, браузера для того , чтобы дать вам точный ответ будет постоянно обновлять стек буфера, что приводит к увеличению страницы рефлюкса. Поэтому для того , чтобы избежать этой проблемы, вы должны использовать переменную для цикла в пробирке.
6. Не используйте макеты таблиц, может быть небольшим, небольшое изменение приведет к повторной компоновке всей таблицы
выбора для достижения скорости анимации 7.
8. Создайте новый слой для анимации, для частой смены ее элементов должны быть добавлены к свойству преобразования, для видео с помощью тега видео
9. включить аппаратное ускорение GPU