349

Как я в десять раз ускорил работу таблицы Google одной строкой CSS

Наша компания использует Google Search Console для проверки статуса индексации и оптимизации видимости наших веб-сайтов. Также в консоли можно проверить, какие внешние веб-сайты ссылаются на вашу страницу. Однажды я просматривал страницу «Top linking sites» и заметил сильное торможение скроллинга. Оно происходило, когда я выбирал отображение большого массива данных (500 строк) вместо стандартных 10 результатов.

Как я в десять раз ускорил работу таблицы Google одной строкой CSS Frontend, Производительность, Тестирование, Скроллинг, CSS, Google, Длиннопост

Раздел «Top linking sites» в Google Search Console, 500 строк на страницу


Я интересуюсь производительностью фронтенда, поэтому не мог удержаться и решил разобраться, в чём дело. В конце концов, Google активно стремится к повышению веб-производительности, поэтому стоит ожидать, что собственные публичные приложения компании будут хорошим эталоном.


Этап 1 — Запись профиля производительности


В подобных случаях невероятно полезны профили производительности: часто бывает достаточно посмотреть отчёт, чтобы понять, почему какой-то элемент имеет низкую производительность. Я открыл DevTools / Performance и начал запись, немного прокрутил список вниз, а затем остановил запись. И вот что я увидел:

Как я в десять раз ускорил работу таблицы Google одной строкой CSS Frontend, Производительность, Тестирование, Скроллинг, CSS, Google, Длиннопост

Профиль производительности скроллинга таблицы данных «Top linking sites», очень низкий FPS


Эти красные треугольники в блоках «Task» дают нам понять, что при скроллинге какие-то операции занимают больше времени, чем это приемлемо. Обычно для достижения идеального скроллинга в 60 FPS мы стремимся, чтобы эти блоки выполнялись менее чем за 16 мс. На показанном выше изображении блоки с красными треугольниками в среднем выполняются примерно 150 мс, что приводит приблизительно к 6–7 FPS. Да ладно, Google, ты ведь способен на большее!


Этап 2 — Разбираемся в причинах


Шкала времени наверху показывает, насколько занят CPU различными видами задач: оранжевый цвет — это JavaScript, фиолетовый — это структура и стили, а зелёный — отрисовка. Здесь всё фиолетовое, то есть проблема не в JavaScript, а в DOM/стилизации:

Как я в десять раз ускорил работу таблицы Google одной строкой CSS Frontend, Производительность, Тестирование, Скроллинг, CSS, Google, Длиннопост

График показывает, что CPU занят обработкой структуры


Это подтверждается каскадным графиком под графиком CPU. В нём используются те же цветовые обозначения и в большинстве записей присутствует много оранжевого и немного меньше фиолетового и зелёного. В нашей записи видно, что время в основном тратится на обновление слоёв, это видно по тексту в фиолетовых блоках, гласящему Update layer tree:

Как я в десять раз ускорил работу таблицы Google одной строкой CSS Frontend, Производительность, Тестирование, Скроллинг, CSS, Google, Длиннопост

На каскадном графике видено, что скроллинг тормозит из-за «Update layer tree»


Слои создаются для скроллящегося контента, переводного контента и так далее. Возможно, их очень много? Давайте выясним!


Этап 3 — Изучаем слои


В Chrome DevTools содержится впечатляющее количество полезных инструментов, но некоторые из них найти довольно сложно. Одним из таких скрытых сокровищ является панель Layers; чтобы найти её, нужно нажать кнопку меню в DevTools и выбрать More tools / Layers. В моём случае это выглядит так:

Как я в десять раз ускорил работу таблицы Google одной строкой CSS Frontend, Производительность, Тестирование, Скроллинг, CSS, Google, Длиннопост

Панель «Layers» в Chrome DevTools; слой заполнен кучей контента


Слоёв не очень много, но есть парочка огромных. Похоже, в них куча контента, и это приводит нас к выводу о том, что используемый Google datagrid не применяет виртуализированный рендеринг. Частично это объясняет причины торможения, но 500 строк — это всё равно не очень много. Должно быть что-то ещё…


Этап 4 — Изучаем DOM


