Apa yang terjadi setelah saya memasukkan URL dan menekan Enter di browser?



Pertanyaan ini sudah klise, dan sering digunakan sebagai penutup wawancara. Ada banyak artikel di Internet, tapi akhir-akhir ini saya membosankan, lalu saya mencatat diri saya sendiri, dan saya merasa saya memahaminya lebih teliti dari sebelumnya.

Catatan: Langkah-langkah dalam artikel ini didasarkan pada permintaan HTTP sederhana, tanpa HTTPS, HTTP2, DNS paling sederhana, tanpa proxy, dan tidak ada masalah dengan server, meskipun ini tidak praktis.

Proses yang kasar

  • Resolusi URL

  • Pencarian DNS

  • Koneksi TCP

  • Memproses permintaan

  • Terima tanggapan

  • Render halaman

Satu, analisis URL

Resolusi alamat:

Pertama menilai apakah Anda memasukkan URL resmi atau kata kunci yang akan dicari, dan melakukan operasi seperti penyelesaian otomatis dan pengkodean karakter sesuai dengan konten yang Anda masukkan.

HSTS

Karena risiko keamanan, HSTS akan digunakan untuk memaksa klien menggunakan HTTPS untuk mengakses halaman

Operasi lainnya

Browser juga akan melakukan beberapa operasi tambahan, seperti pemeriksaan keamanan dan pembatasan akses (sebelumnya browser domestik dibatasi 996.icu).

Periksa cache

2. Permintaan DNS

Langkah-langkah dasar

1. Cache browser

Browser pertama-tama akan memeriksa apakah ada di cache, jika tidak, panggil fungsi pustaka sistem untuk melakukan kueri.

2. Cache sistem operasi

Sistem operasi juga memiliki cache DNS sendiri, tetapi sebelum itu, ia akan memeriksa apakah nama domain ada di file Host lokal, jika tidak, itu akan mengirim permintaan kueri ke server DNS.

3. Cache router

Router juga memiliki cache sendiri.

4. Cache DNS ISP

ISP DNS adalah set server DNS pilihan pada komputer klien, mereka akan memiliki cache dalam banyak kasus.

Kueri DNS root

Jika tidak ada caching di semua langkah sebelumnya, server DNS lokal akan meneruskan permintaan ke domain root di Internet. Gambar berikut menggambarkan keseluruhan proses dengan baik:

Server nama root (Wikipedia)

Poin yang perlu diperhatikan

Metode rekursif: periksa sepenuhnya tanpa kembali di tengah, dan kembalikan informasi hanya setelah hasil akhir (proses dari browser ke server DNS lokal)

Metode iteratif adalah metode kueri dari server DNS lokal ke server nama domain root.

Apa itu pembajakan DNS

Pengoptimalan dns-prefetch front-end

Tiga, koneksi TCP

TCP / IP dibagi menjadi empat lapisan. Saat mengirim data, setiap lapisan harus merangkum data:

1. Lapisan aplikasi: mengirim permintaan HTTP

Pada langkah sebelumnya, kami telah memperoleh alamat IP server, dan browser akan mulai membuat pesan HTTP, yang meliputi:

  • Header Permintaan: metode permintaan, alamat target, protokol yang diikuti, dll.

  • Isi permintaan (parameter lain)

Satu hal yang perlu diperhatikan: browser hanya dapat mengirim metode GET dan POST, dan metode GET digunakan untuk membuka halaman web

2. Transport layer: pesan transmisi TCP

Transport layer akan memulai koneksi TCP ke server.Untuk memudahkan transmisi, data akan dibagi (dalam unit segmen pesan), dan nomor akan ditandai sehingga server dapat secara akurat mengembalikan informasi pesan saat itu diterima.

Sebelum membuat koneksi, jabat tangan tiga arah TCP akan dilakukan.

Mengenai jabat tangan tiga arah TCP / IP, sudah ada banyak paragraf dan gambar yang dijelaskan dengan jelas di Internet. Anda dapat membaca artikel ini: Mengapa TCP membuat koneksi dengan jabat tangan tiga arah, dan menutup koneksi dengan empat gelombang?

