Поговорим о фиксированных столбцах табличного компонента

Посмотреть исходный текст

На существующих веб-страницах таблицы обычно используются для отображения статистических данных, записей списков и другой информации. Но когда таблица содержит много информации, которую необходимо перечислить и отобразить, в таблицу часто добавляют полосы прокрутки, чтобы отобразить больше данных. Я вдруг подумал об изучении табличной составляющей, потому что недавно столкнулся с проблемой отображения большого количества табличных данных, и нашел несколько лучших решений.На данный момент наиболее известными мне должны бытьНастольный столик в муравьином дизайне. Он вполне может удовлетворить личные потребности, зафиксировав передние и задние столбцы таблицы и прокрутив посередине.Такое взаимодействие очень удобно для отображения большого количества табличных данных и ключевой информации.Поговорим о большом количестве данных и столбцы Оптимизация отображения таблицы.

Функция формы

Прежде всего, вам необходимо иметь общее представление об общей функции стола. Инструкция по использованию формы на Ant-design следующая:

Когда требуется отобразить большой объем структурированных данных, когда над данными необходимо выполнять сложные действия, такие как сортировка, поиск, разбиение по страницам, пользовательские операции и т. д.
Вообще говоря, основная цель таблицы — отображать данные, а также некоторые другие функции для сортировки и фильтрации данных.

дизайн стола

Таблица обычно включает в себя верхний и нижний колонтитулы, содержимое соответствует определенным строкам и столбцам, а каждые данные занимают ячейку, как показано на следующем рисунке.

По атрибуту тега таблицы в HTML разделяем таблицу:

• заголовок
• нижний колонтитул
• Ряд
• Список
• Клетка

Соответствующие часто используемые функциональные элементы включают в себя:

• отбор и др.
• Фильтровать и сортировать
• Развернуть данные
• объединение строк и столбцов таблицы
• данные дерева
• Фиксированный верхний и нижний колонтитулы
• фиксированный столбец
• Фиксированные заголовки и столбцы
• редактировать
• …

Оптимизация взаимодействия таблиц для больших объемов данных

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

Полосы прокрутки часто слишком громоздки и визуально громоздки, поэтому современные операционные системы начали упрощать их внешний вид, скрывая их, когда пользователь не взаимодействует с прокручиваемыми элементами. («Секрет CSS» 34 — Советы по полосе прокрутки)

Для таблиц с большими объемами данных лучшая оптимизация взаимодействия с пользователем в основном включает следующие два момента:

1. Более элегантный режим взаимодействия с пользователем — тени для отображения большего количества контента Это упоминается в CSS Reveal: «Дизайнеры взаимодействия с пользователем Google Reader нашли очень элегантный способ сделать подсказку похожей на подсказку полосы прокрутки: когда контейнер боковой панели содержит больше контента, в верхней или нижней части окна появляется легкая тень. контейнер". Для таблиц с большими объемами данных мы можем аналогичным образом подсказать пользователю, что таблица содержит больше содержимого и нуждается в прокрутке.
2. Отображение ключевой информации — фиксированные столбцы и заголовки Для табличной информации некоторая информация часто важна и должна быть четко видна с первого взгляда, а не прокручиваться, чтобы увидеть информацию, необходимую пользователю. Фиксация ключевых столбцов таблицы и размещение второстепенной информации в прокручиваемых контейнерах может подчеркнуть важность табличной информации. В то же время пользователям удобно лучше взаимодействовать в текущем окне, не требуя дополнительных операций.

Для оптимизации двух вышеупомянутых взаимодействийAnt Design - A UI Design LanguageПриведен хороший пример.

оптимизированная реализация

Для взаимодействия табличных данных между фиксированными заголовками и столбцами существующие библиотеки компонентов имеют соответствующие реализации.

• Реагировать:Ant Design - A UI Design Language
• вид:Element,iView - A high quality UI Toolkit based on Vue.js
• Regular: Формы - нек-уй

Итак, как реализовать интерактивную оптимизацию приведенной выше таблицы, учитывая реализацию трех вышеуказанных библиотек компонентов для табличного компонента, она включает следующие аспекты (пример кода в следующей статье реализован с использованием vue).

макет

При рассмотрении фиксированных заголовков и столбцов таблицы первое, что нам нужно рассмотреть, — это то, как расположить таблицу так, чтобы она удовлетворяла требованиям прокрутки вверх и вниз, а также влево и вправо.

Как показано на рисунке выше, секция с синей рамкой делит таблицу на фиксированные заголовки и содержимое, а область содержимого можно прокручивать вверх и вниз; секция с красной рамкой делит таблицу на фиксированные столбцы и средние столбцы, а средняя секция может прокручиваться влево и вправо. Из принципиальной схемы видно, что часть содержимого двух частей пересекается. С точки зрения макета, основные методы реализации следующие:

