Переключение между входами происходит медленно в большой таблице HTML

Я создал форму оптового заказа в виде большой HTML-таблицы с большим количеством входных данных. Я заметил, что переключение между числовым вводом и вводом значений во входных данных в этой таблице происходит очень медленно (т. е. когда я нажимаю на ввод, требуется время, чтобы появился курсор; когда я ввожу ввод, требуется время появления персонажа). Есть ли способ убрать отставание без разбивки строк таблицы?

Вы можете просмотреть и поиграть с таблицей здесь (используйте гостевой пароль "braese ").

Скриншот записи производительности Chrome Dev Tools для нажатия внутри одного ввода (я не совсем уверен, что с этим делать): запись производительности Chrome Dev Tools


html performance html-table rendering
person torjinx    schedule 07.11.2017    source источник
comment
где ваша форма оптового заказа?   -  person Emad Emami    schedule 08.11.2017
comment
Я попал на форму оптового заказа. Можете ли вы описать конкретную последовательность ввода, которая вызвала очень медленную обработку? Кроме того, ваша проблема с производительностью связана с обработкой браузером JavaScript или чем-то еще?   -  person JohnH    schedule 08.11.2017
comment
проверить мой ответ ниже. работает как шарм.   -  person Emad Emami    schedule 08.11.2017
comment
@JohnH Это не имеет ничего общего с JavaScript. Когда вы щелкаете внутри любого из числовых полей, курсор начинает мигать с задержкой. Затем, когда вы что-то вводите, возникает задержка перед появлением каждого символа в поле ввода.   -  person torjinx    schedule 08.11.2017

Ответы (2)


arrow_upward
2
arrow_downward

Я еще немного покопался и протестировал, и оказалось, что задержка (обновление дерева слоев) при нажатии / вводе ввода является проблемой только в Chrome. Этот ответ на другой вопрос указывает на проблемы с Chrome, начиная с версии 46. Жаль, что такой популярный браузер разрешил проблему как это, чтобы продолжаться в течение 2+ лет. Нам придется разбить нашу форму заказа на страницы, так как Chrome так популярен среди клиентов нашего клиента.

person torjinx    schedule 14.11.2017

arrow_upward
0
arrow_downward

Вау, мой хром чуть не разбился :) Это ваши стили. Вы вызываете создание слоя каждый раз, когда применяете преобразование перевода. Проверьте меню «Слои» в инструментах Chrome Dev; Проверьте, работает ли он лучше - только таблица :)

Также заказывайте свои стили и сценарии! - первые стили после этого скрипты

Ваше здоровье!

person Vasil Gerginski    schedule 07.11.2017
comment
Вы вызываете создание слоя каждый раз, когда применяете преобразование перевода - где я применяю преобразование перевода? Не применяется к входам. Проблема в том, что когда я нажимаю на один из входов, появляется задержка перед появлением курсора, а когда я что-то набираю во вводе, возникает задержка перед появлением символа. Проверьте, работает ли он лучше - только таблица - вы имеете в виду проверить его после удаления преобразования перевода? Что вы имеете в виду под только таблицей? сначала стили после этого скрипты - мои скрипты должны загружаться как раз перед ‹/body›... что вы увидели, что заставляет вас думать иначе? - person torjinx; 08.11.2017
comment
‹/div› ‹!-- ПОЛЬЗОВАТЕЛЬСКИЙ JAVASCRIPT --› ‹script defer src=//cdn.shopify.com/s/files/1/2143/7693/t/2/assets/wholesale-form.js?6937108773544854703› ‹/script› ‹!-- ЗАГРУЗИТЬ ПОЛЬЗОВАТЕЛЬСКИЕ СТИЛИ CSS --› ‹link rel=stylesheet type=text/css href=//cdn.shopify.com/s/files/1/2143/7693/t/2/assets /page.wholesale-form.scss?6937108773544854703 /› ‹/body› - person Vasil Gerginski; 10.11.2017
comment
Также означает только таблица. Попробуйте открыть медленную страницу. Откройте Инструменты разработчика -> Сеть -> F5, чтобы обновить. Найдите свою тему.scss cdn.shopify.com/s/files/1/2143/7693/t/2/assets/theme.scss.css?... Щелкните правой кнопкой мыши -> Заблокировать URL-адрес запроса F5, чтобы обновить снова, теперь вы видите страницу с ОГРОМНОЙ таблицей -> Обратите внимание на поля ввода Нет задержки! Ваше здоровье - person Vasil Gerginski; 10.11.2017
comment
Вы правы, блокировка theme.scss.css значительно ускоряет форму. Вопрос в том, какие правила CSS приводили к тому, что обновление дерева слоев занимало так много времени? (см. скриншот моих Dev Tools выше) - person torjinx; 11.11.2017
comment
Я должен делать все за тебя? .page-container {-ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); преобразование: translate3d(0, 0, 0); } - person Vasil Gerginski; 13.11.2017
comment
Не нужно быть грубым. Я задаю свой вопрос на StackOverflow, потому что не знаю, в чем причина проблемы. Я не знаю, как вы пришли к такому выводу, но отключение этих правил CSS не ускоряет работу формы для меня. - person torjinx; 14.11.2017
comment
не грубо извините если так прозвучало - сработало? - person Vasil Gerginski; 14.11.2017
comment
Не волнуйтесь. Нет, как я уже сказал, отключение этих правил CSS не ускорит для меня работу формы. Спасибо за попытку. :) Думаю, я нашел ответ - см. принятый ответ. - person torjinx; 16.11.2017