Size: a a a

Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только

2020 October 07
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Сегодня вышел Chrome 86. Пит Лепаж и Джеселин Ин рассказали про новинки релиза.

File System Access API доступен по умолчанию. С помощью него можно получить доступ к файловой системе пользователя для упрощения работы с локальными файлами.

В рамках origin trials стал доступен Web HID, благодаря которому web-приложения могут взаимодействовать с оборудованием пользователя. Также в рамках origin trials стал доступен Multi-screen Window Placement API. Благодаря этому API возможно получить информацию о всех экранах пользователя и программно управлять размещением окон.

В CSS появилась поддержка псевдокласса :focus-visible, которое позволяет применять для фокуса эвристики, которые использует браузер. Добавлена поддержка псевдоэлемента ::marker для стилизации маркера списка.

Начался процесс удаления поддержки ftp (будет отключён в Chrome 88). Удалена поддержка API WebComponents v0 во WebView.

Много изменений в Chrome DevTools. Добавлена новая панель "Media" для упрощения дебага видеоплейеров. Теперь, как и в Firefox, можно сделать скриншот любого узла DOM-дерева с помощью контекстного меню на панели "Elements". Проблемы с third-party cookie на вкладке "Issues" скрываются по умолчанию. Теперь возможно эмулировать недоступность локально установленных шрифтов. Добавлена эмуляции неактивности пользователей (Idle Detection API) и эмуляция опции экономии траффика (медиа-запрос prefers-reduced-data ). Lighthouse обновлён до версии 6.2.

#chrome #release

https://developers.google.com/web/updates/2020/10/nic86
https://developers.google.com/web/updates/2020/08/devtools
источник
2020 October 08
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
В Chrome 86 HTTP-кэш становится изолированным. Что это означает рассказал Еиджи Китамура в статье "Gaining security and privacy by partitioning the cache".

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

Chrome 86 начал использовать для имени ключа кэша "Network Isolation Key", который состоит из имени сайта и сайта текущего фрейма (если фрейма нет, то будет использоваться имя сайта второй раз). У изолированного кэша есть небольшой недостаток — он может повлиять на метрики производительности сайта.

На данный момент изоляция кэша включена в Chrome и Safari. В Firefox она тоже поддерживается, но выключена по умолчанию (её можно включить с помощью флага privacy.firstparty.isolate в about:config ).

#chrome #cache

https://developers.google.com/web/updates/2020/10/http-cache-partitioning
источник
2020 October 09
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Збигнев Банах написал статью про HSTS — "Why Websites Need HTTP Strict Transport Security (HSTS)".

Как правило, пользователи при переходе на сайт вводят его имя в адресную строку без протокола. Браузеры по умолчанию переходят на сайт по незащищённому протоколу HTTP. Для того чтобы браузер всегда использовал HTTPS-протокол, сервер на первый запрос должен отправить ответ с редиректом на HTTPS-версию сайта и с помощью заголовка Strict-Transport-Security передать дополнительную информацию о том, что сайт должен работать только HTTPS и закэшировать этот ответ. Время жизни кэша обычно устанавливают на год или два. В следующий раз при посещении сайта пользователь сразу попадёт на HTTPS-версию без редиректа.

Но есть небольшая проблема. Теоретически злоумышленник может перехватить первый запрос и заблокировать работу HSTS. Чтобы этого избежать, браузеры проверяют список сайтов, которые должны работать только по HTTPS (HSTS preload list). В этот список можно добавить свой сайт, но для этого нужно выполнить все условия, например, чтобы все поддомены работали по HTTPS.

Хорошая статья. Рекомендую почитать, если хотите узнать больше про HSTS.

#http #security

https://www.netsparker.com/blog/web-security/http-strict-transport-security-hsts/
источник
2020 October 10
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Серджио Виллар в блоге Igalia написал пост о том, как они исправляли в WebKit проблемы с flexbox — “Closing the gap (in flexbox)”.