1. Если макет прокручивается влево и вправо, вся таблица делится на левую, среднюю и правую части, а переполнение в середине прокручивается влево и вправо. Тогда, если тело прокручивается вверх и вниз после фиксации заголовка таблицы одновременно, необходимо следить за прокруткой вверх и вниз средней части js события, и прокручивать тело левой и правой таблиц в то же время. ВидетьПример макета с прокруткой таблицы
2. Если макет прокручивается вверх и вниз, вся таблица будет разделена на две части, thead и tbody, а содержимое будет прокручиваться после переполнения. Затем, если вам нужно одновременно прокручивать влево и вправо в средней части, вам нужно контролировать середину объявления для прокрутки, когда tbody прокручивается влево и вправо, и вам нужен js для отслеживания события прокрутки tbody для прокрутки объявления. ВидетьПример макета с прокруткой таблицы

---

Оба этих двух метода должны прослушивать событие прокрутки через js, чтобы удовлетворить событие прокрутки другой части.Демонстрация примера относительно проста. Сравнивая эти два метода, можно сказать, что реализация похожа, а реализация существующей библиотеки компонентов — это первый метод. Общие черты и преимущества использования этого типа макета заключаются в следующем:

• Разделите заголовок и контент на две части для удобства контроля фиксации заголовка.
• Более выгодно управлять прокруткой в ​​другом направлении через js, чем полностью контролировать прокрутку через js.
• Важно отметить, чтоТаблица среднего содержимого должна содержать два фиксированных столбца слева и справа, а не быть полностью разделенной., левый и правый фиксированные столбцы просто перезаписывают существующие данные с фиксированным макетом. Преимущество этого заключается в том, что при прокрутке средней части полоса прокрутки принадлежит всей таблице таблицы, а не средней части, что дает пользователю визуальный интерактивный опыт прокрутки всей таблицы, что также обеспечивает полную прокрутку за один раз. направление.
• Макет с прокруткой влево и вправо должен контролировать левый фиксированный столбец и правый фиксированный столбец для прокрутки одновременно с прокруткой тела.По сравнению с макетом с прокруткой вверх и вниз, который должен контролировать только прокрутку влево и вправо содержание заголовка, один элемент управления вычислениями уменьшен.Я думал, что в случае большого объема данных макет 2 с большей вероятностью будет иметь джиттер, чем макет 1, но в тесте данных на 5000 строк (тестировался только хром) было обнаружено, что разница между два при прокрутке.

---

Исправлено выравнивание строк и столбцов

Поскольку метод фиксации заголовка и столбца таблицы использует метод разделения таблицы, фиксированная часть таблицы может не соответствовать остальной части. В то же время, когда содержимое таблицы не фиксировано, ее расположение относительно непредсказуемо, и браузер часто подстраивает ширину столбца таблицы в соответствии с содержимым.

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

::Строки таблицы не выровнены::

::Столбцы таблицы не выровнены::

Для обоих случаев решение следующее:

1. Столбцы не выровнены, и каждому столбцу таблицы задана фиксированная ширина, а таблица управляется методом фиксированной ширины.

• Метод установки макета таблицы — table-layout: fixed. Значение по умолчанию макета таблицы — auto, их поведение известно как алгоритм автоматического макета таблицы. Макет таблицы способствует не только фиксированному быстрому рендерингу страниц, но и делает таблицу более управляемой. Конкретные характеристики см.:table-layout - CSS | MDN

При «фиксированном» макете вся таблица может быть проанализирована и отображена после загрузки ее первой строки. Это может ускорить рендеринг для «автоматического» автоматического макета, но содержимое последующих ячеек не будет адаптироваться к текущей ширине столбца. Любая ячейка с переполненным содержимым может использовать свойство переполнения, чтобы контролировать, разрешено ли содержимое переполняться.

• Определяет ширину каждого столбца в таблице. Есть два способа установить ширину: один — указать ширину для каждого th, а другой — использовать атрибут col..Условно говоря, метод col немного элегантнее, чем установка ширины для каждого th. Мы также можем пройтидля группировки столбцов в таблице, чтобы их можно было отформатировать. Однако следует отметить, что от многих атрибутов col и colgroup в современных браузерах отказались.В настоящее время только два атрибута, span и width, которые поддерживаются более полно, используются для указания количества столбцов, которые должна охватывать группа столбцов. .и ширина столбца.
• После установки ширины и макета таблицы, если ширина всей таблицы больше, чем ширина, установленная для всех столбцов, и для всех столбцов задана ширина, избыточная ширина будет равномерно распределена в соответствии с установленным соотношением ширины столбца. Если установлены только некоторые из столбцов, они равномерно распределяются на все столбцы с неопределенной шириной, если вся ширина таблицы меньше установленной ширины всех столбцов, и все столбцы имеют заданную ширину, то таблица будет растянута по столбцам. Если заданы только некоторые столбцы, столбцы без ширины будут сжаты.

