Что происходит, когда Загрузка HTML
При загрузке страницы браузер анализирует HTML - код , чтобы получить в DOM дереве DOM дерево содержит все HTML - теги, в том числе дисплей: Нет , чтобы скрыть, а также с такими элементами, как JS динамически добавлены.
Все браузер стиль (определяемый пользователем CSS и пользовательские агенты) в структуре стиля Resolve
построены визуализации дерева после того, как структура и стиль композиций DOM дерева, делают дерево DOM подобное дерево, но большая разница , потому что распознавание образов может сделать дерево, каждый узел визуализация дерево имеет свой собственный стиль, и сделать дерево не содержат скрытые узлы (например, дисплей: ни один из узлов, а также в качестве главного узла), потому что они не будут использоваться для визуализации узлов, и не будет влиять на презентацию, поэтому он не будет включен в визуализации дерева. Мое собственное понимание того , что просто DOM дерево , и мы написали вместе после того, как CSS, делая визуализацию дерева.
Что такое рефлюкс
Когда часть (или все) из-за размером размера элемента, расположения, шкур и других изменений в дереве и потребностях визуализации должны быть восстановлены. Это называется оплавление (оплавления). Каждая страница потребности с обратным холодильником, по крайней мере один раз, когда страница впервые загружается, на этот раз произошло определенное рефлюкс, потому что для сборки визуализации дерева. При рефлюкс, браузер сделает часть дерева, пострадавшими от неоказания и повторно вынести эту часть структуры дерева, после завершения флегмы, браузер будет перекрашивать пораженную часть экрана, процесс становится перерисовывается.
Что перерисовывается
При визуализации дерева некоторые элементы должны быть обновлены атрибуты, но эти атрибуты влияют только на элемент внешнего вида, стиля, и не будет влиять на макет, такие как цвет фона. Это называется называется перерисовки.
Разница:
Они очень разные:
рефлюкс будет вызывать перерисовки и перерисовки не обязательно приведет к рефлюкса. Например: только изменение цвета будет происходить только тогда , когда перевыписки , не вызывая оплавление ,
когда макет страницы и геометрические свойства изменяются потребности с обратным холодильником ,
такой как: добавление или удаление видимого элемента DOM, изменение позиции элемента, изменить размер элемента - поля , заливка, граница, ширина и высота, изменение содержания
Extended:
Браузер помощь
Таким образом , мы можем научиться рисовать пропорцию стоимости высшего кипячении с обратным холодильником, рефлюкс проводить с дерева отображения , сколько узлов необходимо восстановить отношения
из - за существования этих механизмов, браузер поможет нам оптимизировать эти операции, браузер будет поддерживать 1 очереди, все причины рефлюкса в операции очереди перерисовать, и другие операции в очереди на определенный номер или на определенный промежуток времени, браузер будет вымывать очередь, выполнить партию. Это позволит рефлюкс много раз, становится перерисовки перерисовка рефлюкс.
Их оптимизация
Но браузером , чем сами по себе, мы можем изменить некоторые формулировки уменьшить рефлюкс и перерисовывать ,
такие как изменение стиля времени, чтобы не изменить стиль каждого из них, а непосредственно изменить имя класса необходимо использовать cssText , но следует помнить , что есть проблема, будет очищен оригинальный cssText, такие как оригинальный стиль «дисплей: нет;», то после выполнения описанных выше JS, дисплей был удален.
Чтобы решить эту проблему, способ может быть использован cssText накапливается, но не поддерживает IE накоплен, добавьте точку с запятой перед может быть решена.
Там добавить узел, например, когда вы хотите добавить DIV , который имеет три суб-элементы р, если добавить Div р добавить три раза на внутренней, так что триггер рефлюкс и перерисованы много раз, мы можем использовать cloneNode (истина или ложь) , чтобы избежать, когда - то чтобы добавить ко всему хорошему клона снова appened как, есть много других способов не собираются говорить