3. Lapisan jaringan: alamat Mac kueri protokol IP

Kemas segmen data dan tambahkan sumber dan alamat IP target, dan bertanggung jawab untuk menemukan rute transmisi.

Tentukan apakah alamat tujuan berada di jaringan yang sama dengan alamat saat ini. Jika ya, kirimkan langsung sesuai dengan alamat Mac, jika tidak gunakan tabel perutean untuk menemukan alamat hop berikutnya, dan gunakan protokol ARP untuk menanyakan alamat Mac-nya.

Catatan: Dalam model referensi OSI, protokol ARP terletak di lapisan tautan, tetapi di TCP / IP, protokol ini terletak di lapisan jaringan.

4. Lapisan tautan: protokol Ethernet

Protokol Ethernet

Menurut protokol Ethernet, data dibagi menjadi paket data dengan "frame" sebagai unitnya, dan setiap frame dibagi menjadi dua bagian:

  • Header: pengirim, penerima, tipe data paket

  • Data: Isi spesifik dari paket data

alamat MAC

Ethernet menetapkan bahwa semua perangkat yang terhubung ke jaringan harus memiliki antarmuka "kartu jaringan". Paket data dikirim dari satu kartu jaringan ke kartu lain. Alamat kartu jaringan adalah alamat Mac. Setiap alamat Mac unik dan memiliki kemampuan satu-ke-satu.

siaran

Metode pengiriman data sangat primitif. Data dikirim langsung ke semua mesin di jaringan melalui protokol ARP. Penerima membandingkan informasi header dengan alamat Mac-nya sendiri, dan menerima jika konsisten, jika tidak, buang.

Catatan: Respons penerima adalah unicast.

Server menerima permintaan tersebut

Proses penerimaannya adalah membalik langkah-langkah di atas, lihat gambar di atas.

Empat, server memproses permintaan tersebut

Proses yang kasar

HTTPD

HTTPD yang paling umum adalah Apache dan Nginx, yang umum digunakan di Linux, dan IIS di Windows.

Ini akan mendengarkan permintaan, dan kemudian memulai proses anak untuk menangani permintaan tersebut.

Memproses permintaan

Setelah menerima pesan TCP, koneksi diproses, protokol HTTP diurai (metode permintaan, nama domain, jalur, dll.), Dan beberapa verifikasi dilakukan:

  • Verifikasi bahwa virtual host telah dikonfigurasi

  • Verifikasikan bahwa host virtual menerima metode ini

  • Verifikasi bahwa pengguna dapat menggunakan metode ini (berdasarkan alamat IP, informasi identitas, dll.)

Alihkan

Jika server dikonfigurasi dengan pengalihan HTTP, ia akan mengembalikan  301tanggapan pengalihan permanen, dan browser akan mengirim ulang permintaan HTTP berdasarkan tanggapan tersebut (jalankan ulang proses di atas).

Penulisan ulang URL

Kemudian akan memeriksa aturan penulisan ulang URL, jika file yang diminta adalah nyata, seperti gambar, html, css, file js, dll, file akan langsung dikembalikan. Jika tidak, server akan menulis ulang permintaan ke URL gaya REST sesuai dengan aturan. Kemudian sesuai dengan skrip bahasa dinamis, putuskan jenis penerjemah file dinamis yang akan dipanggil untuk memproses permintaan.

Ambil kerangka kerja MVC bahasa PHP sebagai contoh, pertama-tama akan menginisialisasi beberapa parameter lingkungan, mencocokkan rute dari atas ke bawah sesuai dengan URL, dan kemudian membiarkan metode yang ditentukan oleh rute memproses permintaan.

Perhatikan akun publik WeChat: tumpukan teknologi Java, balasan di latar belakang: Arsitektur, Anda bisa mendapatkan N tutorial arsitektur terbaru yang telah saya susun, yang semuanya adalah barang kering.

