瀏覽器是怎麼運作的？從輸入網址到顯示網頁的過程

生活中的例子

Chrome、Safari、Edge、Firefox都是瀏覽器。在App裡打開連結時看到的畫面，很多也用到了瀏覽器的元件。

網頁的資料放在遠方的電腦裡。依照要求提供資料的電腦，稱為「伺服器」。瀏覽器的工作，是向伺服器要來資料，再整理成人看得懂的畫面。

這篇文章會依序追蹤從輸入網址到顯示網頁的過程。網路的細部運作，交給其他文章說明。

從輸入網址到顯示網頁的流程

表示網頁位置的字串，稱為URL（網址）。它的樣子像「https://www.example.com/news/」。開頭的「https」是通訊的方式，「www.example.com」是網站的名稱，後面的部分是網站裡的位置。

輸入網址後，瀏覽器大致會經過6個階段。為了讓說明簡單，這裡只列出常見的流程。

在②，瀏覽器會用網站的名稱，查出通訊要用的號碼。這個號碼稱為IP位址，查詢的機制稱為DNS（網域名稱系統）。詳細內容在「DNS是什麼？」中說明。

在③，瀏覽器會先和伺服器接通通訊的路徑，接著商定加密用的金鑰。現在很多網站都使用HTTPS，用加密防止資料在途中被讀取。這些準備步驟在「TCP與UDP的差異是什麼？」和「HTTPS是什麼？」中介紹。

「請給我頁面」「給你」：HTTP的對話

連線之後，瀏覽器會送出「請給我這個頁面」的請求。伺服器會附上表示結果的號碼，把頁面的資料送回來。規定這段對話形式的規則，稱為HTTP（超文字傳輸協定）。

回覆開頭的3位數號碼，稱為HTTP狀態碼。「200」代表成功，「404」代表找不到那個頁面。

最先送到的，通常是HTML（下一節說明）。瀏覽器會一邊讀，一邊在發現「這張圖片也要用」之類的記載時，再送出新的請求。一個頁面送出幾十次請求並不少見。廣告或影片等，也可能來自別家公司的伺服器。資料送達的機制本身，在「網際網路怎麼傳送資料？」中說明。

HTML、CSS、JavaScript：3種材料的角色

網頁的材料，主要是3種文字檔案。寫法的規則，由國際性的團體公開。

HTML：內容與結構

HTML用來寫文件的內容和各部分的角色，例如「這裡是標題」「這裡是段落」「這裡放圖片」。角色用角括號圍起來的標記表示。例如下面這一行，表示「公告」是標題。

<h1>公告</h1>

CSS：指定外觀

CSS用來指定外觀，例如文字的顏色、大小和排列方式。下面這一行是「標題用藍色文字顯示」的指定。

h1 { color: blue; }

把內容和外觀分開，就容易切換版面。例如同樣的內容，在手機上排成直的一欄，在電腦上可以橫向並排。

JavaScript：加上動作的程式

JavaScript是在網頁上執行的程式。它負責按下按鈕時的反應，以及不重新載入網頁就替換內容等動作。下面這一行，是把標題文字改寫成「歡迎」的指令。

document.querySelector("h1").textContent = "歡迎";

瀏覽器會在執行時，把JavaScript常用的部分翻譯成CPU的指令來加快速度。這種翻譯方式稱為JIT編譯（即時編譯）。翻譯的機制在「編譯器是什麼？」中說明。

組合網頁，畫到畫面上

材料到齊後，瀏覽器就開始把畫面畫出來。這裡分成4個階段說明（實際上分得更細，而且會同時進行）。

1. 把HTML整理成樹狀：把「頁面裡有標題和段落，段落裡有連結」這種上下層的關係，做成樹狀的資料。
2. 決定外觀：把CSS的指定套用到每個元件上，決定顏色和大小。
3. 計算位置：配合畫面的寬度，決定每個元件放在哪裡、多大。
4. 繪製：把文字和圖片轉成點（像素）的集合，畫到畫面上。疊合的工作，也會用到擅長影像處理的GPU。

第1步的樹狀資料，稱為文件物件模型（DOM）。JavaScript「改寫標題」時，改寫的就是這個DOM。DOM一改變，瀏覽器就只重做第2～4步中需要的部分。

要讓動作看起來流暢，許多螢幕需要每秒重畫60次左右。換算成每次，約16.7毫秒（1毫秒是千分之一秒）。如果JavaScript用繁重的計算把這段時間用完，捲動就會卡卡的。

第2次打開比較快的原因：快取

收到過的材料，會在裝置裡保存一段時間。這份備份稱為「快取」。再次打開時如果能用這份備份，就不必再到伺服器去拿。

備份可以用到什麼時候，由伺服器在回覆中指定。在期限內，瀏覽器不問伺服器就直接使用備份。

過期的備份不會馬上丟掉。瀏覽器會問伺服器：「和我手上的版本相比，有變嗎？」如果沒變，伺服器只回一個附上「304」號碼的簡短回覆，不送內容。收到的資料少很多，所以會比較快。

用DNS查到的號碼也會記住，所以有時也能省略②。

Cookie：網站寄放在瀏覽器裡的小紙條

