Co to jest Blink?

Sam Dutton

Jedną z wyjątkowych zalet internetu jest jego modułowość. Strony internetowe zawierają różne zasoby, które mogą pochodzić z wielu źródeł.

Blink służy jako mechanizm renderowania w Chromium, w tym w Chrome, Android WebView, Microsoft Edge, Operze i Brave.

Mechanizm renderowania to komponent przeglądarki internetowej, który przekształca kod HTML, CSS i JavaScript – wraz z obrazami i innymi zasobami – w strony internetowe, które możesz wyświetlać i z którymi możesz wchodzić w interakcje.

Jak Blink renderuje stronę internetową?

Blink rozpoczyna proces renderowania od zebrania wszystkich niezbędnych zasobów, takich jak HTML, CSS, JavaScript, filmy i obrazy. Aby pobrać te zasoby, Blink zarządza interakcjami ze stosem sieciowym w Chromium i bazowym systemie operacyjnym.

Gdy tylko CSS i HTML zostaną wczytane, Blink może przekształcić ten kod w postaci tekstu w reprezentację, z którą może pracować. Nazywa się to parsowaniem. Kod JavaScript również musi zostać przeanalizowany, a następnie wykonany.

Gdy to wszystko zostanie zrobione, Blink rozpoczyna renderowanie. Renderowanie to proces układania i wyświetlania stron internetowych, które możesz wyświetlać i z którymi możesz wchodzić w interakcje.

Poniższy diagram przedstawia etapy procesu renderowania, w tym komponenty, procesy i zasoby, które są w nie zaangażowane. Blink ma dużo pracy!

Potok renderowania Blink ze strzałkami wskazującymi postęp na poszczególnych etapach. — Proces renderowania w Blink obejmuje wczytywanie zasobów, interfejsy API skryptów oraz analizowanie kodu HTML i CSS. Proces ten przebiega przez kilka etapów, aż do narysowania pikseli na ekranie.

Renderowanie grafiki

Blink używa silnika graficznego Skia o otwartym kodzie źródłowym do interakcji z bazowym sprzętem graficznym komputera lub urządzenia mobilnego.

Skia udostępnia wspólne interfejsy API, które działają na różnych platformach sprzętowych i programowych. Służy jako silnik graficzny w Google Chrome i wielu innych produktach.

Zamiast próbować obsługiwać różne systemy operacyjne i urządzenia, jednocześnie nadążając za zmianami platformy, Skia używa bibliotek graficznych, w tym OpenGL, Vulkan, i DirectX. Biblioteka, z której korzysta Skia, zależy od platformy, na której jest uruchomiona, np. Androida na urządzeniu mobilnym lub Windowsa na komputerze.

Parsowanie i wykonywanie kodu JavaScript

Do parsowania i wykonywania kodu JavaScript i WebAssembly Blink używa V8, silnika o otwartym kodzie źródłowym opracowanego przez projekty Chromium.

V8 umożliwia deweloperowi używanie kodu JavaScript lub WebAssembly do uzyskiwania dostępu do funkcji bazowej przeglądarki. Na przykład do manipulowania obiektowym modelem dokumentu, który jest wewnętrzną reprezentacją dokumentu tworzoną przez Blink na podstawie kodu HTML.

V8 przetwarza JavaScript zgodnie ze standardem JavaScript, znanym jako ECMAScript.

Renderowanie zgodnie ze standardami

V8 przetwarza JavaScript zgodnie ze standardem JavaScript, znanym jako ECMAScript. Mechanizmy renderowania, takie jak Blink, są zaprojektowane tak, aby interoperacyjnie implementować standardy internetowe. Standardy internetowe pozwalają deweloperom i użytkownikom mieć pewność, że strony internetowe będą działać prawidłowo niezależnie od używanej przeglądarki.

Blink jest zgodny ze specyfikacjami funkcji przeglądarki i języka zdefiniowanymi w standardach internetowych, w tym HTML, CSS i DOM.

HTML i DOM

Standard HTML określa, jak inżynierowie przeglądarek powinni implementować elementy HTML. Specyfikacja każdego elementu HTML zawiera sekcję, która definiuje interfejs DOM dla tego elementu. Opisuje ona, jak przeglądarka powinna implementować JavaScript, aby umożliwić interakcję z elementem w sposób standardowy na różnych urządzeniach i platformach.

Specyfikacja interfejsu jest napisana w WebIDL: języku definiowania interfejsu internetowego. Poniższy kod WebIDL jest częścią definicji HTMLImageElement w standardzie 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 to standardowy sposób opisywania interfejsów funkcjonalnych, takich jak te, które składają się na większość standardów internetowych.

Aby zaimplementować funkcję, inżynierowie umieszczają kod WebIDL w pliku, który jest automatycznie przekształcany przez Blink, aby udostępnić deweloperom interfejs tej funkcji. Gdy interfejs zostanie zdefiniowany za pomocą WebIDL, inżynierowie mogą tworzyć implementacje, które reagują na wywołania interfejsu.

`html_image_element.idl` w źródle Chromium.

Biblioteki innych firm

Blink używa wielu bibliotek innych firm. Na przykład, WebGL służy do renderowania interaktywnej grafiki 2D i 3D.

Biblioteki takie jak WebGL są wysoce zoptymalizowane i starannie przetestowane. Dzięki nim Blink ma dostęp do ważnych funkcji bez konieczności ponownego ich tworzenia. Interfejs WebGL IDL jest zdefiniowany, a inżynierowie Blink łączą ten interfejs internetowy z kodem i bibliotekami na backendzie, które służą do renderowania wielu różnych elementów .

Jeśli chcesz zobaczyć WebGL w akcji, wypróbuj aplikację do renderowania fraktali Fractious, która korzysta z WebGL.

Fractious to przeglądarka oparta na WebGL, która służy do wyświetlania zbioru Mandelbrota. — Otwórz wersję demonstracyjną Fractious.

Renderowanie na wielu platformach

Możesz się zastanawiać, czy Chrome używa Blink wszędzie, na wszystkich systemach operacyjnych i urządzeniach.

W iOS i iPadOS Chrome używa WebKit jako mechanizmu renderowania. WebKit był w rzeczywistości forkiem innego projektu, KDE, który powstał w 1998 roku. Safari i Chromium były początkowo oparte na WebKit. Obecnie Safari i wszystkie przeglądarki w ekosystemie Apple używają WebKit zgodnie z wymaganiami App Store firmy Apple .

Z czasem projekty Chromium opracowały inną architekturę oprogramowania wieloprocesowego, ponieważ utrzymywanie 2 oddzielnych architektur w jednej bazie kodu stawało się problematyczne.

Ponadto Chromium chciało używać funkcji, które nie były wbudowane w WebKit. Dlatego począwszy od wersji 28 inżynierowie Chromium postanowili rozpocząć pracę nad własnym mechanizmem renderowania. Utworzyli fork kodu z WebKit i nazwali go Blink. Plotki głoszą, że Blink został nazwany na cześć (nie tak) ukochanego <blink> tagu, który był dostępny w przeglądarce Netscape Navigator, aby tekst migał.

Podsumowując: Chrome, Microsoft Edge, Opera, Vivaldi, Arc, Brave i inne przeglądarki oraz platformy oparte na Chromium używają Blink. Safari i niektóre inne przeglądarki używają WebKit, podobnie jak wszystkie przeglądarki w iOS i iPadOS, w tym Chrome. Firefox używa mechanizmu renderowania o nazwie Gecko.