Ускоряем WebGL/Three.js с помощью OffscreenCanvas и веб-воркеров

[customtema]

добавил вращающуюся 3D-землю на свой сайт

24TTL?

библиотека добавляет

CDN?

я сделал маленькую JS-библиотеку

Спасибо! И за пост тоже!

[Iskin]

24TTL?

А что это такое?

CDN?

CDN никак не решает проблему того, что 500 КБ надо откомпилировать и запустить. 3,8 секунд нагрузки на ЦПУ и 0,5 секунд фриза из отчёта Google Lighthouse «до» — это как раз время запуска Three.js.

Статья как раз про решение вопроса запуска JS, а не его скачивания.

[trawl]

Просмотров статьи всего 251, а сайт уже не открывается :(

[Iskin]

Включи VPN. Роскомнадзор забанил Netlify.

[Taraflex]

Нам потребуется отдельный JS-файл для веб-воркера — создадим отдельный файл сборки в Вебпаке или Parcel:

entry: {
'app': './src/app.js',
+ 'webgl-worker': './src/webgl-worker.js'
}

Webpack добавляет различный рантайм для target:web и target:webworker, для webpack следует возвратить массив конфигов с разными target для app и webgl-worker.

[majestik]

С OffscreenCanvas я победил фризы на моём сайте и получил 100% очков в Google Lighthouse.

Получается фризы исчезли только в Chrome, а в остальных осталось как прежде?

[Iskin]

Ага (но на мобилке WebGL я убрал, чтобы не было фриза)

[Finesse]

Почему оценка Lighthouse выросла, если объём работы для браузера не уменьшился? Потому что Lighthouse учитывает только начальную загрузку страницы и отрисовка Земли была перенесена в вебворкер, чтобы не блокировать отрисовку основного сайта? Почему бы тогда просто не перенести отрисовку Земли в обработчик `window.onload`, учитывая, что на сайте больше ничего не происходит?

[Iskin]

Почему оценка Lighthouse выросла, если объём работы для браузера не уменьшился?

Lighthouse оценивает сумарное время на загрузку сайта — установка соединения + загрузка файла + компиляция/парсинг файла + время выолнения JS. Кроме того, он учитывает много других параметров:

• Время на которое страница фризиться (UI не обновляется из-за долгого беспрерывного выполнения UI) — 0,5 секунд
• Время через которое ЦПУ перестаёт быть загруженным на 100 % — 3,8 секунд
• Время через которое большинство подписчиков из JS подпишется на свои события — 3,8 секунд

(Посмотри скриншот результатов «до» в разделе «Результат»)

Почему бы тогда просто не перенести отрисовку Земли в обработчик window.onload, учитывая, что на сайте больше ничего не происходит?

Для пользователя не станет лучше. Пока JS выполняется UI не может обновиться. Three.js на слабых устройствах запускается 0,5 секунд — всё это время страница не будет реагировать на действия пользователя.

Для Lighthouse тоже не станет лучше. Он ждёт 5 секунд после onload.

[Finesse]

Я думал, что показатель «First CPU Idle» уменьшился, потому что работа стала выполняться параллельно, но судя по инструменту Performance из Google Chrome, ничего не выполняется параллельно:

Скриншот

Ещё меня смущает, что количество потоков возросло с 1 до 2, а показатель «First CPU Idle» уменьшился аж в 4 раза. Поэтому я всё же думаю, что Lighthouse не учитывает вебворкеры.

Насчёт onload я согласен, неблокирование основного потока CPU это большой плюс решения с вебворкером.

[Iskin]

> судя по инструменту Performance из Google Chrome, ничего не выполняется параллельно

Всё верно. Главный JS скрипт очень простой и всё что он делает — просто запускает воркер.

Ага, First CPU Idle уменьшился, потому что он считает только загрузку главного процесса.