Во всех браузерах кроме Firefox реализован Fetch Priority API

Это атрибут fetchpriority на тэгах img, script, link, который указывает, насколько приоритетен данный ресурс для загрузки.

Это важно в первую очередь для метрик Core Web Vitals, а именно - LCP. Если элемент LCP - картинка, имеет смысл указать ей fetchpriority="high".

Учитывая, что ресурсов на странице может быть много, а браузеры выделяют на сетевые соединения около 5 потоков на один домен, то может образоваться очередь, и ваша LCP картинка появится не сразу.

Также можно указать fetchpriority="low" для картинок вне области видимости, - в том числе, в слайдере.

#tip #optimization #webvitals

Только недавно вышел Vite 5.0, как вот опять пошел отсчет.

Как обещал Patak, в шестой версии Vite частично и опционально может появиться Rolldown

#vite

Что такое многопоточность, и что такое асинхронность?

Многопоточность - это когда программист может создать отдельный поток и запустить в нем свой определенный код. Например, можно создать два потока, один в бесконечном цикле выводит в консоль "Поток А", а второй - "Поток В". Эти строки будут чередоваться в выводе. Можно задать приоритеты потокам, и тогда поток в приоритетом 3 будет выводить сообщения в 3 раза чаще, чем поток с приоритетом 1.

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

В мире JavaScript cтановиться в одну очередь потоки могут на уровне JS рантайма, OS, CPU. Обычные десктопные приложения (например, IDE) тоже бывают с хорошей поддержкой распараллеливания на многоядерные процессоры - и тогда они используют CPU максимально эффективно, или нагружающие только одно ядро. В последнем случае апгрейд процессора на более современный многоядерный почти ничего не даст, если у старого и нового примерно одна частота.

Асинхронность - это когда есть некая неблокирующая функция, точное время исполнения которой неизвестно. И программист может указать код, который должен выполниться после исполнения данной функции (передать callback). Промисы и async/await это нетривиальные, но всё же просто удобные обертки над данной логикой.

Итак, при асинхронности обычно есть некая пограничная функция, зависящая от внешних обстоятельств (fetch, nextTick, fs.readdir, setTimeout). Её "псевдопараллельное" исполнение в одном потоке вместе с основным кодом обеспечивается механизмом Event Loop.

Таким образом, это абсолютно разные вещи как по целевому назначению, так и по использованию. Асинхронность в JavaScript реализована через callbacks, промисы и async/await, многопоточность или её подобие реализуется райнтаймом (Web workers, worker_threads).

Асинхронность нужна для общения с "внешним миром", включая отрисовку браузером. Многопоточность позволяет выделить ресурсоемкие вычисления (а также сетевые запросы) в отдельные потоки (Web workers), что снижает нагрузку на основной поток, который отвечает и за рендеринг. Это благоприятно сказывается на отзывчивости вашего UI.

(vue-faq.org)

#async #js #threads

Предложение добавить Signals в JavaScript перешло в Stage 1 процесса комитета TC39
Это означает, что члены комитета соблаговолили взглянуть на пропозал. Заняло это у них 8 месяцев.

Signals - аналог реактивных переменных и операций над ними (computed, watcher) во Vue 3, только сильно урезанный по сравнению с Reactivity API. Evan You говорил, что если они появятся в языке, реактивность Vue может быть переписана на них.

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

Так же не сильно поможет это и для Web components догнать фронтенд фреймворки, потому что там нет связывания js переменных с шаблоном.

#signals #reactive #js

Мудрые мысли в конце рабочей недели

#humor #video

Интересное исследование по производительности CSS в scoped областях в браузерах.

Vue использует HTML уникальные атрибуты для обозначения скоупа, Svelte - классы. В статье показаны результаты бенчмарков для различных вариантов скоупинга. Конкретно сравнение подходов разных фреймворков - в самом конце.

Выводы: Shadow DOM самый быстрый, подход Vue с data-v- атрибутом тоже вполне эффективен

#css #benchmark

Субботний оффтоп

Сегодня впервые пришло письмо счастья.
Читая, вспомнил потрясающую серию из "Черного зеркала" по теме.

Как большой фанат "Black mirror" и "Westworld" решил поискать что-то подобное через специализированные AI сервисы. Не помню уже, что использовал, но оно помогло!

"Electric dreams", "Humans" и "Altered carbon" оказались отличными малоизвестными сериалами с провальным рейтингом, из-за которого два из них просто бросили снимать на середине.

