Mengenal Browser Engine: Blink, Gecko, WebKit, Servo, dan Ladybird

byKang cahya - 0
Mengenal Browser Engine: Blink, Gecko, WebKit, Servo, dan Ladybird

Pernah kepikiran bagaimana kode HTML, CSS, dan JavaScript yang dikirim oleh sebuah server bisa berubah menjadi halaman website yang cantik, interaktif, dan responsif di layar kita?

Salah satu komponen terpenting di balik proses tersebut adalah browser engine.

Browser seperti Google Chrome, Mozilla Firefox, Microsoft Edge, dan Safari sebenarnya bukan sekadar aplikasi untuk membuka website. Di balik antarmukanya terdapat berbagai komponen kompleks yang bekerja bersama untuk memproses HTML, CSS, JavaScript, jaringan, multimedia, keamanan, hingga menggambar halaman ke layar.

Apa Itu Browser Engine?

Agar mudah dibayangkan, anggap sebuah web browser seperti sebuah mobil.

Chrome, Firefox, Edge, atau Safari merupakan mobil utuh yang memiliki bodi, dashboard, tombol, menu, tab, bookmark, address bar, dan berbagai fitur lain yang bisa digunakan langsung oleh pengguna.

Di balik antarmuka tersebut terdapat beberapa komponen mesin yang menangani pekerjaan berbeda.

Dua komponen yang paling sering dibicarakan adalah rendering engine dan JavaScript engine.

1. Rendering Engine: Mesin yang Membentuk Tampilan Website

Rendering engine bertanggung jawab terhadap sebagian besar proses yang mengubah dokumen web menjadi tampilan visual.

Tugasnya bukan hanya membaca HTML dan CSS, tetapi mencakup berbagai proses seperti:

  • Parsing HTML.
  • Membangun DOM atau Document Object Model.
  • Membaca dan menerapkan CSS.
  • Menghitung style setiap elemen.
  • Menentukan layout dan ukuran elemen.
  • Melakukan painting.
  • Melakukan compositing.
  • Menggambar hasil akhir ke layar.

Karena itu, rendering engine dapat dianggap sebagai mesin visual utama sebuah browser.

2. JavaScript Engine: Mesin Eksekusi Logika

Komponen berikutnya adalah JavaScript engine.

Mesin ini bertugas membaca, menginterpretasikan, mengompilasi, dan mengeksekusi kode JavaScript.

Contohnya antara lain:

  • Menjalankan perhitungan.
  • Menangani logika aplikasi.
  • Memproses event klik.
  • Menjalankan function JavaScript.
  • Memproses algoritma aplikasi web.

Browser modern biasanya menggunakan berbagai teknik optimisasi, termasuk Just-in-Time Compilation atau JIT, agar JavaScript dapat dieksekusi dengan cepat.

JavaScript Engine Tidak Bekerja Sendirian

Perlu dipahami bahwa JavaScript engine bukan komponen yang menyediakan seluruh kemampuan sebuah browser.

Fitur seperti:

  • fetch()
  • DOM API
  • Web Storage
  • Timers
  • Events
  • WebSocket
  • Canvas

merupakan bagian dari Web APIs yang disediakan browser. JavaScript engine kemudian berkomunikasi dengan komponen-komponen tersebut.

Misalnya ketika pengguna menekan tombol Dark Mode, JavaScript dapat mengubah class atau style pada DOM. Browser kemudian menghitung kembali style, layout bila diperlukan, lalu melakukan repaint atau compositing untuk menampilkan perubahan tersebut.

Rendering Engine dan JavaScript Engine Saling Terhubung

Walaupun memiliki tanggung jawab berbeda, rendering engine dan JavaScript engine tidak benar-benar bekerja sebagai dua dunia yang terisolasi.

Keduanya terhubung erat melalui DOM, event loop, Web APIs, serta berbagai subsistem browser lainnya. 

Server
  ↓
HTML + CSS + JavaScript + Assets
  ↓
Browser
  ├── Rendering Engine
  │     ├── HTML Parser
  │     ├── DOM
  │     ├── CSS
  │     ├── Style Calculation
  │     ├── Layout
  │     ├── Paint
  │     └── Compositor
  │
  └── JavaScript Engine
        └── Menjalankan JavaScript

Peta Browser Engine Modern

Saat ini ekosistem browser desktop memang sangat terkonsentrasi pada beberapa keluarga engine besar.

