瀏覽器輸入一個URL會發生什麼事

關於這個問題很明顯是要熟悉瀏覽器的工做機制，網絡上也有答案。
別小看這個問題，它涉及的知識面至關廣，要想說清楚，還真不是件容易的事。javascript

先從這張著名的圖提及，只要搞懂了這張圖的每一個模塊，那咱們也就知道是發生什麼事了html

1.User Interface 用戶界面前端

通俗的說就是瀏覽器呈現給用戶的樣子，如頂部（前進，後退，刷新，中止，地址欄，書籤欄，狀態欄，工具欄等按鈕），側欄（滾動條），底欄（滾動條），自帶的開發工具，下拉菜單，下載管理等，固然每一個瀏覽器廠商還有本身的特性。html5

2.Browser engine 瀏覽器引擎java

從百科上查到引擎（Engine）是電子平臺上開發程序或系統的核心組件。git

利用引擎，開發者可迅速創建、鋪設程序所需的功能，或利用其輔助程序的運轉。通常而言，引擎是一個程序或一套系統的支持部分。常見的程序引擎有遊戲引擎，搜索引擎，殺毒引擎等。github

從上圖來看，瀏覽器引擎向上鏈接用戶界面模塊，向下鏈接渲染引擎模塊，向右鏈接數據持久模塊，很好的詮釋了百科中的定義。web

3.Rendering engine 渲染引擎chrome

分量很重的模塊，頁面的表現及交互體驗就是靠它。shell

從網上摘這麼一個片斷：
渲染引擎的責任就是將渲染完的放在瀏覽器窗口中以顯示請求的數據。

渲染引擎默認是能顯示html、xml和圖片，而且經過一些插件能夠顯示其餘類型資源，如使用 a PDF viewer插件顯示PDF格式。
咱們參考的瀏覽器是-firefox、chrome和safari構造在上面的兩種渲染引擎上。Firefox使用是自家生產的mozilla渲染引擎－gecko，Safari和chrome都使用webkit.
Webkit是一個開源的渲染引擎，當初只是做爲 liunx平臺的引擎，經過蘋果公司的修改開始支持mac和window系統。

它的基本流程是從網絡層（networking）獲取請求文檔的內容，解析HTML/SVG/XHTML，造成Dom樹，解析CSS造成CSS規則樹，二者結合構建成渲染樹，經過JS解釋器解析腳本，最後經過UI後臺提供的接口繪出最終效果。這篇文章詳細的討論了渲染引擎的工做原理，這部分是頁面性能優化的關鍵部分，但願看官們仔細理解，這裏就再也不說了。

4.Networking

用於網絡調用，經過調用操做系統或gui框架提供的api。

好比 HTTP,HTTPS 請求，關注下HTTP協議。
這篇文章對於提高頁面加載響應速度有一個詳細的總結。

Javascript Interpreter javascript解釋器

解析和運行JS

不一樣瀏覽器有不一樣的javascript解釋器，請看這裏。

UI Backend

用於繪製基本的部件，例如combo 和windows。
它暴露的是一個通常化的接口而不是爲某個特殊平臺單獨處理。

底層使用的是操做系統用戶接口方法。

Data Persistence

這是一個持久層。瀏覽器須要保存各類分類的數據在硬盤，例如cookies和HTML5的本地數據庫等，都是經過這層來實現的。

最後總結

一旦輸入URL，DNS會進行查詢與解析，而後創建鏈接，在服務器端會有數據庫查詢，業務處理，返回數據，最後渲染頁面，執行腳本，加載各類資源，如圖片，視頻，音樂等。

下面這篇文章基本和前端知識沒多大關係，不過了解下沒有壞處
從輸入 URL 到頁面加載完成的過程當中都發生了什麼事情？

參考：
引擎
再談Yahoo關於性能優化的N條規則
瀏覽器的工做原理：新式網絡瀏覽器幕後揭祕
新web應用架構
HTTP 頭部詳解