從url到頁面展示總體來說分為以下幾個(gè)過程：
- DNS解析
- TCP連接
- 服務(wù)器處理響應(yīng)請(qǐng)求
- 瀏覽器解析渲染頁面
DNS解析
DNS（Domain Name System灌具，域名系統(tǒng)）燃领，因特網(wǎng)上作為域名和IP地址相互映射的一個(gè)分布式數(shù)據(jù)庫，能夠使用戶更方便的訪問互聯(lián)網(wǎng)郭计，而不用去記住能夠被機(jī)器直接讀取的IP數(shù)串。
DNS緩存有幾個(gè)環(huán)節(jié)：
- 瀏覽器緩存：瀏覽器首先會(huì)查看自身是否已經(jīng)有進(jìn)行 DNS 緩存。Chrome 可以通過
chrome://net-internals/#dns查看緩存的 DNS沈善，瀏覽器的 DNS 緩存可以加快 DNS 解析速度口叙，但緩存時(shí)間不會(huì)太長炼绘。 - 如果瀏覽器沒有相應(yīng)的緩存，則查找系統(tǒng)緩存妄田，瀏覽器會(huì)向系統(tǒng)發(fā)送一個(gè)查詢請(qǐng)求俺亮，如果系統(tǒng)存在緩存或者設(shè)置了 host ，則返回相應(yīng)的 ip 地址給瀏覽器疟呐。
- 如果系統(tǒng)沒有緩存脚曾，那么它會(huì)發(fā)出一個(gè) DNS 查詢請(qǐng)求給路由器。
- 如果路由器有 DNS 緩存启具，他會(huì)提取出 IP 地址返回本讥。否則，他會(huì)向本地域名服務(wù)器發(fā)出查詢鲁冯，從請(qǐng)求主機(jī)到本地域名服務(wù)器的請(qǐng)求一般是遞歸查詢拷沸，而其他的查詢一般是迭代查詢。
TCP連接
經(jīng)過DNS解析晓褪，此時(shí)瀏覽器得到了要訪問的域名的 IP 地址堵漱。之后會(huì)通過三次握手建立連接，下圖為三次握手示意圖：
- 第一次握手時(shí)涣仿，客戶端需要在發(fā)包時(shí)要告知自身的一些信息勤庐。
- 在接收到客戶端發(fā)來的握手包后，服務(wù)端進(jìn)行應(yīng)答好港，雙方交換一些信息愉镰。
- 服務(wù)端接受請(qǐng)求后，客戶端還需要在發(fā)送一個(gè)握手包钧汹，自此三次握手完成丈探，連接建立，可以開始傳輸數(shù)據(jù)拔莱。
服務(wù)器處理響應(yīng)請(qǐng)求
服務(wù)器是安裝了操作系統(tǒng)的機(jī)器碗降，通過服務(wù)器包含的web serve來處理相關(guān)請(qǐng)求，常見的web server包括Apache/Nginx/lls/Lighttpd. web serve服務(wù)器接受用戶請(qǐng)求交給網(wǎng)站代碼塘秦，或者接受請(qǐng)求反向代理到其他web server讼渊。服務(wù)器響應(yīng)請(qǐng)求，將數(shù)據(jù)返回給瀏覽器尊剔。數(shù)據(jù)可能是根據(jù)HTML協(xié)議組織的網(wǎng)頁爪幻，里面包含頁面的布局、文字。數(shù)據(jù)也可能是圖片挨稿、腳本程序等仇轻。
瀏覽器解析渲染頁面
客戶端下載完資源后，瀏覽器會(huì)解析HTML成樹形的數(shù)據(jù)結(jié)構(gòu)DOM奶甘，生成DOM Tree篷店，瀏覽器將css代碼解析成樹形的數(shù)據(jù)結(jié)構(gòu)CSSOM，生成CSS Rule Tree臭家。DOM Tree和CSS Rule Tree結(jié)合生成Render Tree船庇。
有了Render Tree，瀏覽器知道網(wǎng)頁中有哪些節(jié)點(diǎn)侣监、各個(gè)節(jié)點(diǎn)的css定義以及他們的從屬關(guān)系鸭轮。接著就開始布局，計(jì)算出每個(gè)節(jié)點(diǎn)在屏幕中的位置橄霉。瀏覽器在知道了哪些節(jié)點(diǎn)要展示窃爷，并且每個(gè)節(jié)點(diǎn)的css屬性是什么、每個(gè)節(jié)點(diǎn)在屏幕中的位置在哪里的時(shí)候姓蜂，就會(huì)進(jìn)入了最后一步按厘，按照算出來的規(guī)則，進(jìn)行展示钱慢。
其中javascript可以根據(jù)DOM API操作DOM逮京。比如JS修改了DOM或者CSS屬性，也會(huì)重新的觸發(fā)布局和渲染的執(zhí)行過程束莫。