Chromium menjadi basis bagi banyak browser populer, tetapi Gecko, WebKit, Servo, dan Ladybird tetap penting untuk menjaga keberagaman implementasi web.

Proyek / Ekosistem Web / Rendering Engine JavaScript Engine Contoh Browser / Penggunaan
Chromium Blink V8 Google Chrome, Microsoft Edge, Brave, Vivaldi, Arc
Firefox Gecko SpiderMonkey Mozilla Firefox, Tor Browser, Mullvad Browser, Floorp
WebKit WebCore / WebKit JavaScriptCore Safari dan berbagai aplikasi berbasis WebKit
Servo Servo SpiderMonkey Embedded web engine, eksperimen browser, Verso
Ladybird Engine Ladybird / LibWeb LibJS Ladybird Browser

Chromium: Blink dan V8

Chromium merupakan proyek browser open-source yang menjadi basis berbagai browser populer.

Chromium menggunakan:

  • Blink sebagai rendering engine.
  • V8 sebagai JavaScript engine.

Browser yang menggunakan Chromium antara lain:

  • Google Chrome
  • Microsoft Edge
  • Brave
  • Vivaldi
  • Arc

Karena begitu banyak browser menggunakan Chromium, teknologi Blink dan V8 memiliki pengaruh yang sangat besar terhadap ekosistem web modern.

Firefox: Gecko dan SpiderMonkey

Mozilla Firefox menggunakan Gecko sebagai web rendering engine dan SpiderMonkey sebagai JavaScript engine.

Gecko bukan hanya menangani HTML dan CSS. Di dalamnya juga terdapat berbagai komponen browser seperti DOM, networking, IPC, JavaScript integration, dan sejumlah subsistem lain.

Firefox menjadi salah satu implementasi web engine independen paling penting di luar ekosistem Chromium.

Safari: WebKit dan JavaScriptCore

Safari menggunakan WebKit sebagai browser engine dan JavaScriptCore atau JSC sebagai JavaScript engine.

WebKit sendiri terdiri dari sejumlah komponen, termasuk WebCore untuk berbagai fungsi web platform dan JavaScriptCore untuk menjalankan JavaScript.

WebKit juga digunakan oleh berbagai aplikasi di ekosistem Apple.

Apakah Semua Browser di iPhone Harus Menggunakan WebKit?

Pernyataan tersebut dahulu cukup akurat, tetapi sekarang membutuhkan catatan penting.

Apple telah menyediakan dukungan untuk alternative browser engines di wilayah tertentu.

Developer yang memenuhi persyaratan dan memperoleh entitlement dari Apple dapat menggunakan browser engine selain WebKit.

Dukungan tersebut tersedia di Uni Eropa, dan Apple juga telah membuka mekanisme serupa di Jepang.

Karena itu, kalimat "semua browser di iOS wajib menggunakan WebKit" sudah tidak tepat jika digunakan sebagai pernyataan global tanpa pengecualian.

Servo: Browser Engine Modern yang Dibangun dengan Rust

Servo merupakan proyek browser engine independen yang awalnya dikembangkan oleh Mozilla Research.

Proyek ini kini berada di bawah Linux Foundation Europe.

Servo dibangun terutama menggunakan Rust dan memanfaatkan fitur memory safety serta concurrency yang dimiliki bahasa tersebut.

Salah satu fokus utama Servo adalah membangun engine yang modular, embeddable, dan mampu memanfaatkan parallel processing pada hardware modern.

Untuk mengeksekusi JavaScript dan WebAssembly, Servo menggunakan SpiderMonkey.

Jadi kurang tepat jika Servo disebut "browser engine yang 100% murni ditulis dalam Rust", karena beberapa komponen eksternal tetap digunakan.

Ladybird: Browser Engine Baru yang Dibangun dari Nol

Ladybird menjadi salah satu proyek browser independen paling menarik dalam beberapa tahun terakhir.

Proyek ini membangun browser engine baru dari awal dan bukan merupakan fork dari Blink, WebKit, Gecko, atau engine browser besar lainnya.

Ladybird memiliki komponen seperti:

  • LibWeb untuk berbagai implementasi web platform.
  • LibJS untuk JavaScript.

Secara historis sebagian besar codebase Ladybird ditulis dalam C++. Namun pada 2026 proyek tersebut mulai memindahkan sejumlah subsystem ke Rust.

Sebagai contoh, style system dan layout engine telah mulai dipindahkan ke Rust.

