Salah satu kekuatan khusus web adalah kemampuan komposisinya. Halaman web menyertakan berbagai resource yang berbeda, yang mungkin berasal dari beberapa origin.
Blink berfungsi sebagai mesin rendering untuk browser berbasis Chromium, termasuk Chrome, Android WebView, Microsoft Edge, Opera, dan Brave.
Mesin rendering adalah komponen browser web yang mengubah kode HTML, CSS, dan JavaScript—beserta gambar dan resource lainnya—menjadi halaman web yang dapat Anda lihat dan gunakan.
Bagaimana cara Blink merender halaman web?
Blink memulai proses rendering dengan mengumpulkan semua resource yang diperlukan seperti HTML, CSS, JavaScript, video, dan gambar. Untuk mengambil resource ini, Blink mengelola interaksi dengan stack jaringan, di Chromium dan sistem operasi yang mendasarinya.
Segera setelah CSS dan HTML dimuat, Blink dapat mengubah kode tersebut, dalam bentuk teks, menjadi representasi yang dapat digunakan—yang disebut parsing. JavaScript juga perlu diuraikan, lalu dieksekusi.
Setelah semua itu selesai, Blink dapat mulai menata dan menampilkan halaman web yang dapat Anda lihat dan berinteraksi. Ini adalah rendering.
Diagram berikut menunjukkan tahap dalam pipeline tugas rendering, termasuk komponen, proses, dan resource yang terlibat dalam setiap tahap. Blink memiliki banyak pekerjaan yang harus dilakukan.
Merender grafik
Blink menggunakan mesin grafis Skia open source untuk berinteraksi dengan hardware grafis yang mendasari komputer atau perangkat seluler.
Skia menyediakan API umum yang berfungsi di berbagai platform hardware dan software. Library ini berfungsi sebagai mesin grafis untuk Google Chrome dan banyak produk lainnya.
Skia menggunakan library grafis, termasuk OpenGL, Vulkan, dan DirectX, alih-alih mencoba mendukung berbagai sistem operasi dan perangkat, sekaligus menjaga agar tetap mengikuti perubahan platform. Library yang digunakan Skia bergantung pada platform tempatnya berjalan, seperti Android di perangkat seluler atau Windows di desktop.
Mengurai dan mengeksekusi JavaScript
Untuk mengurai dan mengeksekusi kode JavaScript dan WebAssembly, Blink menggunakan V8, mesin open source yang dikembangkan oleh project Chromium.
V8 memungkinkan developer menggunakan kode JavaScript atau WebAssembly untuk mengakses kemampuan browser yang mendasarinya. Misalnya: untuk memanipulasi Document Object Model, yang merupakan representasi internal dokumen yang dibuat Blink dari kode HTML.
V8 memproses JavaScript sesuai dengan standar JavaScript, yang dikenal sebagai ECMAScript.
Rendering sesuai standar
V8 memproses JavaScript sesuai dengan standar JavaScript, yang dikenal sebagai ECMAScript. Mesin rendering seperti Blink dirancang untuk menerapkan standar web secara interoperabilitas. Standar web memungkinkan developer dan pengguna akhir yakin bahwa halaman web berfungsi dengan baik, apa pun browser yang mereka gunakan.
Blink mengikuti spesifikasi untuk fitur browser dan bahasa yang ditentukan dalam standar web, termasuk HTML, CSS, dan DOM.
HTML dan DOM
Standar HTML menentukan cara engineer browser menerapkan elemen HTML. Spesifikasi untuk setiap elemen HTML menyertakan bagian yang menentukan antarmuka DOM untuk elemen tersebut. Ini menjelaskan cara JavaScript harus diterapkan oleh browser, untuk memungkinkan interaksi dengan elemen dengan cara yang distandarisasi di seluruh perangkat dan platform.
Spesifikasi antarmuka ditulis dalam
WebIDL: Web
Interface Definition Language. WebIDL berikut adalah bagian dari definisi standar HTML untuk HTMLImageElement.
[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 adalah cara standar untuk mendeskripsikan antarmuka fungsional, seperti antarmuka yang membentuk sebagian besar standar web.
Untuk menerapkan fitur, engineer menempatkan kode WebIDL tersebut dalam file, dan kode ini otomatis diubah oleh Blink untuk menyediakan antarmuka kepada developer untuk fitur tersebut. Setelah antarmuka ditentukan dengan WebIDL, engineer dapat mem-build implementasi yang merespons panggilan antarmuka.
html_image_element.idl di sumber Chromium.Library pihak ketiga
Blink menggunakan beberapa library pihak ketiga. Misalnya, WebGL digunakan untuk merender grafik 2D dan 3D interaktif.
Library seperti WebGL dioptimalkan secara maksimal dan diuji dengan cermat. API ini memberi Blink akses ke fitur dan fungsi penting, tanpa perlu membuat ulang roda. IDL WebGL ditentukan, dan engineer Blink menghubungkan antarmuka web tersebut dengan kode dan library di backend yang digunakan untuk merender banyak elemen yang berbeda .
Jika Anda ingin melihat cara kerja WebGL, lihat aplikasi rendering frakta Fractious, yang menggunakan WebGL.
Rendering lintas platform
Anda mungkin bertanya-tanya, apakah Chrome menggunakan Blink di mana saja, di semua sistem operasi dan perangkat?
Di iOS dan iPadOS, Chrome menggunakan WebKit sebagai mesin rendering-nya. WebKit sebenarnya adalah fork dari project lain, KDE, yang sudah ada sejak tahun 1998. Faktanya, Safari dan Chromium awalnya didasarkan pada WebKit. Saat ini, Safari dan semua browser di ekosistem Apple menggunakan WebKit, sesuai dengan persyaratan App Store Apple.
Seiring waktu, project Chromium mengembangkan arsitektur software multiproses yang berbeda, karena mempertahankan dua arsitektur terpisah dalam satu codebase menjadi bermasalah.
Selain itu, Chromium ingin menggunakan fitur yang tidak di-build ke dalam
WebKit. Jadi, mulai dari versi 28, engineer Chromium memutuskan untuk mulai mengerjakan
mesin rendering mereka sendiri. Mereka mem-fork kode dari WebKit, dan
menyebutnya Blink. Rumornya, Blink dinamai berdasarkan tag <blink> (yang tidak begitu) disukai
yang tersedia di browser Netscape Navigator untuk membuat teks
berkedip dan mati.
Singkatnya: Chrome, Microsoft Edge, Opera, Vivaldi, Arc, Brave, dan browser serta framework berbasis Chromium lainnya menggunakan Blink. Safari dan beberapa browser lainnya menggunakan WebKit, bersama dengan semua browser di iOS dan iPadOS, termasuk Chrome. Firefox menggunakan mesin rendering yang disebut Gecko.