Lima, browser menerima respon

Setelah browser menerima sumber respons dari server, itu akan menganalisis sumber daya.

Pertama, periksa header Respon dan lakukan hal yang berbeda sesuai dengan kode status yang berbeda (seperti pengalihan yang disebutkan di atas).

Jika resource respons dikompresi (seperti gzip), resource tersebut perlu didekompresi.

Kemudian, cache sumber daya respons.

Selanjutnya, parsing konten respons sesuai dengan jenis MIME [3] di resource respons (misalnya, HTML dan Gambar memiliki metode parsing yang berbeda).

Enam, merender halaman

Kernel browser

Kernel browser yang berbeda memiliki proses rendering yang berbeda, tetapi proses umumnya serupa.

Proses dasar

6.1. Penguraian HTML

Hal pertama yang perlu diketahui adalah bahwa browser menguraikannya baris demi baris dari atas ke bawah.

Proses analisis dapat dibagi menjadi empat langkah:

① Decoding (pengkodean)

Apa yang dikirim kembali sebenarnya adalah beberapa data byte biner, dan browser perlu mengubahnya menjadi string sesuai dengan pengkodean file yang ditentukan (seperti UTF-8), yang merupakan kode HTML.

② Pra-parsing

Apa yang dilakukan pra-analisis adalah memuat sumber daya terlebih dahulu untuk mengurangi waktu pemrosesan. Ini akan mengidentifikasi beberapa atribut yang akan meminta sumber daya, seperti atribut imgtag src, dan menambahkan permintaan ini ke antrean permintaan.

③ Tokenisasi

Simbolisasi adalah proses analisis leksikal. Input diuraikan menjadi simbol. Simbol HTML meliputi tag awal, tag akhir, nama atribut, dan nilai atribut.

Ia menggunakan mesin negara untuk mengidentifikasi keadaan simbol, misalnya ketika ditemui <>keadaan akan berubah.

④ Konstruksi pohon

Catatan: Simbolisasi dan pembangunan pohon dioperasikan secara paralel, yang berarti selama tag awal diurai, simpul DOM akan dibuat.

Pada langkah simbolisasi sebelumnya, parser memperoleh token ini, kemudian membuat DOMobjek dengan cara yang sesuai dan menyisipkan simbol-simbol ini ke dalam DOMobjek.

<html><head><title>Web page parsing</title></head><body><div><h1>Web page parsing</h1><p>This is an example Web page.</p></div></body></html>

Toleransi kesalahan browser

Anda belum pernah melihat kesalahan seperti "sintaks tidak valid" di browser. Ini karena browser mengoreksi sintaks yang salah dan kemudian terus bekerja.

peristiwa

Saat seluruh proses analisis selesai, browser akan DOMContentLoadedmemberi tahu DOMpenyelesaian analisis melalui suatu peristiwa .

6.2 Penguraian CSS

Setelah browser mendownload CSS, pengurai CSS akan memproses CSS apa pun yang ditemukannya, mengurai semua CSS dan membuat token sesuai dengan spesifikasi tata bahasa [4], dan kemudian kita mendapatkan tabel aturan.

Aturan pencocokan CSS

Saat mencocokkan aturan CSS yang sesuai dengan sebuah node, urutannya adalah dari kanan ke kiri. Misalnya, div p { font-size :14px }pertama-tama akan mencari semua ptag dan kemudian menentukan apakah elemen induknya adalah div.

Jadi saat kita menulis CSS, coba gunakan id dan class, dan jangan over-cascade.

6.3. Render Tree

Sebenarnya, ini adalah proses penggabungan pohon DOM dan pohon aturan CSS.

Catatan: Pohon render akan mengabaikan node yang tidak perlu dirender, seperti node yang disetel display:none.

Perhitungan

Melalui penghitungan, nilai ukuran apa pun dapat dikurangi menjadi salah satu dari tiga kemungkinan : auto, persentase, piksel, seperti remmengonversi menjadi px.