#movie #ai #offtop

Volar-у надоело масштабироваться вертикально, он полез горизонтально.

Из-за бага в VSCode (как утверждает Johnson Chu) в расширениях редактора теперь два Vue-Official (ext:Vue.volar). Один - последний 2.0.12 с 60 тысячами скачиваний, другой - 2.0.10 с 7 миллионами скачиваний. Нужен 2.0.12.
Изменить имя, и потерять всю историю...

Также последняя версия хочет, чтобы у вас была достаточно свежая версия VS Code, иначе она превращается в 1.8.27.

#volar #vscode

PageRank - метрика, введенная Google в 2000 года для ранжирования вебсайтов путем подсчета количества и качества внешних ссылок на их страницы.

В 2016 году сервис PageRank был закрыт для предотвращения спекуляций и мошенничества. Сейчас маркетинговые компании вычисляют рейтинги самостоятельно.

Инициатива OpenPageRank была создана для публичной замены Google PageRank. Раз в несколько месяцев они обрабатывают массив из свыше трех миллиардов вебстраниц и обновляют свой рейтинг.

15 марта 2024 года vue-faq.org вошел в top 500K. Для сравнения приведены рейтинги некоторых других сайтов (result.school - школа Минина)

#pagerank #vuefaq #google

У нового Volar обнаружился вот такой popup.

Напоминаем, Volar продолжают преследовать проблемы.

Кстати, мейнтенер Volar Johnson Chu создал Insider edition проекта, доступ к которому только через платную подписку.

Раньше бета-тестерам платили, теперь они должны платить...

#volar

HTML и CSS - языки программирования.

Доказано.

Пример мини-калькулятора, складывающего два числа, заданных в двоичном формате, на чистом HTML и CSS.

#css #html #pl

Сразу после выхода очередного релиза Vitest 1.5.0, вышла новая версия Vitest VS Code extension 0.6. Из нового:

- instant feedback
- .each test declaration
- test tree view
- coverage reporting
- better debugging support
- improved performance

Расширение было не очень популярно, и по сравнению с версией 0.5 было переписано с нуля.

#vitest #vscode

Вышла новая мажорная версия NPM пакетного менеджера PNPM 9.0

Самый удобный менеджер, если у вас проект без изысков типа module federation.

#pnpm #npm #nodejs

Bun всячески пытается привлекать к себе пользователей, в том числе и такими приятными мелкими фишками, как комментарии в package.json

Стандарту JSON5 (который включает комментарии) уже много лет, но он все никак не приживется.

Инициатива Bun пытается адаптировать новый стандарт, но сломает запуск проекта в других js рантаймах и в других инструментах, что уже вызвало волну негатива сообщества.

#bun #dx #json

Крайнее интервью с Evan You

https://www.youtube.com/watch?v=iSLQXZUsEUc

https://oss.institute/podcast

https://open.spotify.com/show/3UxPfbvNzjdpKPgWa5DNPQ

https://podcasts.apple.com/us/podcast/rebase/id1740522367

#evanyou

Если у вас есть большая строка в JavaScript, и вы с помощью slice() вытаскиваете из нее подстроку, то эта подстрока не даст Garbage Collector-у уничтожить большую строку, даже если вы на нее больше не ссылаетесь. Это верно в V8, где подстрока оформляется как С++ указатель на нужное место в большой строке. В результате при обработке большого числа строковых данных могут происходить утечки памяти. Чтобы избежать этого можно делать копирование подстроки.

Также утверждение, что конкатенация строк - дорогая операция, уже не соответствует действительности. Например, на массиве строк

.join(' ')

будет медленней конкатенации через reduce:

.reduce((acc, c) => acc + ' ' + c, '')

Опять же из-за особенностей V8. Более того, конкатенация будет даже быстрее шаблонов строк (`Hello ${name}`), хотя обычно учат обратному.

В целях оптимизации работы со строками следует избегать мутирующих операций.

#tip #js #optimization

По запросу пользователя добавил в Vite плагине vite-plugin-html-injection возможность указывать, вставлять ли в index.html тот или иной фрагмент кода в зависимости от режима билда (buildModes?: "dev" | "prod" | "both")

{
  name: "Google analytics",
  path: "./src/injections/ga.html",
  type: "raw",
  injectTo: "body",
  buildModes: "prod",
},

#oss #vite