前端三十｜30. [WEB] 從輸入網址列到渲染畫面，過程經歷了什麼事情？

相信讀者您在生活中，多少都會有搜尋、瀏覽網頁的經驗吧？輸入網址、而身為網頁製造者的前端工程師，你真的知道你寫出來的網頁在部屬之後，是怎麼從網址變成頁面，進而顯示在瀏覽器中的嗎？

接下來的內容，請各位讀者想像自己輸入了一個網址，並按下 Enter，開始今天的正題吧！

本系列文已經重新編校彙整編輯成冊，並正式出版囉！

《前端三十：從 HTML 到瀏覽器渲染的前端開發者必備心法》好評販售中！

喜歡我文章內容的讀者們，歡迎您前往購買支持！

網路應用程式

由前端工程師製作出來的網頁，其實只是網路應用程式中的一部分；在使用者輸入網址之後，會經過一系列的步驟，才會成為瀏覽器中與使用者互動的網頁；可以參考下圖：

圖片來自 Brendan Fortuner — How web applications work

圖中將整個網路應用程式相關的知識範圍都整理出來了，非常值得花點時間邊看邊思考。今天剩下的內容，會依照發生的順序及筆者我的熟悉程度，深淺不一的逐步說明沿路發生的事情：

網路連線

首先瀏覽器會解析使用者輸入內容，瀏覽器並將不是 ASCII 的不合法字元做轉換。如果是合法的 URL，例如 https://ithelp.ithome.com.tw，瀏覽器便能從中解析出「通訊協定（Protocol）」、「網域（Domain）」、「路徑（Path）」等資訊；如果不是合法的 URL，現代瀏覽器大多會自動幫你導去搜尋頁，URL 就變成搜尋引擎的入口頁了。

取得 URL 後，開始依序處理。首先判斷通訊協定，如果使用者有設定目標網域必須透過 HTTPS 連接，將會自動將通訊協定轉換成 HTTPS，避免遭受 降級攻擊。

Chrome 的使用者可以查看 chrome://net-internals/#hsts，調整自己的強制 HTTPS 設定。