riam

Browser memerlukan cara untuk menentukan gaya mana yang benar-benar perlu diterapkan ke elemen yang sesuai, jadi browser menggunakan specificityrumus yang disebut , yang akan meneruskan:

  • Nama tag, kelas, id

  • Gaya sebaris

  • !important

Kemudian dapatkan nilai bobot dan ambil yang tertinggi.

Render pemblokiran

Saat sebuah scripttag ditemukan , konstruksi DOM akan ditangguhkan hingga skrip selesai dieksekusi, dan kemudian lanjutkan untuk membuat pohon DOM.

Tetapi jika JS bergantung pada gaya CSS, dan belum diunduh dan dibuat, browser akan menunda eksekusi skrip sampai Aturan CSS dibuat.

Semua yang kita tahu:

  • CSS akan memblokir eksekusi JS

  • JS akan memblokir penguraian DOM berikutnya

Untuk menghindari situasi ini, prinsip-prinsip berikut harus digunakan:

  • Sumber daya CSS diberi peringkat sebelum sumber daya JavaScript

  • JS ditempatkan di bagian bawah HTML, yang merupakan bagian  </body>depan

Selain itu, jika Anda ingin mengubah mode pemblokiran, Anda dapat menggunakan defer dan async.

6.4 Tata Letak dan Gambar

Tentukan properti geometris dari semua node pohon rendering, seperti posisi, ukuran, dll., Dan terakhir masukkan model kotak, yang dapat secara akurat menangkap posisi dan ukuran yang tepat dari setiap elemen di layar.

Kemudian melintasi pohon render dan panggil metode perender paint () untuk menampilkan isinya di layar.

6.5. Menggabungkan Lapisan Render

Gabungkan semua gambar yang digambar di atas, dan akhirnya menghasilkan satu gambar.

6.6. Alur ulang dan gambar ulang

Alur ulang

Saat browser menemukan bahwa bagian tertentu telah berubah dan mempengaruhi tata letak, browser perlu kembali dan merender ulang. Ini akan htmldimulai secara rekursif dari label dan menghitung ulang posisi dan ukuran.

Aliran ulang pada dasarnya tidak dapat dihindari, karena saat Anda menggeser mouse dan mengubah ukuran jendela, halaman akan berubah.

Cat ulang

Penggambaran ulang terjadi saat warna latar belakang, warna teks, dll. Dari suatu elemen diubah tanpa memengaruhi posisi elemen di sekitarnya.

Setelah setiap menggambar ulang, browser juga perlu menggabungkan lapisan rendering dan keluaran ke layar.

Biaya alur ulang jauh lebih tinggi daripada menggambar ulang, jadi kita harus mencoba menghindari alur ulang.

Misalnya: ini display:none akan memicu perubahan posisi , tetapi  visibility:hidden hanya menggambar ulang.

6.7 Kompilasi dan eksekusi JavaScript

Proses yang kasar

Ini dapat dibagi menjadi tiga tahap:

1. Analisis leksikal

Setelah skrip JS dimuat, pertama-tama skrip tersebut akan memasuki tahap analisis sintaks. Ini akan menganalisis terlebih dahulu apakah sintaks blok kode sudah benar. Jika salah, itu akan memunculkan "kesalahan sintaks" dan menghentikan eksekusi.

Beberapa langkah:

  • Word, misalnya var a = 2,, dalam vara=2unit leksikal tersebut.

  • Parsing, mengubah unit leksikal menjadi pohon sintaks abstrak (AST).

  • Pembuatan kode, yang mengubah pohon sintaksis abstrak menjadi instruksi mesin.

2. Pra-kompilasi

JS memiliki tiga lingkungan operasi:

  • Lingkungan global

  • Lingkungan fungsi

  • eval

Saat memasuki lingkungan operasi yang berbeda, konteks eksekusi yang sesuai dibuat. Menurut konteks yang berbeda, tumpukan panggilan fungsi terbentuk. Bagian bawah tumpukan selalu merupakan konteks eksekusi global, dan bagian atas tumpukan selalu merupakan konteks eksekusi saat ini .

