Одно из особых преимуществ интернета — его компонуемость. Веб-страницы содержат множество различных ресурсов, потенциально имеющих несколько источников.
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 использует графический движок Skia с открытым исходным кодом для взаимодействия с графическим оборудованием компьютера или мобильного устройства.
Skia предоставляет общие API, работающие на различных аппаратных и программных платформах. Она используется в качестве графического движка в Google Chrome и многих других продуктах.
Вместо того чтобы пытаться поддерживать различные операционные системы и устройства, одновременно отслеживая изменения платформы, Skia использует графические библиотеки, включая OpenGL , Vulkan и DirectX . Используемая Skia библиотека зависит от платформы, на которой она работает, например, Android на мобильных устройствах или Windows на настольных компьютерах.
Анализ и выполнение JavaScript
Для анализа и выполнения кода JavaScript и WebAssembly Blink использует V8 , движок с открытым исходным кодом, разработанный проектами Chromium .
V8 позволяет разработчику использовать код JavaScript или WebAssembly для доступа к возможностям базового браузера. Например: для манипулирования объектной моделью документа (DOM) , которая представляет собой внутреннее представление документа, создаваемое 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 доступ к важным функциям и возможностям, не требуя изобретения велосипеда. Определен IDL WebGL, и инженеры Blink связывают этот веб-интерфейс с кодом и библиотеками на бэкэнде, которые используются для рендеринга множества различных элементов.
Если вы хотите увидеть 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 .