從url到頁面展示總體來說分為以下幾個過程：
- DNS解析
- TCP連接
- 服務器處理響應請求
- 瀏覽器解析渲染頁面
DNS解析
DNS（Domain Name System，域名系統），因特網上作為域名和IP地址相互映射的一個分布式數據庫，能夠使用戶更方便的訪問互聯網，而不用去記住能夠被機器直接讀取的IP數串。
DNS緩存有幾個環節：
- 瀏覽器緩存：瀏覽器首先會查看自身是否已經有進行 DNS 緩存。Chrome 可以通過
chrome://net-internals/#dns查看緩存的 DNS，瀏覽器的 DNS 緩存可以加快 DNS 解析速度，但緩存時間不會太長。 - 如果瀏覽器沒有相應的緩存，則查找系統緩存，瀏覽器會向系統發送一個查詢請求，如果系統存在緩存或者設置了 host ，則返回相應的 ip 地址給瀏覽器。
- 如果系統沒有緩存，那么它會發出一個 DNS 查詢請求給路由器。
- 如果路由器有 DNS 緩存，他會提取出 IP 地址返回。否則，他會向本地域名服務器發出查詢，從請求主機到本地域名服務器的請求一般是遞歸查詢，而其他的查詢一般是迭代查詢。
TCP連接
經過DNS解析，此時瀏覽器得到了要訪問的域名的 IP 地址。之后會通過三次握手建立連接，下圖為三次握手示意圖：
TCP連接
- 第一次握手時，客戶端需要在發包時要告知自身的一些信息。
- 在接收到客戶端發來的握手包后，服務端進行應答，雙方交換一些信息。
- 服務端接受請求后，客戶端還需要在發送一個握手包，自此三次握手完成，連接建立，可以開始傳輸數據。
服務器處理響應請求
服務器是安裝了操作系統的機器，通過服務器包含的web serve來處理相關請求，常見的web server包括Apache/Nginx/lls/Lighttpd. web serve服務器接受用戶請求交給網站代碼，或者接受請求反向代理到其他web server。服務器響應請求，將數據返回給瀏覽器。數據可能是根據HTML協議組織的網頁，里面包含頁面的布局、文字。數據也可能是圖片、腳本程序等。
瀏覽器解析渲染頁面
客戶端下載完資源后，瀏覽器會解析HTML成樹形的數據結構DOM，生成DOM Tree，瀏覽器將css代碼解析成樹形的數據結構CSSOM，生成CSS Rule Tree。DOM Tree和CSS Rule Tree結合生成Render Tree。
有了Render Tree，瀏覽器知道網頁中有哪些節點、各個節點的css定義以及他們的從屬關系。接著就開始布局，計算出每個節點在屏幕中的位置。瀏覽器在知道了哪些節點要展示，并且每個節點的css屬性是什么、每個節點在屏幕中的位置在哪里的時候，就會進入了最后一步，按照算出來的規則，進行展示。
其中javascript可以根據DOM API操作DOM。比如JS修改了DOM或者CSS屬性，也會重新的觸發布局和渲染的執行過程。
