В конце концов, 2020 год необычный, мы пережили слишком много взлетов, падений и испытаний. Даже пострадавший от эпидемии COVID-19 браузер Chrome редко обновлялся, а Chrome 82 отсутствовал. Тем не менее, веб-экосистема по-прежнему сохраняет процветающую жизнеспособность, и продолжает появляться большое количество новых функций.
Стандарты и протоколы
ECMAScript
-
ES2020 выпущен по расписанию, предложения, которые вошли в Стадию 4, были включены в формальную спецификацию.
-
import(): для динамической загрузки модулей; -
import.meta: объект, несущий метаинформацию, относящуюся к модулю; -
export * as newModule from 'package': новый синтаксис совокупного экспорта; -
новыйДополнительный оператор цепочки
?.: Вы можете проверить, существует ли он, прежде чем приписать доступ. -
новыйНулевой оператор объединения
??: используется для предоставления значений по умолчанию, указывающих, что контекстnullилиundefined; -
новый
BigIntОсновной числовой тип: может представлять абсолютное значение больше, чем2^53-1целые числа без потери точности; -
новый
Promise.allSettled(): возвращает обещание, которое вошло в состояние выполнено или отклонено для всех заданных обещаний, с массивом объектов, каждый объект представляет соответствующий результат обещания; -
новый
String.prototype.matchAll: Итератор, содержащий все результаты, соответствующие регулярному выражению, и сгруппированные группы захвата. а такжеRegExp.prototype.execРазница в том, что если вы хотите получить все совпадения, вам нужно, чтобы регулярное выражение имело/gфлаг и вызывается несколько раз.exec()получит все совпадающие результаты, иmatchAllнужно вызвать только один раз; -
новый
globalThis: используется для решения проблемы, связанной с тем, что имена глобальных объектов неодинаковы в разных средах, таких как браузеры и Node.js, и получение глобальных объектов затруднено.
CSS
характеристика
-
FlexboxОн был полностью популяризирован, и вертикальное центрирование больше не является хлопотным потоком для фронтенд-«работников». Различные хакерские техники, такие как двойные летающие крылья и макет Святого Грааля, в конце концов были поглощены длинной рекой истории.
-
Также поддерживается во Flexbox
gapсвойства, очень удобно регулировать расстояние между соседними элементами,Поддерживаются все основные браузеры; -
Поддерживаются все основные браузерыCSS Grid, а также известен и используется большим количеством людей,Subgrid(подсетка) вFirefox 71серединаОфициально выпущен. Плавающие и встроенные блоки больше не являются лучшим выбором для макета страницы, а макет CSS переходит от одномерного к двумерному;
-
Свойство соотношения сторон
aspect-ratioУже тутПоддерживается в Chrome 88., с помощью которого очень удобно добиваться пропорционального масштабирования элементов; -
инновационныйCSS Grid для создания макета потока водопада(
grid-template-rows: masonry), и нажмите еговходная спецификация, которое будет иметь лучшую производительность, чем решение JavaScript; -
Запросы контейнеров добились значительного прогресса,Хром в полном разгаре. С его компонентом ответа, таким как тигр, вы можете установить различные стили в зависимости от размера контейнера;
-
Поддержка Chrome 86 и Firefox 85.
:focus-visibleПсевдокласс, вы можете отдельно управлять стилем фокуса клавиатуры, пожалуйста, прекратите его использовать* { outline: none; }, используйте вместо:focus:not(:focus-visible) { outline: none; } :focus-visible { outline: auto; }, который не только гарантирует отсутствие поля фокуса при щелчке мышью, но и сохраняет поле фокуса, которое появляется при нажатии клавиши Tab на клавиатуре, делая страницу более доступной.
техническая область
данные изThe State of CSS 2020
-
Процессор: три основных препроцессора (Sass,Less,Stylus), Sass имеет наивысшее удовлетворение, два других — относительно низкое, и большая часть из них переключается на постпроцессоры.PostCSSлагерь. Sass сообществаLibSass объявлен устаревшим, больше не поддерживает разработку новых функций, LibSass иnode-sassбудет по-прежнему поддерживаться на неопределенный срок усовершенствования на основе наилучших усилий, в том числе исправления основных ошибок и вопросов безопасности и поддержание совместимости с последней версией Node.js;
-
Фреймворк CSS: раньше существовало постоянное стремление к CSS-IN-JS, и оно представлено «практическим атомом».Tailwind CSSВнезапное появление новой силы заставило нас переосмыслить истинное значение семантических имен классов CSS. В традиционных CSS-фреймворках пользователи продолжают использоватьBootstrapготовность значительно упасть,Pure.CSSнеослабевающий прием;
-
CSS-в-JS:CSS Modulesа такжеStyled Componentsостаться в первом лагере;
-
Линтер:StylelintПо-прежнему лидер в Style Lint.PrettierКак «универсальный» инструмент форматирования, он поддерживает собственный синтаксис CSS, SCSS и Less, что делает его лучшим выбором для разработчиков для форматирования стилей.С git-хукамиУдивительно в использовании.
конечная технология
WebAPI
-
Начиная с Chrome 87, его можно найти вУровень JavaScript управляет панорамированием, наклоном и масштабированием камеры.;
-
Web NFCЗапустите первоначальную пробную программу в Chrome 81;
-
Safari 14Поддерживается формат изображений WebP.На данный момент все четыре основных браузера (Chrome, Firefox, Edge, Safari) поддерживают WebP;
-
Safari 14Поддерживается веб-сквозная передачаWeb Authentication APIВызов Face ID и Touch ID для аутентификации пользователей;
-
Оптимизирован для сцен с высоким давлением рендеринга DOM.Display Locking(Show Lock) Предложение снова обновляется;
-
Формат изображения следующего поколенияAVIF(Формат файла изображения AV1). Этот формат примерно на 50% меньше, чем JPEG, и примерно на 20% меньше, чем WebP. Соответствующие показатели производительностипосмотреть здесь,В настоящее времяChrome 85,Firefox 77Он поддержал;
-
HTML
enterkeyhintАтрибутыПоддерживается в Chrome 77, Safari 13.1 (Firefox поддерживаетmozactionhintатрибут), который может заставить клавишу ввода на клавиатуре мобильного устройства отображать разные тексты и стили в зависимости от ситуации; -
Опубликовано рабочей группой W3C по иммерсивной сетиСпецификация уровня 1 модуля ввода жестов WebXRПервый общедоступный рабочий проект этого модуля имеет возможность отслеживать совместные жесты, которые можно использовать для распознавания поз суставов рук или визуализации моделей жестов в сценах виртуальной реальности.
Улучшенная безопасность и защита конфиденциальности
2020 год — это третий год, когда Общее соглашение ЕС о защите данных, GDPR, стало обязательным.Meltdown и Spectre SpectreТретий год взлома. В 2020 году основные политики безопасности браузеров и защиты конфиденциальности достигли значительного прогресса.
-
Офлайн-поддержка при угрозах безопасности: Поддержка при угрозах безопасности:
-
TLS 1.0 и TLS 1.1 уже доступныChrome 84+,Firefox 74+,Safari 13.1+Не в сети:
-
FTP уже включенSafari 14+,Chrome 87+не в сети, будет вбудущая версия фаерфоксасредняя и нижняя линия;
-
Вспышка уже естьSafari 14+не в сети, будет вChrome 88+,Firefox 85+средняя и нижняя линия;
-
Оптимизация межсайтовой изоляции:
-
В начале 2018 г. в связи с обнаружением уязвимости Spectre были отключены высокоточный таймер и Shared Memory API.В целях предотвращения связанных уязвимостей браузерам необходимо обеспечить, чтобы разные сайты находились в разных процессах и были изолированы друг от друга;
-
Чтобы обеспечить межсайтовую изоляцию процессов,
Cross-Origin-Opener-Policyа такжеCross-Origin-Embedder-PolicyЗаголовок возврата разработан. Когда они возвращаются сервером правильно,Firefox 79+а такжеChrome 88+Поддержка Shared Memory API будет возобновлена; -
Предотвращение межсайтового прослушивания:
-
В Сафари 13.1+, сторонние файлы cookie полностью отключены, а хранилище с возможностью записи JavaScript сохраняется на срок до одной недели;
-
В Сафари 14+, файлы cookie для междоменных ресурсов полностью отключены, если согласие пользователя не получено явным образом через API доступа к хранилищу; срок действия файлов cookie доменных имен для сторонних CNAME может составлять до 7 дней;
-
В Firefox 79+ в, запущена новая версия интеллектуального предотвращения межсайтового прослушивания (ETP 2.0), и соответствующие настройки файлов cookie, которые оцениваются как межсайтовые анализы, будут очищаться каждые 24 часа;
-
Оптимизация детализации кэша:
-
Chrome 85+, кэш HTTPИспользуйте более точные ключи(ЭТЛД+1);
-
Firefox Будет реализована та же степень детализации ключей кеша после 85;
-
Safari 12.1+ реализованДоменное имя верхнего окна + механизм управления ключом URL;
-
Новый механизм кэширования изолирует междоменные запросы внутри и снаружи iframe, что позволяет эффективно избежать перехвата доступа к сайту.Атака с межсайтовым поиском, отслеживание межсайтового доступа и другие вопросы конфиденциальности;
-
Другая политика безопасности:
-
Chrome 83+Служба поддержкиTrusted TypesПредотвращение XSS на основе DOM;
-
Chrome 80+Cookie Полное количество значений по умолчанию Samesite
SameSite=Lax, что может повысить безопасность сайта и предотвратить большое количество CSRF-уязвимостей из источника; -
Firefox 76+используется в
location.hrefили<meta http equiv=“refresh”>Такие методы, как переход к неизвестным протоколам, будут заблокированы.
Фреймворки и решения
Рамка
В 2020 году в React нет новой концепции. React Hooks перешел от широкого внимания в сообществе к фактической реализации, официально выпущен долгожданный Vue 3.0, который сохраняет свои особенности и черпает питательные вещества из React.
-
Реакт выпускает версию 17, известное как обновление основной версии без новых функций, обеспечивающее возможность сосуществования нескольких версий React;
-
После двух лет напряженной работы, более 2600 коммитов,Vue 3.0 выпустила официальную версию под кодовым названием One Piece.:
-
Перераспределенные модули: могут уменьшить размер среды выполнения почти вдвое. Некоторые из отдельных пакетов также можно повторно использовать в других сценариях: преобразование AST, пользовательские средства визуализации (такие как апплеты) и адаптивные системы извлекаются и используются независимо;
-
Новый Composition API: предлагается новый API с сохранением исходного объектно-ориентированного API для повторного использования логики, подобной React Hooks;
-
Улучшения производительности: по сравнению с Vue2, размер файла после упаковки (на 41% меньше тряски дерева), начальный рендеринг (на 55% быстрее), обновления (на 133% быстрее) и использование памяти (на 54% меньше). Значительное улучшение производительности и оптимизация компиляции шаблонов вносит большой вклад в повышение производительности;
-
Улучшенная интеграция с TypeScript: Vue3 написан на TypeScript, новый Composition API может хорошо поддерживать вывод типа TS, официальное расширение VSCode Vetur поддерживает проверку типов в шаблонах, а Vue3 полностью поддерживает tsx.
У Webpack больше конкурентов
Из-за отношений любви и ненависти к Webpack каждый создал новую цепочку инструментов разработки с более новыми идеями или более радикальными технологиями, что также побудило Webpack ускорить темп самоитерации.
-
Webpack 5.0 официально выпущен, которое является основным обновлением версии через 2,5 года, повышает производительность сборки за счет постоянного кэширования и уменьшает размер упаковки за счет улучшения Tree Shaking и генерации кода;
-
viteКак новый проект от автора Vue, он быстро привлек внимание.Он основан на нативном ES-импорте браузера, поэтому имеет более быстрый холодный старт и горячее обновление, а общая скорость не зависит от количества модулей. Нет процесса упаковки, исходный код напрямую передается в браузер для использования родного
<script module>Вводится грамматика, сервер разработки перехватывает запрос и конвертирует код, который нужно конвертировать, реализуя настоящую компиляцию по требованию. Рабочая среда предоставляет скрипт сборки vite для упаковки, основанный наrollupупаковать; -
на основе родногоES Module (ESM)современные упаковочные инструменты дляВыпущен Снежный Пак 2.0, его время запуска составляет менее 50 миллисекунд, и он может быстро работать в крупномасштабных проектах.Он имеет встроенную поддержку TypeScript, JSX, модулей CSS и может использоваться в сочетании с интерфейсными средами разработки, такими как React, Preact, Vue и Svelte;
-
Автор Babel Себастьян Маккензи представляет набор инструментов JavaScriptRome, включая компиляторы, проверки стиля кода, форматирование, упаковку, среды тестирования и т. д. Изюминкой является отсутствие сторонних зависимостей и упрощенная конфигурация API.
Спасибо
В этом году фронтенд переживает бум уже третий год, и я хотел бы поблагодарить четырех сменяющих друг друга редакторов: Ченг Ху, И И, Чи Бина, Мо Чена и специально приглашенного редактора: Цзы Юнфэй. Спасибо за вашу компанию на этом пути, и внимательное обдумывание каждого слова привело к осадкам этих трех лет.
Конечно, вам нужно поблагодарить вас, спасибо, спасибо за вашу заботу и похвалу, дающую нам много сил. В новом году продолжим придерживаться: оригинального, утонченного, строгого духа, вместе!
Опечатки
- @youyuxi: Rome не имеет ничего общего с Facebook. Автор Себастьян Маккензи раньше переходил на Discord, а теперь он уволился с работы, чтобы заниматься развитием Рима на постоянной основе за счет пожертвований.
Редакторы этого выпуска: Yisi, Chenghu, Chi Bing, Mochen Обзор: Все редакторы.