Эта страница переведена с помощью Cloud Translation API.

Что такое Блинк?

Sam Dutton

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

Blink служит движком рендеринга для браузеров на базе Chromium , включая Chrome, Android WebView, Microsoft Edge, Opera и Brave.

Механизм рендеринга — это компонент веб-браузера, который преобразует код HTML, CSS и JavaScript, а также изображения и другие ресурсы, в веб-страницы, которые можно просматривать и с которыми можно взаимодействовать.

Как Blink отображает веб-страницу?

Blink начинает процесс рендеринга, собирая все необходимые ресурсы, такие как HTML, CSS, JavaScript, видео и изображения. Чтобы получить эти ресурсы, Blink управляет взаимодействиями с сетевым стеком в Chromium и базовой операционной системе.

Как только CSS и HTML загружены, Blink может преобразовать этот код в виде текста в представление, с которым он может работать — это называется парсингом . JavaScript также необходимо проанализировать и затем выполнить.

После того, как все это сделано, Blink может начать работу по компоновке и отображению веб-страниц, которые вы можете просматривать и с которыми можно взаимодействовать. Это рендеринг .

На следующей диаграмме показаны этапы конвейера задач рендеринга, включая компоненты, процессы и ресурсы, задействованные в каждом из них. У Blink много работы!

Конвейер рендеринга Blink со стрелками, указывающими ход выполнения этапов. — Конвейер рендеринга Blink имеет загрузчик ресурсов, API скриптов и парсинг HTML/CSS. Он проходит через несколько этапов к отрисовке пикселей на экране.

Рендеринг графики

Blink использует графический движок Skia с открытым исходным кодом для взаимодействия с базовым графическим оборудованием компьютера или мобильного устройства.

Skia предоставляет общие API, которые работают на различных аппаратных и программных платформах. Он служит графическим движком для Google Chrome и многих других продуктов.

Вместо того, чтобы пытаться поддерживать различные операционные системы и устройства, при этом отслеживая изменения платформ, Skia использует графические библиотеки, включая OpenGL , Vulkan и DirectX . Библиотека, которую использует Skia, зависит от платформы, на которой она работает, например Android на мобильных устройствах или Windows на настольных компьютерах.

Анализ и выполнение JavaScript

Для анализа и выполнения кода JavaScript и WebAssembly Blink использует V8 — движок с открытым исходным кодом, разработанный проектами Chromium .

V8 позволяет разработчику использовать код JavaScript или WebAssembly для доступа к возможностям базового браузера. Например: для манипулирования Document Object Model , которая является внутренним представлением документа, который Blink создает из HTML-кода.

V8 обрабатывает JavaScript в соответствии со стандартом JavaScript, известным как ECMAScript .

Соответствие стандартам

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

Blink следует спецификациям функций браузера и языка, определенным в веб-стандартах, включая HTML , CSS и DOM .

HTML и DOM

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

Спецификация интерфейса написана на языке WebIDL : Web Interface Definition Language. Следующий WebIDL является частью определения HTMLImageElement в стандарте HTML.

[Exposed=Window,
 LegacyFactoryFunction=Image(optional unsigned long width, optional unsigned
long height)]
interface HTMLImageElement : HTMLElement {
 [HTMLConstructor] constructor();

 [CEReactions] attribute DOMString alt;
 [CEReactions] attribute USVString src;
 [CEReactions] attribute USVString srcset;
 [CEReactions] attribute DOMString sizes;
 [CEReactions] attribute DOMString? crossOrigin;
 [CEReactions] attribute DOMString useMap;
 [CEReactions] attribute boolean isMap;
 [CEReactions] attribute unsigned long width;
 [CEReactions] attribute unsigned long height;
 readonly attribute unsigned long naturalWidth;
 readonly attribute unsigned long naturalHeight;
 readonly attribute boolean complete;
 readonly attribute USVString currentSrc;
 [CEReactions] attribute DOMString referrerPolicy;
 [CEReactions] attribute DOMString decoding;
 [CEReactions] attribute DOMString loading;
 [CEReactions] attribute DOMString fetchPriority;

 Promise<undefined> decode();

 // also has obsolete members
};

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

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

`html_image_element.idl` в исходном коде Chromium.

Сторонние библиотеки

Blink использует несколько сторонних библиотек. Например, WebGL используется для рендеринга интерактивной 2D и 3D графики.

Библиотеки, такие как WebGL, высоко оптимизированы и тщательно протестированы. Они предоставляют Blink доступ к важным функциям и возможностям, без необходимости изобретать велосипед. WebGL IDL определен, и инженеры Blink соединяют этот веб-интерфейс с кодом и библиотеками на бэкэнде, которые используются для рендеринга множества различных элементов.

Если вы хотите увидеть WebGL в действии, ознакомьтесь с приложением для фрактального рендеринга Fractious , которое использует WebGL.

Fractious : средство просмотра множества Мандельброта на базе WebGL.

Кроссплатформенный рендеринг

Вам, возможно, интересно, использует ли Chrome Blink везде, на всех операционных системах и устройствах?

На iOS и iPadOS Chrome использует WebKit в качестве движка рендеринга. WebKit на самом деле был ответвлением другого проекта, KDE , который существовал еще в 1998 году. На самом деле, Safari и Chromium изначально были основаны на WebKit. Сегодня Safari и все браузеры в экосистеме Apple используют WebKit, согласно требованиям App Store от Apple.

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

Кроме того, Chromium хотел использовать функции, которые не были встроены в WebKit. Поэтому, начиная с версии 28, инженеры Chromium решили начать работу над собственным движком рендеринга. Они ответвили свой код от WebKit и назвали его Blink. Ходят слухи, что Blink был назван в честь (не очень) любимого тега <blink> , который был доступен в браузере Netscape Navigator для включения и выключения текста.

Подводя итог: Chrome, Microsoft Edge, Opera, Vivaldi, Arc, Brave и другие браузеры и фреймворки на базе Chromium используют Blink. Safari и некоторые другие браузеры используют WebKit, как и все браузеры на iOS и iPadOS, включая Chrome. Firefox использует движок рендеринга под названием Gecko .

Следующие шаги

Ознакомьтесь с разделом Что такое Blink Intents?.

Sam Dutton

Blink служит движком рендеринга для браузеров на базе Chromium , включая Chrome, Android WebView, Microsoft Edge, Opera и Brave.