В WebKit накопилось большое количество проблем, связанных с flexbox. Много тестов из Web Platform Test не проходило. Ребят из Igalia наняли решить самые важные проблемы с флексами: исправить работу с min-width:auto и min-height:auto, исправить поведение flexbox-элементов внутри таблиц и наоборот, исправить проблемы с обработкой высоты, заданной в процентах, для контейнеров с неограниченными размерами. Среди самых важных изменений было добавление поддержки свойства gap. В статье разбираются наиболее интересные примеры неправильного поведения flexbox’ов в WebKit.

В статью стоит заглянуть, если хотите узнать подробнее о нюансах работы с flexbox.

#css #internals

https://blogs.igalia.com/svillar/2020/10/01/closing-the-gap-in-flexbox/
источник
2020 October 11
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Вчера зарелизился Webpack 5 с огромным количеством изменений.

TLDR

В новой версии была улучшена скорость сборки. Была улучшена поддержка долгосрочного кэширования бандлов. Улучшен tree shaking. Реализован новый подход для работы с ассетами. Добавлена новая фича Module Federation. Удалены полифиллы для Node.js-модулей. Код сборки может генерироваться в стандарте ES2015.

Подробнее

Улучшена скорость сборки благодаря кэшированию на диске служебных данных между разными сборками (Persistent Caching).

Было проделано много работы для улучшения tree-shaking. В новой версии Webpack использует статический анализ для построения графа зависимостей, благодаря чему удаляется больше неиспользуемого кода. Также Webpack благодаря статическому анализу определяет модули без сайд-эффектов и не включает их в бандл, если они не используются. Был улучшен tree-shaking CommonJS-модулей.

Было упрощено использование ассетов. Теперь не нужно устанавливать дополнительные загрузчики, например, file-loader, url-loader, raw-loader. Сергей Мелюков в феврале публиковал статью про ассеты в Webpack 5, рекомендую почитать.

С пятой версии стала доступна ещё одна новая фича — Module Federation. Благодаря ей приложение может прозрачно заимствовать код из других приложений. Это позволяет делать интересные вещи, например, разделить одно большое SPA на несколько небольших. Это SPA с точки зрения пользователя будет работать как одно целое, но может разрабатываться и деплоиться разными командами независимо друг от друга.

Улучшена совместимость с Web-платформой: добавлена поддержка Top Level Await, JSON Modules, WASM Modules, import.meta.

Четвёртая версия Webpack могла генерировать код сборки только в стандарте в ES5. С пятой версии код сборки может генерироваться в стандарте ES2015.

Были удалены полифиллы для Node.js ( node.Buffer, node.console, node.process, crypto и т.п.) Когда появился Webpack, npm чаще всего использовали для распространения Node.js-модулей, поэтому в то время имело смысл поставлять со сборщиком полифиллы. Сейчас ситуация изменилась — в npm есть много кода, который можно использовать и в Node.js, и в браузерах. Также очень много внимания сегодня уделяют размеру генерируемого кода, а полифиллы Node.js могут добавлять очень много кода. Но не все рады удалению полифиллов. Синдре Сорхусу — автору многих библиотек в экосистеме Node.js — это решение не понравилось. Он пишет про то, что не будет исправлять проблемы, связанные с Webpack 5.

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

#webpack #release #bundle

https://webpack.js.org/blog/2020-10-10-webpack-5-release/
источник
2020 October 12
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Маниш Горегаокар — разработчик Servo — написал статью про сложности имплементации свойства font-size — "Font-size: An Unexpectedly Complex CSS Property".

Маниш разрабатывал Stylo — CSS-движок, написанный на Rust, который стал частью Firefox. Одной из его задач было добавление поддержки свойства font-size.

Проблема в том, что на размер шрифта влияют очень много факторов. Размер может быть задан разными юнитами и ключевыми словами. На него влияет выбранное семейство шрифтов, например,  font-size: medium в рубленных шрифтах это 16 пикселей, а в моноширинных шрифтах — 13 пикселей. Также Firefox (из коробки) и Chrome (с помощью расширения) позволяют задавать размер шрифта в зависимости от текущего языка текста. Есть свои нюансы для задания размеров шрифта в MathML и при его использовании c аннотациями ruby.