Buat konteks eksekusi

Dalam proses membuat konteks eksekusi, tiga hal berikut dilakukan:

  • Buat objek variabel

  • Parameter, fungsi, variabel

  • Tetapkan rantai lingkup

  • Konfirmasikan apakah lingkungan eksekusi saat ini dapat mengakses variabel

  • Pastikan poin ini

3. Implementasi

Benang JS

Meskipun JS adalah single-threaded, sebenarnya ada empat thread yang terlibat dalam pekerjaan ini:

Tiga di antaranya hanyalah bantuan, hanya utas mesin JS yang benar-benar dijalankan

Tiga di antaranya hanyalah bantuan, hanya utas mesin JS yang benar-benar dijalankan

Benang mesin JS: juga disebut kernel JS, utas utama yang bertanggung jawab untuk mem-parse dan menjalankan program skrip JS, seperti utas pemicu peristiwa mesin V8: milik utas kernel browser, terutama digunakan untuk mengontrol kejadian, seperti mouse, keyboard, dll. ., ketika peristiwa dipicu, Ini akan mendorong fungsi pemrosesan peristiwa ke dalam antrian peristiwa dan menunggu thread mesin JS untuk mengeksekusi thread pemicu timer: setIntervaljumlah kontrol utama setTimeoutdigunakan untuk pengaturan waktu. Setelah pengaturan waktu selesai, timer fungsi pemrosesan akan didorong ke antrian acara dan menunggu utas mesin JS. Utas permintaan asinkron HTTP: melalui

Catatan: Jumlah koneksi bersamaan dari browser ke nama domain yang sama dibatasi, biasanya enam.

Tugas makro

Dibagi menjadi:

  • Tugas sinkron: jalankan secara berurutan, hanya setelah tugas sebelumnya selesai, tugas berikutnya dapat dijalankan

  • Tugas asinkron: Ini tidak dijalankan secara langsung. Hanya ketika kondisi pemicu terpenuhi, utas yang relevan mendorong tugas asinkron ke antrean tugas dan menunggu tugas di utas utama mesin JS untuk menyelesaikan eksekusi, seperti Ajax asinkron, Peristiwa DOM, setTimeout, dll.

Tugas mikro

Microtasks berada dalam lingkungan ES6 dan Node. API utamanya adalah: Promiseprocess.nextTick.

Eksekusi tugas mikro adalah setelah tugas sinkron dari tugas makro dan sebelum tugas asinkron.

Contoh kode

console.log('1'); // 宏任务 同步setTimeout(function() {	console.log('2'); 	// 宏任务 异步})new Promise(function(resolve) {	console.log('3'); 	// 宏任务 同步    	resolve();}).then(function() {	console.log('4')// 微任务})	console.log('5') // 宏任务 同步

Urutan keluaran dari kode di atas adalah: 1,3,5,4,2

Artikel terbaru yang direkomendasikan:

1. Java 15 resmi dirilis, 14 fitur baru, segarkan pengetahuan Anda! !

2. Akhirnya mendapatkan kode aktivasi IntelliJ IDEA dari proyek open source, harum sekali!

3. Saya menggunakan Java 8 untuk menulis sebuah logika, Rekan-rekan saya tidak bisa memahaminya secara langsung, jadi Anda bisa mencobanya. .

4. Gantung Tomcat, Performa Undertow sangat eksplosif! !

5. Rilis terbaru dari "Java Development Manual (Edisi Songshan)", unduh dengan cepat!

Merasa senang, jangan lupa like + forward!

Comments

Popular posts from this blog

Sangat tidak percaya diri, rendah diri, dan gemetar saat gugup, apa yang harus saya lakukan?

Setelah epidemi, empat tren perkembangan utama dari e-commerce ritel fashion Asia Tenggara

Di tahun 2021, apakah produk rumah tangga yang sudah populer selama setahun ini masih laku?