К сожалению, DOM не особо производителен, когда содержит много элементов. Если бы он был производительным, техники виртуализации, реализованные в различных популярных в вебе data grids на JS, не потребовались бы. На данном этапе мы можем предположить, что таблица рендерит много элементов. Создав Live expression в DevTools Console, вы можете пощёлкать по панели элементов и выяснить это. Переключимся на Console, нажмём на кнопку Create live expression (глаз) и введём $0.querySelectorAll('*').length.


Теперь нажимая на панель Elements, мы видим следующее, сначала для всей таблицы:

Как я в десять раз ускорил работу таблицы Google одной строкой CSS Frontend, Производительность, Тестирование, Скроллинг, CSS, Google, Длиннопост

Live expression демонстрирует количество элементов-потомков для выбранного элемента


Как мы видим, для отображения всего 500 строк он создаёт больше 16 тысяч элементов DOM, что немного излишне. Нажав на тело документа, мы увидим следующее:

Как я в десять раз ускорил работу таблицы Google одной строкой CSS Frontend, Производительность, Тестирование, Скроллинг, CSS, Google, Длиннопост

Куча элементов!


Вся страница содержит больше 38 тысяч (!) элементов, а так быстрое приложение не пишут! Очевидно, что ситуацию можно было бы улучшить, использовав data grid с виртуализированным рендерингом, но давайте посмотрим, можно ли сделать что-то меньшими усилиями.


Этап 5 — Улучшаем ситуацию


Учитывая данные в профиле производительности, я подозреваю, что структура всей страницы создаётся при скроллинге таблицы. А создание структуры такого количества элементов — это затратная операция. Если бы был какой-то способ ограничения её влияния…


Хорошие новости — он существует! Я попробовал применить один тайный рецепт, снова поскроллил, и теперь ситуация стала гораздо лучше. И это чётко видно из следующего профиля производительности:

Как я в десять раз ускорил работу таблицы Google одной строкой CSS Frontend, Производительность, Тестирование, Скроллинг, CSS, Google, Длиннопост

Скроллинг сильно улучшился!


Каждый кадр теперь занимает примерно 16 мс, и мы скроллим почти на 60 FPS вместо 6–7. Потрясающе!


Что же я сделал? Просто добавил одну строку CSS в <table> на панели Elements, указав, что таблица не должна влиять на структуру или стили других элементов страницы:

Как я в десять раз ускорил работу таблицы Google одной строкой CSS Frontend, Производительность, Тестирование, Скроллинг, CSS, Google, Длиннопост

Вот так:

Как я в десять раз ускорил работу таблицы Google одной строкой CSS Frontend, Производительность, Тестирование, Скроллинг, CSS, Google, Длиннопост

Вот и всё, десятикратное увеличение скорости благодаря одной строке CSS. Вы можете попробовать «починить» свою Google Search Console.


Подробнее о CSS-свойстве contain можно узнать в MDN.

Автор оригинала: Johan Isaksson

Перевод: https://habr.com/ru/company/timeweb/blog/593003/

Лига программистов

406 постов6.7K подписчиков

Добавить пост

Правила сообщества

Правило 0. begin


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


Правило 2. При публиковании поста ставим корректные теги, передающие смысл публикации.


Правило 3. end.

Подробнее
Лучшие посты за сегодня
7867

Раб найден

Раб найден
7023

Как раньше сортировали мусор

Как раньше сортировали мусор
6361

Такую Воркуту на ютубе вам не покажут. ЧАСТЬ 1

Такую Воркуту на ютубе вам не покажут. ЧАСТЬ 1 Воркута, Фотография, Длиннопост
Такую Воркуту на ютубе вам не покажут. ЧАСТЬ 1 Воркута, Фотография, Длиннопост
Такую Воркуту на ютубе вам не покажут. ЧАСТЬ 1 Воркута, Фотография, Длиннопост
Такую Воркуту на ютубе вам не покажут. ЧАСТЬ 1 Воркута, Фотография, Длиннопост
Такую Воркуту на ютубе вам не покажут. ЧАСТЬ 1 Воркута, Фотография, Длиннопост
Такую Воркуту на ютубе вам не покажут. ЧАСТЬ 1 Воркута, Фотография, Длиннопост
Такую Воркуту на ютубе вам не покажут. ЧАСТЬ 1 Воркута, Фотография, Длиннопост
Такую Воркуту на ютубе вам не покажут. ЧАСТЬ 1 Воркута, Фотография, Длиннопост
Такую Воркуту на ютубе вам не покажут. ЧАСТЬ 1 Воркута, Фотография, Длиннопост
Такую Воркуту на ютубе вам не покажут. ЧАСТЬ 1 Воркута, Фотография, Длиннопост
Такую Воркуту на ютубе вам не покажут. ЧАСТЬ 1 Воркута, Фотография, Длиннопост
Такую Воркуту на ютубе вам не покажут. ЧАСТЬ 1 Воркута, Фотография, Длиннопост
Показать полностью 12
6333

