Jedną z mocy internetu jest możliwość tworzenia kompozycji. Strony internetowe zawierają wiele różnych zasobów, które mogą pochodzić z różnych źródeł.
Blink jest mechanizmem renderowania w przypadku przeglądarek opartych na Chromium, w tym Chrome, WebView na Androida, Microsoft Edge, Opery i Brave.
Silnik renderowania to komponent przeglądarki internetowej, który przekształca kod HTML, CSS i JavaScript (oraz obrazy i inne zasoby) w strony internetowe, które można wyświetlać i z którymi można wchodzić w interakcje.
Jak Blink renderuje stronę internetową?
Blink rozpoczyna proces renderowania, zbierając wszystkie niezbędne zasoby, takie jak HTML, CSS, JavaScript, filmy i obrazy. Aby pobrać te zasoby, Blink zarządza interakcjami z poziomem sieci w Chromium i podstawowym systemie operacyjnym.
Gdy tylko wczytasz pliki CSS i HTML, Blink może przekształcić kod w postaci tekstu w postać, z którą może pracować. Nazywa się to analizą. Kod JavaScript musi też zostać przeanalizowany, a potem wykonany.
Gdy to wszystko zostanie zrobione, Blink może zacząć układać i wyświetlać strony internetowe, które możesz przeglądać i z którymi możesz wchodzić w interakcję. Jest to renderowanie.
Ten diagram pokazuje etapy przetwarzania zadań, w tym komponenty, procesy i zasoby wykorzystywane na każdym z nich. Blink ma dużo pracy do wykonania.
Renderowanie grafik
Blink korzysta z silnika graficznego Skia, który jest dostępny w wersji open source, do interakcji z podstawowym 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. Jest to silnik graficzny używany w Google Chrome i wielu innych usługach.
Zamiast prób obsługi różnych systemów operacyjnych i urządzeń, a zarazem nadążania za zmianami na platformach, Skia korzysta z bibliotek graficznych, takich jak OpenGL, Vulkan i DirectX. Biblioteka, której używa Skia, zależy od platformy, na której działa, np. Android na urządzeniach mobilnych lub Windows na komputerach.
Analiza i wykonywanie kodu JavaScript
Do parsowania i wykonywania kodu JavaScript i WebAssembly Blink używa mechanizmu V8, który jest mechanizmem open source opracowanym przez projekty Chromium.
V8 umożliwia deweloperom korzystanie z kodu JavaScript lub WebAssembly do uzyskiwania dostępu do funkcji przeglądarki. Na przykład: do manipulowania modelem obiektów dokumentu, który jest wewnętrzną reprezentacją dokumentu tworzonego przez Blinka na podstawie kodu HTML.
V8 przetwarza kod JavaScript zgodnie ze standardem JavaScript znanym jako ECMAScript.
Renderowanie zgodnie ze standardami
V8 przetwarza kod JavaScript zgodnie ze standardem ECMAScript. Silniki renderowania, takie jak Blink, są zaprojektowane tak, aby umożliwiać interoperacyjną implementację standardów internetowych. Standardy internetowe pozwalają programistom i użytkownikom mieć pewność, że strony internetowe będą działać prawidłowo niezależnie od używanej przeglądarki.
Blink stosuje specyfikacje funkcji przeglądarki i języka określone w standardach internetowych, w tym HTML, CSS i DOM.
HTML i DOM
Standard HTML określa, jak programiści przeglądarek powinni implementować elementy HTML. Specyfikacja każdego elementu HTML zawiera sekcję definiującą interfejs DOM tego elementu. Zawiera on szczegółowe informacje o tym, 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 języku WebIDL (Web Interface Definition Language). Podany poniżej 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 stanowią większość standardów internetowych.
Aby wdrożyć funkcję, inżynierowie umieszczają kod WebIDL w pliku, który jest automatycznie przekształcany przez Blinka, aby zapewnić interfejs dla deweloperów dla danej funkcji. Gdy interfejs zostanie zdefiniowany za pomocą WebIDL, inżynierowie mogą tworzyć implementacje, które odpowiadają 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ą bardzo zoptymalizowane i starannie testowane. Zapewniają one Blink dostęp do ważnych funkcji i funkcjonalności bez konieczności wymyślania wszystkiego od nowa. Definiuje się interfejs IDL WebGL, a inżynierowie Blink łączą go z kodem i bibliotekami na backendzie, które są używane 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.
Renderowanie na wielu platformach
Zastanawiasz się, czy Chrome używa Blink wszędzie, na wszystkich systemach operacyjnych i urządzeniach?
Na iOS i iPadOS przeglądarka Chrome używa silnika renderowania WebKit. WebKit był w istocie odgałęzią innego projektu, KDE, który istnieje od 1998 r. W zasadzie zarówno Safari, jak i Chromium były początkowo oparte na WebKit. Obecnie Safari i wszystkie przeglądarki w ekosystemie Apple korzystają z WebKit zgodnie z wymaganiami App Store.
Z upływem czasu projekty Chromium opracowali inną architekturę wieloprocesową, ponieważ utrzymywanie dwóch oddzielnych architektur w jednej bazie kodu stawało się problematyczne.
Poza tym zespół Chromium chciał używać funkcji, które nie były wbudowane w WebKit. Dlatego począwszy od wersji 28 inżynierowie Chromium postanowili zacząć pracować nad własnym silnikiem renderowania. Rozgałęzili kod WebKit i nazwali go Blink. Pogłoski głoszą, że Blink został nazwany na cześć (niezbyt) ulubionego tagu <blink>, który był dostępny w przeglądarce Netscape Navigator i służył do włączania i wyłączania migania tekstu.
Podsumowując: przeglądarki Chrome, Microsoft Edge, Opera, Vivaldi, Arc, Brave i inne przeglądarki oraz frameworki oparte na Chromium korzystają z Blink. Safari i niektóre inne przeglądarki używają WebKit, podobnie jak wszystkie przeglądarki na iOS i iPadOS, w tym Chrome. Firefox używa mechanizmu renderowania o nazwie Gecko.
Dalsze kroki
Dowiedz się więcej o intencjach Blink.