Apa yang dimaksud dengan Blink?

Sam Dutton

Salah satu kemampuan khusus web adalah kemampuannya untuk menyusun. Halaman web mencakup berbagai resource yang berbeda, yang berpotensi 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 diprosesnya. Hal ini disebut parsing. JavaScript juga perlu diuraikan lalu dieksekusi.

Setelah semuanya selesai, Blink mulai merender. Rendering adalah proses menata dan menampilkan halaman web yang Anda lihat dan ajak berinteraksi.

Diagram berikut menunjukkan tahap-tahap dalam pipeline tugas rendering, termasuk komponen, proses, dan resource yang terlibat di setiap tahap. Blink punya banyak pekerjaan yang harus dilakukan.

Merender grafik

Blink menggunakan mesin grafis Skia open source untuk berinteraksi dengan hardware grafis yang mendasar dari komputer atau perangkat seluler.

Skia menyediakan API umum yang berfungsi di berbagai platform hardware dan software. Skia berfungsi sebagai mesin grafis untuk Google Chrome dan banyak produk lainnya.

Daripada mencoba mendukung berbagai sistem operasi dan perangkat, sambil mengikuti perubahan platform, Skia menggunakan library grafis termasuk OpenGL, Vulkan, dan DirectX. 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, yaitu 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.

Merender ke standar

V8 memproses JavaScript sesuai dengan standar JavaScript, yang dikenal sebagai ECMAScript. Mesin rendering seperti Blink dirancang untuk menerapkan standar web secara interoperabel. 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 harus menerapkan elemen HTML. Spesifikasi untuk setiap elemen HTML mencakup bagian yang menentukan antarmuka DOM untuk elemen tersebut. Bagian ini menjelaskan cara JavaScript harus diterapkan oleh browser, untuk memungkinkan interaksi dengan elemen secara standar 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 akan otomatis diubah oleh Blink untuk menyediakan antarmuka kepada developer untuk fitur tersebut. Setelah antarmuka ditentukan dengan WebIDL, engineer dapat membuat implementasi yang merespons panggilan antarmuka.

Library pihak ketiga

Blink menggunakan beberapa library pihak ketiga. Misalnya, WebGL digunakan untuk merender grafis 2D dan 3D interaktif.

Library seperti WebGL sangat dioptimalkan dan diuji dengan cermat. Mereka memberi Blink akses ke fitur dan fungsi penting, tanpa perlu menciptakan kembali sesuatu yang sudah ada. 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 fraktal 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, menurut persyaratan App Store Apple.

Seiring waktu, project Chromium mengembangkan arsitektur software multi-proses yang berbeda, karena mempertahankan dua arsitektur terpisah dalam satu basis kode menjadi bermasalah.

Selain itu, Chromium ingin menggunakan fitur yang tidak dibuat di WebKit. Jadi, mulai dari versi 28, para engineer Chromium memutuskan untuk mulai mengerjakan mesin rendering mereka sendiri. Mereka mem-fork kode dari WebKit, dan mereka menamakannya Blink. Ada rumor yang mengatakan bahwa Blink dinamai berdasarkan tag <blink> yang (tidak begitu) disukai yang tersedia di browser Netscape Navigator untuk membuat teks berkedip-kedip.

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.