2011-12-19 4 views
4

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

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

+0

Изменения в CSS или JavaScript были бы наиболее вероятными исправлениями. Вы должны опубликовать их, чтобы мы могли определить, какую работу может потребовать Chrome. – Jacob

+0

Вы пытались уменьшить размер элемента 'select', до 10 (или что-то еще)' options', чтобы узнать, является ли это виновником? Также: разместите свои функции JavaScript. –

+0

Удаление 'select' целиком не имеет никакого эффекта. Для этой страницы достаточно Javascript-кода (приблизительно 600 строк), поэтому, к сожалению, для меня нет простого способа опубликовать его здесь. –

ответ

4

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