Интересно, что в некоторых случаях разработчики не следуют полностью спецификации, а делают good enough приближение, потому что точно реализовать фичу по спеке бывает очень сложно.

В общем, хорошая статья. Рекомендую почитать всем, кто интересуется внутренней работой браузеров.

#css #internals #firefox #specification

https://manishearth.github.io/blog/2017/08/10/font-size-an-unexpectedly-complex-css-property/
источник
2020 October 13
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Традиционный пост о том, что было опубликовано за последние две недели в Defront Plus:

— Что произошло с immutable.js, и какие есть альтернативы
— Результаты UX-исследований открытия ссылок в новом табе или окне
— Ошибки в CSS, которые делаются на автопилоте
— Понимание байткода V8
— Опыт уменьшения размера бандла Next.js-приложения
— Использование async_hooks в Node.js
— Как Goibibo улучшил бизнес-метрики web-приложения c помощью PWA
— Tota11y — поиск проблем с a11y
— Вам, возможно, не нужен date-fns
— Не доверяйте дефолтным таймаутам

Канал существует благодаря вашей поддержке. Становитесь патроном канала на Patreon, чтобы получить доступ к дополнительным постам в Defront Plus.

Спасибо всем, кто читает и поддерживает Defront! Рад видеть, что канал приносит вам пользу.

https://www.patreon.com/myshov
источник
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Сегодня вышла седьмая версия npm. Майлз Боринс рассказал про новые фичи релиза — "Presenting v7.0.0 of the npm CLI ".

В npm v7 была добавлена поддержка воркспейсов (workspaces). С их помощью добавляется возможность удобного управления вложенными пакетами из корневого пакета.

В новой версии peerDependencies будут устанавливаться автоматически. В npm v6 установщику не предоставлялась информация о peerDependencies, поэтому их надо было устанавливать самостоятельно.

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

Ломающие изменения: автоматическая установка peerDependencies; теперь нельзя зареквайрить внутренние модули npm; npx был переписан, в новой версии он работает поверх npm exec, что повлекло за собой разные изменения; изменился вывод команды npm audit.

Седьмая версия будет поставляться с Node.js v15 (выходит на следующей неделе) или её можно установить самостоятельно ( npm i -g npm@7 ).

#npm #release #nodejs

https://github.blog/2020-10-13-presenting-v7-0-0-of-the-npm-cli/
источник
2020 October 15
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Барри Поллард — автор книги "HTTP/2 in Action" и один из авторов "Web Almanac" — проанализировал данные Lighthouse из HTTP Archive и поделился своими находками — "What do Lighthouse Scores look like across the web?".

Всего лишь 10% сайтов были оценены больше 80 в категории производительности. Медианное значение оценки — 31. Это означает, что большинство сайтов неоптимизировано, и, скорее всего, работают медленно. Наиболее низкая оценка метрик приходится на Largest Contentful Paint (LCP) и Time to Interactive (TTI) — всего лишь 21% сайтов получили хорошую оценку по этим метрикам.

Лучше всего сайты показывают себя в категориях Accessibility и SEO. Хорошие оценки Accessibility объясняются набором типов проверок в Lighthouse. Нужно понимать, что в категории Accessibility оценка не говорит о том, что сайт доступен (можно написать недоступную страницу с оценкой 100), оценка говорит о том, что сайт следует основным советам для улучшения доступности.

Интересное исследование. Рекомендую почитать, чтобы получить больше понимания об оценках в Lighthouse.

#performance #a11y #research

https://www.tunetheweb.com/blog/what-do-lighthouse-scores-look-like-across-the-web/
источник
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Дэниэл Апплкуист — член W3C Technical Architecture Group — призывает сообщество присоединиться к разработке стандартов — "Why Get Involved in Web Standards?"

Дэниэл пишет о том, что он работает над улучшением прозрачности разработки web-стандартов и вовлечением в процесс большего числа разработчиков. Если вы думали над тем, чтобы присоединиться к разработке стандартов, но не знали с чего начать, то вам поможет Web Platform Contribution Guide. В нём рассказывается о процессе разработки стандартов и о том, как можно помочь. Также можно присоединиться к TPAC брейкаутам — докладам на тему разработки разных web-стандартов. Обычно брейкауты проводятся среди членов рабочих групп W3C, но в этом году в них может поучаствовать любой разработчик.