2. Есть три способа добиться смещения рядов.

• Если данные, отображаемые в таблице, не обязательно должны отображаться полностью, вы можете указать высоту строки таблицы.При переполнении данных таблицы автоматически появится многоточие, чтобы предотвратить смещение левой и правой строк таблицы. Этот метод подходит для отображения табличных данных с фиксированным содержимым и известными данными.
• Для двух таблиц с левым и правым фиксированными столбцами не только данные фиксированных столбцов, но и все данные таблицы. Таким образом, высота строки таблицы основывается на данных всей строки таблицы, а левая, средняя и правая данные остаются полностью согласованными, и не будет смещения строк, вызванного несогласованными высотами левой и правой строк. Этот метод приведет к большему количеству избыточных данных в html, что не способствует семантике.
• При рисовании высота строки среднего тела таблицы вычисляется один раз, а высота строки таблицы левого и правого фиксированных столбцов задается в соответствии с высотой средней строки (метод реализации Ant-дизайна). Таким образом уменьшаются избыточные данные, но при первоначальном рендеринге js это может занять больше времени.

Левая и правая тени

Добавление легкой тени к левому и правому фиксированным столбцам таблицы может дать пользователям хороший намек на то, что «здесь больше данных».В то же время тень также делает данные фиксированного столбца более многоуровневыми. Например, добавив box-shadow к левому и правому фиксированным столбцам, можно усилить эффект тени, а CSS реализуется следующим образом:

.table-fixed-left-scroll {
  box-shadow: 6px 0 6px -4px rgba(0,0,0,.2);
}
.table-fixed-right-scroll {
  box-shadow: -6px 0 6px -4px rgba(0,0,0,.2);
}

Из большинства существующих библиотек компонентов реализована только тень, при прокрутке тень всегда остается в одном и том же положении. Условно говоря, лучший эффект взаимодействия заключается в том, что, как и в таблице Ant-дизайна, тень будет появляться автоматически при прокрутке, так что подсказка для пользователя будет более дружественной, и можно добавить анимацию перехода, чтобы сделать левый и появляются правильные тени более естественные.

Метод реализацииПрослушайте событие прокрутки области тела и оцените левую и правую тени, определив, переполнены ли scrollLeft и вся область тела по ширине. В то же время следует отметить, что при изменении размеров окна левую и правую тени необходимо пересчитывать. Для того, чтобы уменьшить расчет ширины переполнения всей области во время события прокрутки (вычисление clientWidth увеличит перестановку браузера), после успешной загрузки всего окна и изменения размера необходимо выполнить расчет окна и кеша результат расчета.

/* onscroll */
handleBodyScroll() {
      this.scrollValue = this.$refs.tableScroll.scrollLeft;
      this.hasRight = this.scrollValue - this.leftScroll < 0;
      this.hasLeft = this.scrollValue > 0;
},
/* onload & onresize */
setTableShadow() {
      this.leftScroll = this.$refs.tableContent.clientWidth - this.$refs.tableScroll.clientWidth;
      this.handleBodyScroll();
}

Дальнейшие попытки оптимизации

Для таблиц, требующих фиксированных заголовков и столбцов таблицы, объем данных часто бывает относительно большим. Мы можем предпринять дальнейшие попытки оптимизации существующей реализации.

Используйте transfrom вместо установки scrollLeft

рассмотреть возможностьБраузерная перекомпоновка и перерисовка, в общем случае scrollLeft вызовет перекомпоновку, а transfrom — просто перерисовку, и мы можем использовать transform3D, чтобы задействовать GPU для ускорения рендеринга браузера. Итак, можно ли рассмотреть возможность использования преобразования для замены параметра scrollLeft в событии прокрутки? существуетReact реализует красивую таблицу | Блог фронтенд-команды HYPERSВ этой статье упоминается, что реализация оптимизированного компонента таблицы использует следующие две точки для оптимизации проблемы дрожания, вызванной частотой срабатывания onScroll и несоответствием скорости рендеринга.Его решение заключается в следующем:

Используйте transform: translate3D вместо top и left , потому что top/left вызовет перекомпоновку, а translate будет генерировать только перерисовку, и производительность будет выше.Кроме того, translate3D - это 3D, который будет ускорен GPU в мобильных браузерах.

Частота срабатывания onScroll и скорость рендеринга могут не совпадать, поэтому лучше реализовать полосу прокрутки самостоятельно, слушать событие onWheel в теле таблицы и слушать событие onMouse* на полосе прокрутки. При самостоятельной реализации полосы прокрутки следует учитывать, что на хроме Mac функции предыдущей и следующей страниц браузера будут запускаться при скольжении влево и вправо, поэтому всплывающее окно здесь должно обрабатываться хорошо (я хотел найти одно колесо прокрутки с открытым исходным кодом, обнаружил, что есть много компонентов, с которыми не разобрались, поэтому написал его сам).

Чтобы проверить сравнение фактической эффективности преобразования и прокрутки, предыдущая демонстрация была протестирована на дрожание прокрутки с использованием 5000 строк данных, и было обнаружено, что повышение эффективности, соответствующее двум методам компоновки, не было очевидным.

:: Левая и правая раскладка - Прокрутка ::

::Левый и правый макет-transform3D::

:: прокрутка вверх и вниз по макету ::

::up-down-layout-transform3D::

Из сравнения приведенных выше четырех рисунков видно, что разрыв в производительности между tranfrom3D и прокруткой не очень велик. Мы также можем пройтиjsperf Проводится анализ производительности двух, и получается тот же результат.Влияние transfrom3D и scroll на производительность прокрутки не сильно отличаетсяэтот вывод.

Уменьшить манипуляции с домом в событии прокрутки

Демонстрация в этой статье — это просто простой пример.Чтобы лучше сравнить производительность прокрутки таблицы, я протестировал прокрутку таблицы до 5000 строк данных в таблицах двух компонентных библиотек, iview и element, и обнаружил, что обе имеют определенную степень джиттера (у всех есть обработка против дрожания, что недостаточно очевидно). :: iview-table-scroll встряхнуть ::

::элемент-таблица-прокрутки дрожание::

Глядя на исходный код двух компонентных библиотек, можно обнаружить, что обе они выполняют более логические суждения в событии прокрутки.Например, когда iview оценивает существование столбца в прокрутке, каждый раз, когда выполняется рендеринг, Столбец операции переписан Расчет рендеринга, когда элемент прокручивается, оценивается и рассчитывается прокрутка влево, вправо, вверх и вниз, что также влияет на производительность прокрутки. Из-за высокой частоты триггера onscroll,Минимизируйте расчет и работу dom в событии прокрутки, уменьшая переформатирование и перерисовку браузера.

Оптимизировать события прокрутки

Для таких часто инициируемых событий, как onscroll, onresize и т. д., если событие включает в себя множество вычислений положения, манипуляции с DOM, перерисовку элементов и т. д., и эти задачи не могут быть выполнены до того, как будет запущено следующее событие прокрутки, это приведет к тому, что браузер бросить кадр. Кроме того, прокрутка мыши пользователя часто является непрерывной, и событие прокрутки будет продолжать запускаться, что приводит к увеличению количества пропущенных кадров, увеличению использования ЦП браузера и ухудшению взаимодействия с пользователем.

Для пользователей плавная прокрутка часто может принести хорошие интерактивные эффекты.Есть три способа оптимизировать события прокрутки:

• Debouncing: объединение нескольких операций в одну, то есть указание количества запусков события в течение определенного периода времени.
• Регулирование: Операция может быть выполнена только один раз в течение определенного периода времени, а следующая операция может быть выполнена только по истечении указанного вами интервала времени с момента выполнения последней операции. Этот метод часто используется при оптимизации ленивой загрузки изображений.
• Используйте rAF (requestAnimationFrame) для запуска событий прокрутки: перед перерисовкой страницы уведомите браузер, чтобы он что-то сделал. Вообще говоря, в существующих табличных компонентах первый способ обычно используется для обработки события прокрутки, и путем ограничения количества вхождений в течение определенного периода времени получается запрос на прокрутку, вызванный быстрой операцией пользователя.

Теневое самовнушение с использованием чистого CSS

Раздел 34 книги "Секрет CSS"подсказка прокруткиСредний (о конкретных статьях см.:Pure CSS scrolling shadows with background-attachment: local | Lea Verou), этот метод дорабатывается. Принцип его заключается в получении теней путем задания двух слоев фона, либо путем задания псевдоэлементов и позиционирования. Метод реализуется следующим образом:

• Два фона: play.csssecrets.io/scrolling-hints
• Псевдоэлементы и позиционирование:Scrolling shadowsДля компонента таблицы реализуйте css следующим образом:

.tablebackground {
  background: linear-gradient(white 15px, hsla(0,0%,100%,1)) 100px 0 / 15px 300px,
              radial-gradient(at left, rgba(0,0,0,.2), transparent 80%) 100px 0 / 10px 200px,
              linear-gradient(to left, white 15px, hsla(0,0%,100%,1)) right / 110px 300px,
              radial-gradient(at right, rgba(0,0,0,.2), transparent 70%) 390px / 15px 300px;
  background-repeat: no-repeat;
  background-attachment: local, scroll, local, scroll;
}

Принцип реализациипройти черезbackground-attachmentЭто свойство содержит три значения fixed, local и scroll.

fixed: это ключевое слово указывает, что фон фиксирован по отношению к области просмотра. Даже если у элемента есть механизм прокрутки, фон не будет прокручиваться вместе с содержимым элемента.

local: это ключевое слово указывает, что фон фиксирован по отношению к содержимому элемента. Если элемент имеет механизм прокрутки, фон будет прокручиваться вместе с содержимым элемента, а область рисования фона и область позиционирования относятся к прокручиваемой области, а не к границе, которая их содержит.

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

Конкретная реализация: при построении двух слоев фона один слой используется для создания теней, используя атрибут прокрутки, значения по умолчанию и содержимое остаются на месте; другой слой представляет собой белый прямоугольник, используемый для блокировки теней, используя локальный атрибут, относительно прокручиваемой области позиционируется так, что она закрывает тень при прокрутке в крайнее левое или правое положение и прокручивается вместе с ней, обнажая тень. В то же время использование слоя маски линейного градиента может сделать тень более гладкой при прокрутке.Пожалуйста, посмотрите демонстрацию для конкретного эффекта реализации.Чистый css реализует автоматическое приглашение тени таблицы.

Эта реализация на чистом CSS позволяет избежать работы узлов DOM через события мониторинга js и лучше оптимизирует производительность, но с этим методом записи все еще есть некоторые проблемы:

1. Когда мы устанавливаем маскирующий слой для таблицы, он начинается с фиксированного положения слева.Если содержимое средней таблицы составляет ширину всей таблицы, то нам нужно указать начальное положение тени, то есть нам нужно знать фиксированный столбец слева и фиксированный столбец справа Ширина, больше подходит для таблиц с известной фиксированной шириной столбца.
2. Вы можете рассмотреть возможность установки размера окна посередине только для табличной части нефиксированного столбца, чтобы вам не нужно было вычислять ширину фиксированного столбца, но встроенная полоса прокрутки браузера не могла покрыть всю таблицу .

Суммировать

Для фиксированных заголовка таблицы и столбца при реализации необходимо обратить внимание на следующие моменты:

1. Когда есть заголовки таблицы и фиксированные столбцы, макет таблицы необходимо реорганизовать.Как правило, одно направление фиксируется для переполнения, а другое направление прокручивается синхронно, прослушивая событие onscroll.
2. Когда вам нужно исправить заголовок и столбцы таблицы, обратите особое внимание на ширину каждого столбца и высоту каждой строки таблицы.Вы можете использовать некоторые методы, чтобы уменьшить рассогласование, вызванное неопределенностью широкого и узкого экрана и данные.
3. Добавление автоматических теневых подсказок для левого и правого фиксированных столбцов может повысить интерактивность пользователей. Этого можно добиться, прослушивая событие прокрутки, используя для этого js или устанавливая фоновое изображение с помощью чистого CSS. Условно говоря, реализация на чистом CSS сокращает операции dom, но необходимо обращать внимание на положение фоновой тени в сочетании с компоновкой таблицы.
4. Минимизируйте операции над узлом dom в событии прокрутки и упростите операции в прокрутке.
5. Используйте определенные методы защиты от сотрясений или регулирования, чтобы лучше сгладить эффект прокрутки и повысить производительность страницы.
6. Фиксированные заголовки и столбцы таблиц обычно используются для табличного отображения больших данных.При написании общих компонентов таблиц необходимо обращать внимание на общие сценарии использования таблиц.Не следует рассматривать какие-то крайние случаи, чтобы потерять размер из-за малого размера, и более следует уделить внимание совместимым заголовкам, и столбец может быть исправлен.

использованная литература

• Ant-desing
• iView
• Element
• Реагируйте, чтобы получить красивую таблицу
• Pure CSS scrolling shadows with background-attachment: local | Lea Verou
• How to make faster scroll effects?
• Высокопроизводительная прокрутка и оптимизация рендеринга страниц
• Пример анализа устранения дребезга и регулирования

by Дэн Джин