Ladybird tidak menggunakan kode dari Blink, WebKit, atau Gecko, tetapi tetap menggunakan berbagai third-party library untuk fungsi umum seperti multimedia, encryption, dan graphics.

Fun Fact: V8 Tidak Hanya Digunakan di Browser

Salah satu contoh paling terkenal adalah Node.js.

Node.js menggunakan JavaScript engine V8 di luar browser. 

Google Chrome
    ↓
V8
    ↓
JavaScript Engine

Node.js
    ↓
V8
    ↓
JavaScript Runtime di Luar Browser

Namun kurang tepat jika Node.js disebut sebagai "V8 yang dicabut dari Chrome".

Node.js merupakan runtime yang menggabungkan V8 dengan berbagai komponen lain seperti event loop, filesystem API, networking, module system, dan native bindings.

Kenapa Aplikasi Electron Bisa Menggunakan Banyak RAM?

Framework seperti Electron memungkinkan developer membangun aplikasi desktop menggunakan HTML, CSS, dan JavaScript.

Electron membawa Chromium dan Node.js sebagai bagian dari runtime-nya.

Artinya aplikasi Electron memiliki lingkungan browser lengkap untuk merender antarmuka berbasis web sekaligus runtime Node.js untuk mengakses kemampuan sistem.

Electron juga menggunakan arsitektur multi-process yang diwarisi dari Chromium.

Hal tersebut dapat menyebabkan konsumsi memory lebih besar dibanding aplikasi native yang jauh lebih sederhana, khususnya jika aplikasi memiliki banyak window, renderer process, web content, atau dependency.

Namun kurang tepat jika konsumsi RAM Electron hanya dijelaskan dengan kalimat "karena Blink dan V8 aktif sekaligus". Browser biasa pun menjalankan rendering engine dan JavaScript engine. Penggunaan memory Electron lebih berkaitan dengan Chromium yang dibundel, arsitektur multi-process, Node.js, serta kompleksitas aplikasinya.

Apakah Chromium Menguasai Ekosistem Browser?

Chromium memang memiliki pengaruh yang sangat besar karena digunakan sebagai fondasi oleh banyak browser populer.

Bagi developer web, dominasi satu keluarga engine dapat memberikan keuntungan berupa konsistensi implementasi.

Namun dari perspektif standar web, keberadaan banyak implementasi browser engine tetap penting.

Jika suatu fitur web hanya diuji dan dioptimalkan terhadap satu engine, risiko munculnya website yang secara praktis hanya bekerja optimal pada satu implementasi browser menjadi lebih besar.

Karena itu proyek seperti Gecko, WebKit, Servo, dan Ladybird memiliki peran penting dalam menjaga keberagaman implementasi web.

Kenapa Keberagaman Browser Engine Penting?

Web dibangun berdasarkan standar terbuka yang dikembangkan melalui organisasi dan komunitas seperti WHATWG dan W3C.

Idealnya, standar tersebut memiliki beberapa implementasi independen.

Keberagaman browser engine membantu:

  • Mencegah ketergantungan pada satu implementasi.
  • Mendorong kompetisi performa.
  • Mendorong inovasi keamanan.
  • Menemukan perbedaan interpretasi terhadap standar.
  • Mencegah website menjadi terlalu bergantung pada perilaku satu browser.

Kesimpulan

Browser modern jauh lebih kompleks daripada sekadar program yang membaca HTML, CSS, dan JavaScript.

Di dalamnya terdapat banyak subsystem yang bekerja bersama, mulai dari rendering engine, JavaScript engine, networking, storage, security sandbox, graphics, multimedia, hingga process management.

Chromium menggunakan Blink + V8, Firefox menggunakan Gecko + SpiderMonkey, sedangkan Safari menggunakan WebKit + JavaScriptCore.

Sementara itu, proyek independen seperti Servo dan Ladybird menunjukkan bahwa pengembangan browser engine baru masih terus berlangsung.

Jadi masa depan browser bukan hanya tentang browser mana yang paling cepat, tetapi juga tentang bagaimana kita menjaga web tetap terbuka dan memiliki lebih dari satu implementasi engine.

Kalau untuk penggunaan sehari-hari, kalian lebih memilih browser berbasis Chromium, Firefox, Safari, atau justru tertarik mengikuti perkembangan Servo dan Ladybird? 👇

Tags

Diposting oleh Kang cahya

0/Post a Comment/Comments

Posting Komentar

Lebih baru Lebih lama