Говоря о тенденции развития веб-интерфейса

внешний интерфейс переводчик JavaScript WebAssembly

предисловие

Вы фронтенд-писатель и смеете называть себя программистом? ?

15308408976286

Я считаю, что партнеры по веб-разработке будут подвергаться сомнению или высмеиваться (большинство из них на самом деле предназначены для высмеивания) в карьере. Написать несколько тегов, понять какой HTML CSS программист? Знаете ли вы процессор, хранилище, сеть, кластер? Вы когда-нибудь узнавали о параллелизме, бизнес-архитектуре, базе данных, настройке производительности, распределенных вычислениях, кластерной архитектуре, аварийном восстановлении, безопасности, эксплуатации и обслуживании?

Хум острая курица 👎

Сегодня мы приносим соль на передний край

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

  • 1. Фронтенд-инженерное решение с использованием Node в качестве промежуточного уровня
  • 2. Инструменты упаковки, такие как Webpack и Rollup, инструменты перевода, такие как Babel и PostCSS.
  • 3. Front-end фреймворки, такие как React, Angular и Vue, которые представляют собой front-end тройки, ориентированы на потребности современных веб-приложений и их экологию.
  • 4. Гибридный режим разработки в сочетании с APP, встроенным одностраничным веб-просмотром, гибридным приложением.

Вычислительная мощность JavaScript, возможности компоновки CSS, кэширование HTTP и API-интерфейсы браузера обеспечивают качественный скачок в пользовательском опыте.

Заходя в тему, начнем с 2-х аспектов:

  • Следующее поколение веб-приложений: PWA
  • WebAssembly

Поговорим о тренде фронтенд-разработки

Следующее поколение веб-приложений: PWA

Это клише, давайте сначала сравним плюсы и минусы WebAPP и нативного APP в жизни

Преимущества веб-приложения по сравнению с нативным приложением
низкая стоимость разработки
Адаптируйтесь к различным мобильным устройствам, без множественных наборов кодов для IOS и Android
Итеративное обновление упрощается, устраняя потери времени, вызванные проверкой, выпуском пакетов и выпуском по различным каналам.
Без затрат на установку, готовый к использованию
Недостатки веб-приложений по сравнению с нативными приложениями
Опыт просмотра не может превзойти родное приложение, загрузка медленная, а белый экран вращается по кругу.
Мало поддерживает автономный режим
Пуш-сообщение и его трудности
Локальная системная функция не может быть вызвана

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

Проблемы, решаемые PWA

  • Может значительно улучшить скорость загрузки приложений
  • Даже сделать веб-приложения доступными в автономной среде (Service Worker)
  • Веб-приложения можно добавлять на главный экран и запускать в полноэкранном режиме, как собственные приложения (манифест веб-приложения).
  • Дальнейшее улучшение возможностей интеграции веб-приложений и операционных систем, чтобы веб-приложения могли инициировать push-уведомления (Push API и Notification API), когда они не активированы.

Очень зрелая 🌰 (пример) "Alibaba of India" - Flipkart

FlipKart Lite должен стать самым обсуждаемым кейсом PWA Когда браузер обнаружит, что пользователю нужен Flipkart Lite, он предложит пользователю «Здравствуйте, вы можете добавить его на главный экран», конечно, вы также можете добавить его вручную в правом верхнем углу. Таким образом, Flipkart Lite оставит пользовательский значок на главном экране в качестве записи, как собственное приложение; в отличие от добавления веб-закладок в целом, когда пользователь щелкает этот значок, Flipkat Lite сразу открывается в полноэкранном режиме, а не в ловушке. В пользовательском интерфейсе браузера есть и собственный эффект заставки.

15300655325976

И есть большой прорыв.Когда доступ к сети невозможен, Flipkart Lite может быть запущен как родное приложение, и оно станет очень злым черно-белым; мало того, продукты, к которым был доступ, будут кэшированы и могут быть в автономном режиме. продолжать посещать. В такие моменты, как снижение цен на продукты и рекламные акции, Flipkart Lite будет отправлять push-уведомления, как и нативные приложения, чтобы привлечь пользователей обратно в приложение.

15300656314905

Далее давайте рассмотрим 2 важных технических аспекта PWA, Web APP Manifest и Service Worker.

Web App Manifest

Ссылка на ссылку: https://developers.google.com/web/fundamentals/web-app-manifest/?hl=zh-cn

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