Если у вас есть какие-либо вопросы, то Дэниэл готов на них ответить. Все подробности можно найти в конце статьи.

#announcement #spec

https://dev.to/torgo/why-get-involved-in-web-standards-1p4h
источник
2020 October 16
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Томас Штейнер в блоге web.dev написал статью про текстовые фрагменты — "Boldly link where no one has linked before: Text Fragments".

В url страницы после символа # можно подставить идентификатор элемента, к которому браузер должен подкрутить страницу. Эта фича появилась очень давно, но у неё есть недостаток — на странице должен существовать элемент с необходимым идентификатором.

С помощью текстового фрагмента (text fragment) можно задать любой текст, который нужно "подсветить" на странице. Текстовый фрагмент задаётся в url страницы с помощью конструкций #:~:text=textStart или  #:~:text=textStart,textEnd. Также можно указать необходимый контекст с помощью префиксов и суффиксов #:~:text=somePrefix-,text,-someSuffix.

Текстовый фрагмент — экспериментальная фича, её поддержка есть только в браузерах на базе Chromium. На данный момент участники W3C скептически относятся к изменению формата url, но Google уже начал использовать текстовые фрагменты в production-коде поисковых сниппетов.

#spec #experimental #chromium

https://web.dev/text-fragments/
источник
2020 October 17
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Ник Джансма из Akamai написал большую статью про метрику CLS — "Cumulative Layout Shift in Practice".

Метрика CLS (Cumulative Layout Shift) показывает, насколько контент страницы стабилен. Большой показатель CLS обычно говорит о том, что у страницы плохой пользовательский опыт. Например, когда сдвигается текст из-за загрузки изображения или рекламных виджетов.

В статье рассказывается о том, как вычисляется CLS, какие есть инструменты для её анализа и чем эти инструменты отличаются друг от друга. Также в статье есть список подводных камней, которые нужно учитывать при анализе проблем сдвига контента:

— CLS на мобильных устройствах выше, потому что контент на мобильных сайтах располагается вертикально, поэтому при анализе проблем CLS рекомендуется разделять статистику для десктопов и мобильных;
— момент времени, когда останавливается сбор метрики CLS, для разных инструментов разный;
— в инструментах разработчика есть баги при измерении сдвига контента внутри iframe'ов, также есть несоответствия в инструментах для сбора синтетической статистики и статистики с устройств реальных пользователей;
— в некоторых случаях страницы с высоким CLS могут предоставлять хороший пользовательский опыт;
— CLS не учитывает элементы, которые ничего не рендерят.

Очень большая и хорошая статья. Рекомендую почитать всем, кто интересуется темой производительности.

#performance #metrics

https://nicj.net/cumulative-layout-shift-in-practice/
источник
2020 October 18
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Стэфани Стимак из Microsoft поделилась своими мыслями про производительность сайтов с точки зрения деревенского жителя — "Location, Privilege and Performant Websites".

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

Основная мысль статьи — критически важные сайты должны тестировать свою производительность на слабых устройствах с ограниченным доступом в сеть. В некоторых случаях можно поддерживать отдельную версию сервиса, адаптированную для работы в загруженной мобильной сети. После разрушений урагана Ирма NPR запустил текстовую версию сайта без изображений, JS и CSS специально для того, чтобы люди могли быстро получать информацию о последних новостях.

#performance #musings

https://blog.stephaniestimac.com/posts/10-30-2019-performance/
источник
2020 October 19
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
В 2016 году в набор команд ARM была добавлена операция, специально разработанная для работы с JS-движками, — "Armv8-A architecture: 2016 additions".

В JavaScript все числа представляются в формате чисел с плавающей запятой двойной точности, но при работе с битовыми операциями они преобразуются в 32-битные целые числа (в спецификации для этого используется ToInt32 ). Битовые операции относительно часто используется в JS-коде, поэтому для ускорения таких преобразований в набор команд архитектуры Armv8 была добавлена новая команда FJCVTZS.

