Пересчет события стиля в Chrome занимает примерно 2 секунды

Я работаю над веб-приложением, которое внезапно перестало отвечать в Google Chrome. Похоже, что ни в одном другом браузере такой проблемы нет (я тестировал Firefox и Safari). Например, при нажатии на текстовое поле ввода проходит от 3 до 5 секунд между нажатием и получением фокуса элементом. Такое же поведение происходит и при установке флажка. Пара замечаний: на этой странице есть раскрывающийся список с примерно 150 вариантами, а также таблица с 10 строками. В остальном, ничего необычного.

Я открыл инспектор кода Chrome и использовал вкладку «Временная шкала», чтобы посмотреть, что происходит. Оказывается, основная часть задержки связана с событием «Пересчитать стиль», которое занимает около 2 секунд. Это событие произошло до события mousedown. Краткий поиск этого шага в Интернете мало что показал. Кто-нибудь знает что-нибудь об этом конкретном этапе рендеринга и что можно сделать, чтобы улучшить его производительность?


person Jordan Brown    schedule 19.12.2011    source источник
comment
Наиболее вероятными исправлениями будут изменения в вашем CSS или JavaScript. Вы должны опубликовать их, чтобы мы могли определить, какую работу Chrome может выполнять.   -  person Jacob    schedule 19.12.2011
comment
Пробовали ли вы уменьшить размер элемента select до 10 (или сколько угодно) options, чтобы проверить, виноват ли он? Также: опубликуйте свои функции JavaScript.   -  person David says reinstate Monica    schedule 19.12.2011
comment
Полное удаление select не дает никакого эффекта. Для этой страницы достаточно кода Javascript (примерно 600 строк), поэтому, к сожалению, я не могу разместить его здесь.   -  person Jordan Brown    schedule 19.12.2011


Ответы (1)


Оказывается, на странице, которую я проглядел, был скрытый диалог, внутри которого было около 2000 элементов li. Я предполагаю, что Firefox и Safari справляются с огромным количеством элементов лучше, чем Chrome.

person Jordan Brown    schedule 19.12.2011