Обобщите три шага Манифеста:

  • Создайте контрольный список и свяжите его со своей страницей.
  • Управляйте тем, что видят пользователи при запуске с главного экрана.
  • Экран-заставка, цвета темы, открытые URL-адреса и т. д.

Создать демонстрацию манифеста

15300662214848

short_name: Укажите короткое, удобочитаемое имя для приложения. Используется, когда недостаточно места для отображения полного имени. name: укажите удобочитаемое имя для приложения. icons: массив объектов изображений, используемых в качестве значков приложений в различных средах. start_url: указывает URL-адрес, который загружается, когда пользователь запускает приложение с устройства.

15300662332376

После создания манифеста и добавления его на свой веб-сайт добавьте тег ссылки на все страницы, содержащие веб-приложение.

некоторые варианты

Добавить заставку экрана заставки

15300666570624

Установить стиль запуска

15300666779957

Вот выбрать ли полноэкранный режим или сохранить адресную строку

debugger

15300675492998

Браузер Chrome предоставил нам несколько методов и средств: напрямую войти в раздел «Приложение», выбрать вкладку манифеста и добавить его в приложение Chrome.

Манифест в html5 используется для кэширования некоторых ресурсов на веб-странице, что полностью отличается от манифеста WebApp в нашем PWA.

<!DOCTYPE HTML>
<html manifest="demo.appcache">
</html>

Service Worker

Наше изначальное веб-приложение было построено наПользователь может выйти в сетьСогласно предпосылке, так что, когда вы находитесь в автономном режиме, вы можете только смотреть круг. Интернет-сообщество также предприняло множество подобных попыток, таких как APP Cache. Однако у него почти нет механизма роутинга, и его нельзя отследить, если есть баг, и его сейчас убили в html5.1.

В это время родились работники службы! !

Сервисные работники по сути действуют как прокси-сервер между веб-приложением и браузером, а также могут действовать как прокси-сервер между браузером и сетью, когда сеть доступна. Они предназначены (среди прочего) для обеспечения эффективного автономного взаимодействия, перехвата сетевых запросов и выполнения соответствующих действий в зависимости от того, доступна ли сеть и находится ли обновленный ресурс на сервере. Они также предоставляют доступ к push-уведомлениям и API фоновой синхронизации.

Service Worker будет придерживаться следующего жизненного цикла:

  • скачать
  • Установить
  • активация

15300681075578
15300681336107

Взгляните на пример кода


if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw-test/sw.js', { scope: '/sw-test/' }).then(function(reg) {

    if(reg.installing) {
      console.log('Service worker installing');
    } else if(reg.waiting) {
      console.log('Service worker installed');
    } else if(reg.active) {
      console.log('Service worker active');
    }

  }).catch(function(error) {
    // registration failed
    console.log('Registration failed with ' + error);
  });
}

Этот код сначала выполняет проверку функций, чтобы убедиться, что Service Worker поддерживается перед регистрацией. Далее мы используемServiceWorkerContainer.register()функция для регистрации сервис-воркера, Это регистрирует работника службы.

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        '/sw-test/',
        '/sw-test/index.html',
        '/sw-test/style.css',
        '/sw-test/app.js',
        '/sw-test/image-list.js',
        '/sw-test/star-wars-logo.jpg',
        '/sw-test/gallery/bountyHunters.jpg',
        '/sw-test/gallery/myLittleVader.jpg',
        '/sw-test/gallery/snowTroopers.jpg'
      ]);
    })
  );
});

  • Добавлен прослушиватель для события установки, за которым следует метод ExtendableEvent.waitUntil() для события — это гарантирует, что сервисный работник не установится, пока не завершится выполнение кода в waitUntil().

  • Внутри waitUntil() мы используем метод caches.open() для создания нового кеша с именем v1, который будет первой версией кеша ресурсов нашего сайта.

  • Он возвращает промис, который создает кеш, и когда он разрешается, мы вызываем метод addAll() для созданного экземпляра кеша, который принимает массив URL-адресов относительно источника. Эти URL-адреса представляют собой список ресурсов, которые вы хотите кэшировать.

  • Новый API хранилища подписей Service Worker — кеш — это глобальный объект в сервис-воркере, который позволяет нам хранить ресурсы из сетевых ответов и генерировать ключи на основе их запросов.

15300708550158

Ссылка на ссылку: https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API/Using_Service_Workers

Push Push-уведомление

