Какие действия и события заставляют браузер перекрашивать весь видовой экран?

Question

Я пытаюсь реализовать wmd-редактор из репозитория кода Google (например, тот, который используется здесь в stackoverflow), и я столкнулся с проблемой.

Когда вы набираете текстовую область, она запускает две операции рисования в браузере. Один для перерисовки самой текстовой области, а второй - для панели предварительного просмотра. Вы можете наблюдать, как это происходит в стеке потока, открыв Chrome Инспектор и используя вкладку временной шкалы при вводе текста в поле вопроса.

Но на моей странице браузер перерисовывает весь видовой экран, когда ему приходится выполнять эти операции рисования. И это занимает гораздо больше времени: около 100 мсек для каждой операции рисования на моей странице по сравнению с 1 мсек в стеке.

В моем тестировании это похоже на css ... Я могу воссоздать это поведение на странице примера wmd-new, удалив все стили.

Моя страница еще не общедоступна, но, надеюсь, я могу спросить в общем виде ... что заставит браузер перерисовать весь видовой экран при смене dom, вместо того, чтобы просто перекрасить эту часть dom?

Вид того, о чем я здесь говорю.

Answer 1

AHA!* 1001 Ай * ядрено -HA!(простите за энтузиазм)

Проблема в том, что я использовал свойство box-shadow css для создания рамки моей страницы.Перекраска / перерисовка содержимого занимает больше времени, когда браузеру необходимо рассчитать эту тень при каждом изменении (~ 100 мс против ~ 1 мс).И при использовании wmd-редактора вы обновляете dom при каждом нажатии клавиши, так что разница увеличивается.И эффект наиболее преувеличен, когда браузер развернут, поскольку он пересчитывает весь видовой экран.

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

Вы можете увидеть, что я имею в виду на этой странице примера .Откройте его в Firefox, разверните страницу и начните печатать.Теперь используйте firebug, чтобы удалить свойство box-shadow для элемента body, закройте firebug и попробуйте снова.Большая разница.

Спасибо Бальфе за его комментарий, который был замечен.

Answer 2

Проверьте эту презентацию, около слайда 70 и следующих. Они немного объясняют, что может вызвать перекраску и перекраску.

http://www.slideshare.net/nzakas/high-performance-javascript-webdirections-usa-2010

Без конкретного кода / CSS трудно ответить, но я могу сказать что-то общее, например, если измененный фрагмент DOM влияет на другие элементы на странице:)

Также обратите внимание, что в стеке потока WMD при вводе новой строки это также вызывает перерисовку всего окна просмотра. Так, может, это как-то связано с тем, что ваша область WYSIWYG не имеет четко определенной ширины и высоты? Я предполагаю, что если вы дадите им ширину и высоту, они не будут влиять на другие элементы на странице