2015-12-23 3 views
3

Интересно, если есть разница между 1.) 10000 строку таблицы, которая видна 2.) 10000 TableRow который скрыт с помощью дисплея: нетслишком много элементов в HTML может повлиять на производительность страницы?

то, что я хочу знать, что. если на странице видны все 10000 строк, может ли это вызвать прокрутку страницы?

, но если я спрячу, например, 9000 из них. может ли это уменьшить отставание? Спасибо, парни.

+1

Не ответ, но наблюдение, если вам нужно загрузить 10 000 строк сразу, вы, вероятно, ошибаетесь. –

+0

Возможно, вы должны сделать какую-то форму разбивки на страницы. Как сказал Люк, вы, вероятно, ошибаетесь. Вы также можете легко проверить это для себя, потому что, если вы знаете, как сделать одну строку, вы можете сделать 10 000 с циклом for. –

+0

Ваш вопрос в широком. Недостаточно информации, чтобы иметь возможность ответить на ваш вопрос. Это простая таблица с тремя столбцами с 5-значными номерами в каждой ячейке, тогда ответ заключается в том, что это не имеет значения, кроме начальной загрузки при использовании ПК. Другой конец шкалы состоит в том, что в таблице говорилось 40 колонок шириной, и каждая ячейка имела уникальный код JavaScript для генерации графического содержимого каждой ячейки, я бы предположил, что это может улучшить прокрутку, спрятав большую часть ячеек. И что вы сделали, чтобы узнать, чтобы другие не тратили время? – Trevor

ответ

1

Вообще display: none; сохранит браузер некоторые работы.

Браузер начнется путем анализа вашего HTML и создания так называемой DOM (объектной модели документа), когда будет получен весь CSS, он продолжит и построит CSSOM (модель объекта CSS). Обе эти комбинации будут давать дерево рендеринга.

С деревом рендеринга браузер выполнит шаг макета (решая, где каждый элемент будет отображаться на экране и насколько он будет большой), а затем нарисуйте страницу на экране.

При объединении DOM и CSSOM, чтобы стать деревом рендеринга, браузер отбрасывает все поддеревья display: none; и, таким образом, имеет меньше работы для макета и шага рисования.

1

Просто столкнулся с этим вопросом и хотел положить мои 2 цента, а

  • , хотя современные браузеры становятся умнее на быстрый рендеринг и машины становятся все быстрее, лучшая практика до сих пор стоят, что не слишком много строк таблицы. Используйте разбивку на страницы.
  • Это также зависит от того, как вы визуализируете свои строки в таблице. Если вы используете JS для , то это окажет негативное влияние на прокрутку . Есть очень хорошие js templating solutions, вы можете минимизировать накладные расходы js. Назовите меня старой школой, но я скорее использую меньше js-рендеринга на клиенте.