Появление Push API позволяет службам push-уведомлений отправлять сообщения веб-приложениям.Он определяет, как веб-приложения инициируют подписки на службы push-уведомлений, как реагировать на сообщения push-уведомлений, а также аутентификацию и аутентификацию между веб-приложениями, серверами приложений и службами push-уведомлений. механизм; поскольку Push API не зависит от веб-приложения и пользовательского интерфейса браузера, чтобы выжить, даже когда веб-приложение и браузер не открываются пользователем, фоновый процесс может принять push-сообщение и вызвать Notification API, чтобы уведомить пользователя


self.addEventListener('push', event => {
    event.waitUntil(
        // Process the event and display a notification.
        self.registration.showNotification("Hey!")
    );
});

self.addEventListener('notificationclick', event => {
    // Do something with the event
    event.notification.close();
});

self.addEventListener('notificationclose', event => {
    // Do something with the event
});

PWA предстоит пройти долгий путь

  • Китай уделяет больше внимания iOS, а iOS очень недружелюбна к PWA.

  • Отечественный Android на самом деле «Android» и не поставляется с Chrome.Во-вторых, производители любят работать сверхурочно (JB) для настройки различных систем, что приводит к проблемам совместимости.

  • Push-уведомления все еще находятся в зачаточном состоянии (пока нет стандартного протокола), и будущее будет более изменчивым.

  • Внутренние порталы веб-приложений в основном сосредоточены в различных приложениях, таких как WeChat и QQ, что накладывает множество ограничений.

WebAssembly

Некоторые картинки и концепции взяты из справочной ссылки: https://hacks.mozilla.org/2017/02/a-cartoon-intro-to-webassembly/

15300714659625
15300714727109

Брэндон Айк: Вы сказали, что ваш начальник запустил приложение за 10 дней и сошел с ума? Большой брат выучил язык за 10 дней

Именно потому, что рождение JS не такое уж «официальное», оно несет с собой множество подводных камней и ограничений производительности. Это больше похоже на здание, которое все еще строится, мы, веб-разработчики, продолжаем его достраивать, и однажды оно станет небоскребом!

Что такое веб-сборка

  • WebAssembly — это новая спецификация, разработанная группой сообщества W3C, состоящей из основных производителей браузеров.

  • Его аббревиатура — «.wasm», .wasm — суффикс имени файла, это новый низкоуровневый безопасный двоичный синтаксис.

  • Работает почти с собственной производительностью и предоставляет цель компиляции для таких языков, как C/C++, чтобы они могли работать в Интернете. Он также предназначен для сосуществования с JavaScript, что позволяет им работать вместе.

  • Может преодолеть узкое место в скорости работы интерфейсных 3D-игр, VR / AR, машинного зрения, обработки изображений и т. д.

Давайте посмотрим на демо: http://webassembly.org.cn/demo/Tanks/

Как работает WebAssembly

Прежде чем разбираться в WebAssembly, давайте в общих чертах поймем, как работает код.

В мире кода обычно есть два способа перевода машинного языка: интерпретаторы и компиляторы.

Если он через интерпретатор, линия перевода по линии, чтобы объяснить боковое исполнение края

15300785911993

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

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

Компилятор должен компилировать весь исходный код в объектный код, и компилятор больше не нужен во время выполнения, и он работает непосредственно на платформе, которая поддерживает объектный код.

15300786239924

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

Первые браузеры были только интерпретаторами, потому что интерпретаторы казались более подходящими для JavaScript. Для веб-разработчика очень важно иметь возможность быстро выполнять код и видеть результаты. Позже был также добавлен компилятор для формирования смешанного режима.

Добавьте монитор для наблюдения за выполнением кода, записывайте, сколько раз выполнялся код, как он выполняется и т. д.

Какая польза от добавления так много

Первоначально монитор отслеживает весь код, проходящий через интерпретатор.

15300791434221

Если одна и та же строка кода выполняется несколько раз, сегмент кода помечается как «теплый», а если он выполняется много раз, он помечается как «горячий».

Если кусок кода становится «теплым», браузер отправляет его компилятору для компиляции, а результат компиляции сохраняется. -- (базовый компилятор)

Каждая строка сегмента кода будет скомпилирована в «заглушку» (stub), и этой заглушке будет присвоен индекс с «номер строки + тип переменной». Если монитор отслеживает выполнение одного и того же кода и одного и того же типа переменной, отправьте скомпилированную версию прямо в браузер.

15300797943329