HTTP的對話，每一次都是獨立的。這樣下去，伺服器無法知道「剛才登入的人」和「現在的請求」是同一個人。所以伺服器會在回覆中附上一小段文字資料，讓瀏覽器保存。

瀏覽器下次向同一個網站送出請求時，會自動附上這段資料。這個機制稱為Cookie。它用來記住登入狀態、購物車的內容等。

第一方與第三方

正在瀏覽的網站本身寄放的Cookie，稱為第一方Cookie。相對地，由嵌在頁面裡的廣告等、別家公司寄放的Cookie，稱為第三方Cookie。

假設同一家廣告公司的廣告，嵌在許多網站裡。廣告公司在每個網站都能收到同一個Cookie。這樣一來，就能把「看了新聞網站和食譜網站的是同一個人」連起來。像這樣一路跟著別人的瀏覽行動，稱為「追蹤」。

瀏覽器限制追蹤的歷程

為了防止這種追蹤，瀏覽器一直在限制第三方Cookie。Safari在2020年3月，預設封鎖了所有第三方Cookie。Firefox在2022年6月，把Cookie按網站分別存放在不同盒子的方式，設為電腦版的預設。盒子不同，在其他網站寄放的ID就不會出現。

Chrome在2020年1月，宣布了將來取消第三方Cookie的計畫。但是一再延期，在2024年7月放棄了這個計畫。2025年4月，又決定繼續由使用者在現有的設定畫面中選擇是否封鎖。預設會接受，在無痕模式（不留下瀏覽紀錄的視窗）中則會封鎖（2026年10月時）。

瀏覽器的「引擎」：裡面分成3個系統

瀏覽器中讀取HTML和CSS、組合出畫面的核心部分，稱為「瀏覽器引擎」。即使外面的畫面各家公司不同，引擎有時是共用的。現在廣泛使用的，是下面3個系統。

Blink是在2013年從WebKit分出來的。Microsoft在2020年1月，把Edge的核心換成以Chromium為基礎的版本。所以Chrome和Edge雖然外觀不同，組合網頁的方式幾乎一樣。

在iPhone和iPad上，依照Apple的規定，瀏覽器原則上要使用WebKit。iPhone版的Chrome，通常裡面也是WebKit。例外是歐盟和日本：為了配合當地法律，只要符合條件，也能使用其他引擎。歐盟從iOS 17.4起；日本從iOS 26.2起，依據日本的《智慧型手機軟體競爭促進法》（2026年10月時）。

引擎的差異之所以重要，有2個原因。同一個網頁，可能因引擎不同，顯示或動作略有差異。另外，某個引擎被發現弱點時，所有使用它的瀏覽器都會受到影響。

瀏覽器佔用大量記憶體的原因

瀏覽器佔用大量記憶體的主要原因，在於把網頁安全地分開執行的設計。作業系統以「行程」為單位管理執行中的程式，並分別借給各自的記憶體（「作業系統（OS）是什麼？」）。Chrome從2008年推出時起，就把負責顯示網頁的部分，按分頁等分成不同的行程。即使一個分頁當掉，其他分頁也能繼續運作。

2018年，一種利用CPU設計上弱點的攻擊廣為人知。這種攻擊稱為Spectre。在同一個行程裡，可能會偷看到其他網站的資料。因此Chrome從2018年的Chrome 67起，把電腦版按網站分開行程的方式設為預設。Firefox也在2021年，發表了相同概念的方式。

此外，顯示網頁的行程，會在嚴格限制能做的事的狀態下執行。也就是讓它不能直接碰觸檔案或設備。這種封閉的做法稱為「沙箱」。即使惡意網頁利用了引擎的弱點，損害也比較容易被擋在裡面。

分開行程後，每個行程都需要同樣元件的備份，所以記憶體用量會增加。瀏覽器是為了穩定和安全，才多用了一些記憶體。記憶體不夠時，關掉沒在用的分頁很有效。

安全使用瀏覽器的基本做法

瀏覽器是每天執行陌生對象送來的程式的App。所以引擎的弱點容易成為攻擊的入口，修正也經常發布。Chrome從2021年起，每4週推出一個新版本。

多數瀏覽器會自動接收更新，但有些像電腦版的Chrome，要重新啟動才會生效。看到「更新」或「重新啟動」的提示，基本上要盡早照做。在手機上，不要停用作業系統和App的更新。iPhone的瀏覽器大多是透過作業系統的更新，來取得WebKit的修正。

為瀏覽器增加功能的附加程式，稱為「擴充功能」。其中有些會要求讀取所有瀏覽中網頁內容的權限。只從官方商店安裝，並確認它要求的權限和功能相符，製作者也值得信任。

也要小心和真的一模一樣的假網站。分辨和防範的方法，在「網路釣魚是什麼？」中說明。

常見的誤解

從數字來看

進一步學習

• 用表格看差異：HTTP/1.1、HTTP/2、HTTP/3的差異
• 用表格看差異：行程與執行緒的差異、編譯器、直譯器、JIT 的差異
• 用數字試試看：資料傳輸時間計算工具（估算網頁送達需要的時間）
• 下一步的用語：同源政策（不讓網站讀取其他網站資料的規則）、跨網站指令碼（XSS）（利用網站弱點的攻擊）
• 更快送達的方法：CDN（內容傳遞網路）（把備份放在使用者附近來發送的機制）