Можно сказать, что JS проник не только на сервера, десктоп и мобильные приложения, но и в набор команд процессоров.

#js #internals

https://community.arm.com/developer/ip-products/processors/b/processors-ip-blog/posts/armv8-a-architecture-2016-additions
https://stackoverflow.com/questions/50966676/why-do-arm-chips-have-an-instruction-with-javascript-in-the-name-fjcvtzs
источник
2020 October 20
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Сегодня зарелизился Firefox 82. В этой версии упор был сделан на скорость работы браузера. Исправлены минорные проблемы с DOM API. Есть немного улучшений в DevTools. По умолчанию включена поддержка Media Session API.

Самое интересное для разработчиков
— В DevTools на вкладке "Network" теперь можно инспектировать server-sent events (SSE); панели "Message" и "Response" были объединены (то есть можно просматривать сообщения web socket'ов и SSE  прямо под списком сетевых ответов)
— Диалог выбора цвета стал доступен с клавиатуры на Windows
— Появилась поддержка флага allow-downloads в <iframe sandbox>
— В CSS появилась поддержка псевдоэлемента ::file-selector-button для стилизации кнопки выбора файла
— Псевдоклассы :is() и :where() стали более толерантны к ошибкам — невалидный элемент из списка селекторов больше не делает весь список неавалидным
— Если у тэга <a> есть атрибут download (то есть это ссылка на загрузку файла), он будет перекрывать поведение открытия файла в браузере при установленном HTTP-заголовке Content-Disposition: inline;filename="somefile.jpg"
— Включена поддержка Media Session API. С помощью этого API в системные нотификации можно интегрировать информацию о текущем проигрываемом треке и обрабатыватать события медиа-клавиш на клавиатуре, пультах дистанционного управления и наушниках
— Свойство window.name сбрасывается, если в текущей вкладке загружается другой сайт. Это изменение было сделано для улучшения приватности, но оно может повлиять на фреймворки, которые используют window.name для междоменного обмена сообщениями

Нововведения для пользователей
— Ускорена работа браузера (раскладки на флексах работают на 20% быстрее, сессии восстанавливаются на 17% быстрее, на windows открытие новых окон стало быстрее на 10%).
— В Windows добавлена поддержка аппаратного декодирования видео, оно снижает потребление ресурсов GPU, CPU и положительно сказывается на разряде батареи
— Улучшена работа с режимом Picture-In-Picture

#firefox #release

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/82
https://www.mozilla.org/en-US/firefox/82.0/releasenotes/
источник
2020 October 22
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Вчера вышел Node.js v15.0.0.

TLDR

В релизе был обновлён движок V8 до версии 8.6, npm был обновлён до седьмой версии, обновлена версия N-API, была добавлена поддержка AbortController и QUIC, необработанные ошибки промисов теперь приводят к прекращению работы Node.js.

Подробнее

V8 был обновлён до версии 8.6. С новой версией движка в Node.js появилась поддержка Promise.any(), AggregateError, логических операторов присваивания &&=, ||=, ??=, String.prototype.replaceAll().

Npm был обновлён до версии 7. В нём появилась поддержка воркспейсов, изменён формат package-lock.json, добавлена поддержка yarn.lock, установка peerDependencies по умолчанию. Недавно в канале был подробный пост про новую версию npm, его можно почитать тут.

Была добавлена экспериментальная поддержка нового транспортного протокола QUIC, который лежит в основе HTTP/3. Основные фичи QUIC: по умолчанию безопасен (используется TLS 1.3), исправление проблемы head-of-line blocking, поддержка миграции соединения. Более подробно про QUIC и HTTP/3 можно почитать тут.

В Node.js 15 необработанные ошибки промисов будут выкидывать исключение и приводить к остановке работы Node.js, если не была установлена глобальная обработка unhandledRejection. Такое решение было принято, чтобы показать важность обработки ошибок промисов, без них могут возникать утечки памяти и другие проблемы. Это поведение можно поменять с помощью флага --unhandled-rejections=warn.

Была добавлена экспериментальная поддержка AbortController — Web API, с помощью которого можно отменять работу API на базе промисов.

N-API — API для создания аддонов — было обновлено до седьмой версии. В нём были добавлены дополнительные методы для работы с ArrayBuffers.

Нечётное число в версии Node.js означает, что это экспериментальная версия, она будет поддерживаться до июня 2021 года. Самая последняя стабильная версия Node.js 14 на следующей неделе получит статус LTS.

#nodejs #release

https://medium.com/@nodejs/node-js-v15-0-0-is-here-deb00750f278
источник
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Лукас Ф. Коста — автор библиотеки Chai.js — написал статью про package-lock.json — "Why does package-lock.json exist, and how does it work?".

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

При запуске команды npm i установщик получает список зависимостей проекта из package.json и во время их установки обновляет package-lock.json, записывая туда полное дерево зависимостей с необходимой метаинформацей. Для установки пакетов из package-lock.json нужно использовать другую команду — npm ci. Эта команда устанавливает все зависимости, создавая идентичное дерево зависимостей на момент последнего выполнения npm i. Кроме детерминированности npm ci даёт очень хороший буст в скорости установки пакетов, поэтому чаще всего её используют в CI-системах.

В общем, полезная статья. Рекомендую почитать, если хочется разобраться в этой теме подробнее.

#npm

https://lucasfcosta.com/2020/10/17/lockfile-guide.html
источник
2020 October 23
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Не знаю как у вас, но меня постоянно вводили в ступор хинты производительности <link rel="prefetch"> и <link rel="preload">. Когда пытался вспомнить их назначение, в голове возникали примерно такие вопросы: "Prefetch отвечает за оптимизацию загрузки ресурсов для текущей страницы или следующих страниц? А за что тогда отвечает preload?"

Prefetch и preload похожи друг на друга: prefetch отвечает за оптимизацию загрузки ресурсов на страницах, которые будут открыты через некоторое время, preload — за оптимизацию загрузки ресурсов, которые нужны прямо сейчас на текущей странице.

Сегодня придумал мнемоническое правило, помогающее запомнить, что за что отвечает: preLoad помогает оптимизировать загрузку ресурсов на локальной (Local) странице (то есть текущей), preFetch помогает оптимизировать загрузку ресурсов на будущих (Future) страницах.

Preload — local, prefetch — future.

#performance #trick

https://twitter.com/myshov/status/1319652179263868928
источник
2020 October 24
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Эдди Османи написал статью про использование паттерна PRPL — "Faster Web App Delivery with PRPL".

PRPL — это паттерн для структурирования и улучшения производительности web-приложений (SPA и PWA).

PRPL описывает четыре этапа жизненного цикла приложения от этапа доставки кода в браузер до его отрисовки:
— Push — при первом открытии приложения, самые необходимые ресурсы доставляются как можно быстрее с помощью server push или preload;
— Render — затем отрисовывается экран приложения с использованием минимального количества необходимых ему ресурсов;
— Pre-cache — после того как приложение было отрисовано, оно может подгрузить ресурсы тех страниц приложения, которые с большой вероятностью будут открыты пользователем;
— Lazy-load — при работе с приложением его куски доставляются в браузер по мере необходимости, это обычно реализуется с помощью code splitting и динамических импортов.

Хорошая статья. Обязательно загляните, если занимаетесь разработкой web-приложений.

#performance #mobile #js

https://addyosmani.com/blog/the-prpl-pattern/
источник
2020 October 26
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Артём Караваев на хабре написал статью о том, как складывать числа с плавающей запятой без потери точности.

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

Математически можно доказать, что ошибку округления сложения чисел с плавающей запятой всегда можно точно представить другим числом с плавающей запятой. То есть чтобы сложить два числа с плавающей запятой без потери точности, нужно вычислить погрешность и использовать её в других вычислениях. Найти эти числа можно так (в статье есть более точные алгоритмы поиска для разных входных значений):

s = a+b; // сумма
z = s-a;
t = b-z; // погрешность


Очень хорошая статья. Рекомендую почитать всем, кто заинтересовался этой темой.

#math #algorithm

https://habr.com/ru/post/523654/
источник