Если фрагмент становится «очень горячим», монитор отправит его наоптимизирующий компиляторсередина. Создайте более быструю и эффективную версию кода и сохраните ее. -- (оптимизирующий компилятор)

Оптимизирующие компиляторы делают некоторые предположения. Если объекты на каждой предыдущей итерации цикла имеют одинаковую форму, то оптимизирующий компилятор может предположить, что все объекты, которые он проходит, будут иметь одинаковую форму. Но для JavaScript никогда нет гарантии, что первые 99 объектов сохранят свою форму, может быть, у 100-го объекта отсутствует определенное свойство, в это время процесс выполнения вернется к интерпретатору или базовому компилятору, называемомуоптимизировать

15300797943329

function arraySum(arr) {
  var sum = 0;
  for (var i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
}

Если arr представляет собой массив из 100 целых чисел, тип определяется, и его легко отправить оптимизирующему компилятору. Но все типы в JavaScript являются динамическими. Не гарантируется, что два числа sum и arr[i] будут целыми числами. Arr[i], скорее всего, станет строковым типом, который будет оптимизирован и переназначен интерпретатору или базовой линии. переводчик

То есть как это составить и объяснить?

У нас есть не только один вид перевода машинного кода, разные машины имеют разные машинные коды, точно так же, как мы, люди, говорим на разных языках, машины также «говорят» на разных языках.

Если вы хотите перевести с любого языка высокого уровня на один из многих языков ассемблера (в зависимости от внутренней структуры машины), один из способов — создать разные трансляторы, которые выполняют отображение с различных языков высокого уровня на сборка.

15300804906133

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

15300807406283

Передняя часть компилятора переводит язык высокого уровня в IR, а задняя часть компилятора переводит IR в ассемблерный код для целевой машины.

вот и дело

15300808312348

Где WebAssembly? Фактически, вы можете думать об этом как об еще одном "языке ассемблера объектов".

Каждый целевой язык ассемблера (x86, ARM) зависит от конкретной архитектуры машины. Когда вы хотите запустить свой код на машине пользователя, вы не знаете, как выглядит структура целевой машины.

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

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

Тогда почему бы не использовать JS напрямую, так хлопотно использовать WebAssembly

15300826048069

Это распределение использования производительности JS

  • Синтаксический анализ — представляет время, необходимое для преобразования исходного кода в код, который может выполнять интерпретатор;

  • Компиляция + оптимизация — указывает время, затраченное базовым и оптимизирующим компиляторами. Некоторая работа оптимизирующего компилятора не выполняется в основном потоке и здесь не рассматривается.

  • Повторная оптимизация — включает время на повторную оптимизацию, отбрасывание и возврат к базовому компилятору.

  • Execution - время выполнения кода

  • Сборка мусора - сборка мусора, пора очистить память

15300828887458

Вот как WebAssmbly сравнивается с JS

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

особые преимущества

  • получение файла

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

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

  • Разобрать

Исходный код JavaScript достигает браузера и анализируется в AST (абстрактное синтаксическое дерево). После синтаксического анализа AST (абстрактное синтаксическое дерево) становится промежуточным кодом (называемым байт-кодом), который предоставляется механизму JS для компиляции.

WebAssembly, с другой стороны, не требует этого преобразования, так как сам по себе является промежуточным кодом. Все, что ему нужно сделать, это декодировать и проверить, нет ли в коде ошибок.

  • оптимизация

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

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

  • вывоз мусора

Понятие памяти в JS очень расплывчатое, потому что JS не нужно подавать заявку на память, вся память автоматически выделяется JS, потому что она неуправляема, поэтому принесет накладные расходы на производительность при очистке мусора

WebAssembly не требует сборки мусора, а операции с памятью контролируются вручную (как в C, C++). Это увеличивает стоимость разработки для разработчиков, но также делает выполнение кода более эффективным.

Как реализовать демонстрацию WebAssembly

Ссылка на ссылку: http://webassembly.org.cn/getting-started/developers-guide/

15300836901005

int square (int x) {
  return x * x;
}

emcc math.c -s WASM=1 -o index.html

15300837997256

Завершите пример танкового боя прямо сейчас с 0

15300845024215

15300845134273

4. Готово

Спасибо всем~

Широкая реклама

Эта статья была опубликована вЕженедельный выпуск Mint Front End, Добро пожаловать в Watch & Star ★, пожалуйста, указывайте источник при перепечатке.

Добро пожаловать, чтобы обсудить, поставить лайк и перейти ｡◕‿◕｡～

Категории