Никто не будет тебе платить за то, что ты просто сидишь и смотришь в окно... говорили они:)

Никто не будет тебе платить за то, что ты просто сидишь и смотришь в окно... говорили они:) Пилот, Канада, Работа мечты, Гражданская авиация, Длиннопост
Никто не будет тебе платить за то, что ты просто сидишь и смотришь в окно... говорили они:) Пилот, Канада, Работа мечты, Гражданская авиация, Длиннопост
Никто не будет тебе платить за то, что ты просто сидишь и смотришь в окно... говорили они:) Пилот, Канада, Работа мечты, Гражданская авиация, Длиннопост
Никто не будет тебе платить за то, что ты просто сидишь и смотришь в окно... говорили они:) Пилот, Канада, Работа мечты, Гражданская авиация, Длиннопост
Никто не будет тебе платить за то, что ты просто сидишь и смотришь в окно... говорили они:) Пилот, Канада, Работа мечты, Гражданская авиация, Длиннопост
Никто не будет тебе платить за то, что ты просто сидишь и смотришь в окно... говорили они:) Пилот, Канада, Работа мечты, Гражданская авиация, Длиннопост
Показать полностью 6
5234

На фоне новостей о падении курса криптовалют

На фоне новостей о падении курса криптовалют Скриншот, Юмор, Криптовалюта, Биткоины, Мат
Показать полностью 1
4258

Справедливый мир

Справедливый мир Чилик, Комиксы, Зарплата
Показать полностью 1
4229

Пожизненная гарантия на электромобиль

Пожизненная гарантия на электромобиль Китай, Китай наизнанку, Электромобиль, Авто, Технологии, Gac, Aion, Длиннопост
Пожизненная гарантия на электромобиль Китай, Китай наизнанку, Электромобиль, Авто, Технологии, Gac, Aion, Длиннопост
Пожизненная гарантия на электромобиль Китай, Китай наизнанку, Электромобиль, Авто, Технологии, Gac, Aion, Длиннопост
Показать полностью 3
3924

Запасной ребёнок

3796

И при этом все заглядывают в твой телефон...

И при этом все заглядывают в твой телефон...
3539

Как обидно

Как обидно
3489

Запрет

Запрет
3421

Родственники бывшими не бывают

3367

О спорах в интернете

О спорах в интернете Перевел сам, Reddit, Комментарии, Спор, Помойка
Показать полностью 1
3326

Неправильный ответ

Неправильный ответ
3318

Иностранка

Иностранка Иностранцы, Свидание, Девушки, Картинка с текстом
Показать полностью 1
3058

Странный поступок

Странный поступок Добрые дела, Благотворительность, Помощь, Неожиданно, Объявление на Авито, Продажа, Скакалка, Длиннопост
Странный поступок Добрые дела, Благотворительность, Помощь, Неожиданно, Объявление на Авито, Продажа, Скакалка, Длиннопост
Странный поступок Добрые дела, Благотворительность, Помощь, Неожиданно, Объявление на Авито, Продажа, Скакалка, Длиннопост
Здравствуйте! Очень хотелось бы хотя бы пару скакалок для девочек 2х групп спортивной гимнастики (рост от 140 до 160 см). Они нам очень помогут в учебно-тренировочном процессе и к подготовке к соревнованиям. Благодарим за подарок и Обещаем тренироваться!
Странный поступок Добрые дела, Благотворительность, Помощь, Неожиданно, Объявление на Авито, Продажа, Скакалка, Длиннопост
Показать полностью 4
2812

Титан

2781

Следуя инструкции

Следуя инструкции
2697

Встретились как-то раз два статистика...

Встретились как-то раз два статистика...
2658

Знакомо...

Знакомо...
Похожие посты закончились. Возможно, вас заинтересуют другие посты по тегам: