Aldimhr Home Page

Cara Kerja Browser

Browser

Aldimhr • 27-05-2021 • 6 min read

Cara Kerja Browser

Secara sederhana, web browser memiliki 4 set tugas antara lain Fetch, Process, Display dan Storage.

Web browser merupakan perangkat lunak dengan fungsi yang dimilikinya sebagai penerima, pengakses dan penyaji berbagai informasi di internet.

Browser adalah mesin rendering. Salah satu tugas browser yaitu mengunduh halaman web dan merendernya dengan cara yang dapat dimengerti manusia.

Ketika pengguna memasukkan alamat di bilah browser, browser akan mendownload “dokumen” di URL tersebut dan merendernya.

Secara sederhana terdapat 4 set tugas pada browser:

  • Fetch
  • Process
  • Display
  • Storage

FETCH

Proses ini memainkan peran penting dalam mengambil data dari server web melalui internet.

Resolusi DNS

Setelah user memasukkan URL, browser akan memastikan server mana yang harus disambungkan. Browser akan memanggil server DNS untuk menemukan domain (misalnya, google.com) diterjemahkan menjadi 216.58.207.110, alamat IP yang dapat disambungkan oleh browser.

HTTP Exchange

Setelah browser mengindentifikasi server mana yang akan melayani permintaan user, browser akan memulai koneksi TCP dengannya dan memulai pertukaran HTTP.

Proses ini merupakan cara bagi browser untuk berkomunikasi dengan server untuk meminta apa yang dibutuhkan dan server akan mengembalikan data tersebut.

Namun pada proses ini, browser juga akan mencari ketersediaan cache pada memori lokal untuk URL yang diminta. Jika tidak, maka akan membuat paket HTTP dengan nama domain untuk meminta resource web melalui internet.

HTTP merupakan nama protokol paling populer untuk berkomunikasi di web dan sebagian besar browser berkomunikasi melalui HTTP saat berkomunikasi dengan server. Pertukaran HTTP melibatkan client (browser yang kita gunakan) yang akan mengirim Request, dan server yang akan mengembalikan Response.

Misalnya, setelah browser berhasil terhubung ke server google.com, maka browser akan mengirimkan Request yang terlihat seperti ini:

GET / HTTP/1.1Host: google.comAccept: */*
  • GET / HTTP/1.1: baris ini, browser meminta server untuk mengambil dokuman di lokasi /, menambahakan bahwa sisa Request akan mengikuti protokol HTTP/1.1 (bisa juga menggunakan 1.0 atau 2)
  • Host: google.com: ini merupakan satu-satunya header HTTP yang wajib ada di HTTP/1.1. karena server mungkin melayani beberapa domain klien (seperti google.com, google.co.uk, dll), pada baris ini menyebutkan bahwa request tersebut untuk host tertentu.
  • Accept: /: header opsional, dimana browser memberi tahu server bahwa ia akan menerima segala jenis response. Server dapat memiliki sumber daya yang tersedia dalam format JSON, XML atau HTML, sehingga dapat memilih format mana yang dibutuhkan.

Setelah browser selesai melakakun Request, selanjut server akan mengirimkan Response, yang terlihat seperti ini:

HTTP/1.1 200 OKCache-Control: private, max-age=0Content-Type: text/html; charset=ISO-8859-1Server: gwsX-XSS-Protection: 1; mode=blockX-Frame-Options: SAMEORIGINSet-Cookie: NID=1234; expires=Fri, 18-Jan-2019 18:25:04 GMT; path=/; domain=.google.com; HttpOnly

—

<!doctype html><html">......</html>

Server memberitahu bahwa request itu berhasil (200 OK) dan menambahkan beberapa header ke response, misalnya, mengiklankan server apa yang memproses request (Server: gws), kebijakan respons tersebut (X-XSS-Protection), dan seterusnya.

Jika situs web yang diminta mengimplementasikan cache, salinan data akan di buat di App Cache atau Service Workers untuk digunakan ketika mengunjungi situs yang sama di waktu berikutnya.

Cache berguna untuk mengurangi waktu response dan menyimpan permintaan jaringan untuk kunjungan selanjutnya.

Proses ini memainkan peran penting dalam pengalaman pengguna. Jika cache tidak digunakan bisa menjadi penghambat dalam kinerja web, karena browser akan menunggu data atau konten jarak jauh tiba. Banyak teknik lain yang dapat digunakan untuk mengurangi dampak ini pada pengalaman pengguna.

Singkatnya pada proses ini klien dan server bertukar informasi dan mereka melakukannya melalui HTTP.

Process

Setelah menerima data dari server, yang bertugas selanjutnya yaitu rendering engine, JS engine, dan subsystem backend UI adalah bagian dari proses.

Rendering engine

Rendering engine akan memproses data dan menampilkan konten web di layar.

<!doctype html><html">......</html>

Di body response, server menyertakan representasi respons sesuai dengan Content-Type header. Pada kasus ini, tipe konten diatur ke text/html, jadi browser mengharapkan markup HTML dalam response — persis seperti yang tercantum di body.

Secara default, hal ini dapat memproses file HTML, XML, dan gambar. Namun dapat extended untuk mengakomodasi bebagai tipe data melalui ekstensi.

Dengan rendering engine, browser akan mengurai HTML. Stylesheet diurai untuk menghasilkan aturan gaya untuk elemen HTML.

Render tree merupakan objek yang menggabungkan HTML dan CSS yang diurai. Setelah render tree dibuat, ia akan memproses tata letak dan painting, lalu menampilkan hasilnya di layar.

Proses painting mencakup filling tata letak dengan atribut gaya seperti warna, latar belakang, dan properti CSS lainnya.

JavaScript Engine

Pada proses ini browser akan mengurai kode JavaScript menjadi kode mesin dan kemudian mengeksekusinya.

Mesin ini mencakup dua kompunen

  • Memory heap
  • Call stack

Memory heap adalah tempat memori yang dialokasikan untuk variabel, fungsi, dan elemen JS lainnya.

Call stack merupakan antrian stack frame atau langkah-langkah berurutan yang dijalankan oleh browser.

JavaScript adalah single-threaded process dan setiap entri atau langkah eksekusi merupakan stack frame.

Mesin ini memiliki beberapa thread secara internal untuk melakukan berbagai tugas. Contoh:

  • Mengambil, menyusun dan menjalankan kode
  • Profilling thread untuk mengalisis fungsi dan komsumsi waktunya
  • Mengoptimalkan proses eksekusi
  • Pengumpul sampah

Display

Hal ini berkaitan dengan penyajian data kepada pengguna. User Interface dan Browser Engine bertanggung jawab atas penyajian data dan penanganan navigasi pengguna.

User Interface

User interface browser biasanya menyertakan bilah alamat untuk menerima URL web, dan tombol navigasi seperti back, forward, refresh, home dan bookmark.

User Interface berkomunikasi dengan subsistem lain di dalam browser untuk menampikan konten dan bertindak sesuai dengan fungsinya.

Browser Engine

Browser engine merupakan subsistem yang dapat disematkan yang menyediakan high-level interface ke rendering engine.

Hal ini memuat URL yang diberikan dan mendukung tindakan penjelajahan seperti menavigasi forward, back dan reload.

Browser engine juga memungkinkan untuk querying dan memanipulasi pengaturan mesin rendering.

Storage

Web browser memiliki sedikit kapasitas penyimpanan untuk melakukan beberapa tindakan, menyimpan data ke cache dan menyimpan data melalui browser untuk melakukan fungsionalitas browser lainnya.

Penyimpanan data

Data persistence dapat dicapai melalui berbagai API browser, beberapa diantaranya yaitu

  • Local storage
  • Session storage
  • Cookies
  • WebSQL
  • IndexedDB
  • FileSystem
  • AppCache
  • Service Workers

Local Storage dan session storage adalah pasangan key value yang dapat menyimpan objek dan fungsi JS apa pun di browser.

Session storage menyimpan data di browser selama sesi situs web aktif. Local storage adalah memory di browser. Data dari local storage akan dipertahankan sampai dihapus atau diubah secara eksplisit oleh pengguna atau kode JavaScript.

Batas penyimpanan session dan local web storage adalah 5MB per objek, dan 50MB per sistem.

Cookies adalah kumpulan data key value yang disimpan di memori browser. Cookies akan dikirim bolak balik antara klien dan server.

WebSQL, IndexDB, dan FileSystem memiliki kemampuan untuk menyimpan data di browser tergantung pada ukuran, kinerja dan kebutuhan.

App Cache menyimpan konten statis situs web dan menyajikan konten User Interface selama network downtime.

Service Worker adalah cara baru Google menyimpan data situs web untuk pengguna offline. Ini memiliki fitur yang signifikan dibandingkan dengan App Cache.

https://web.dev/articles/howbrowserswork

https://www.freecodecamp.org/news/web-application-security-understanding-the-browser-5305ed2f1dac/

https://hackernoon.com/how-do-web-browsers-work-40cefd2cb1e1