- DNS解析
- 發(fā)起TCP連接
- 發(fā)送HTTP請求
- 服務(wù)器處理請求并返回HTTP報文
- 瀏覽器解析渲染頁面
- 連接結(jié)束笆焰。
DNS解析(網(wǎng)址和IP地址的轉(zhuǎn)換)
輸入網(wǎng)址后，首先在本地的域名服務(wù)器中查找绰咽，沒找到去根域名服務(wù)器查找，沒有再去com頂級域名服務(wù)器查找地粪，取募，如此的類推下去，直到找到IP地址蟆技，然后把它記錄在本地玩敏，供下次使用。
DNS優(yōu)化
-
DNS緩存
瀏覽器緩存质礼，系統(tǒng)緩存旺聚，路由器緩存，IPS服務(wù)器緩存眶蕉，根域名服務(wù)器緩存砰粹，頂級域名服務(wù)器緩存，主域名服務(wù)器緩存 - DNS負載均衡
發(fā)起TCP連接
三次握手造挽，四次揮手
客戶端(c)
服務(wù)器(s)
- 三次握手
c:1+1等于幾
s:2碱璃，2+2等于幾
c:4
??完畢 - 四次揮手
c:我要掛斷了
s:那你掛了吧，你掛了之后給我發(fā)個信息
c:我已經(jīng)掛斷了
s:好的
發(fā)送HTTP請求
請求方式
- get
- post
區(qū)別:
GET在瀏覽器回退時是無害的饭入，而POST會再次提交請求嵌器。
GET產(chǎn)生的URL地址可以被Bookmark，而POST不可以谐丢。
GET請求會被瀏覽器主動cache爽航，而POST不會，除非手動設(shè)置乾忱。
GET請求只能進行url編碼讥珍，而POST支持多種編碼方式。
GET請求參數(shù)會被完整保留在瀏覽器歷史記錄里饭耳，而POST中的參數(shù)不會被保留串述。
GET請求在URL中傳送的參數(shù)是有長度限制的执解，而POST么有寞肖。
對參數(shù)的數(shù)據(jù)類型纲酗，GET只接受ASCII字符，而POST沒有限制新蟆。
GET比POST更不安全觅赊，因為參數(shù)直接暴露在URL上，所以不能用來傳遞敏感信息琼稻。
GET參數(shù)通過URL傳遞吮螺，POST放在Request body中。
GET會產(chǎn)生一個TCP數(shù)據(jù)包帕翻，而POST會產(chǎn)生兩個TCP數(shù)據(jù)包
HTTP緩存
規(guī)則
- 強制緩存
- 協(xié)商緩存
強制緩存的優(yōu)先級高于協(xié)商緩存
優(yōu)點
減少了冗余的數(shù)據(jù)傳遞鸠补，節(jié)省寬帶流量
減少了服務(wù)器的負擔，大大提高了網(wǎng)站性能
加快了客戶端加載網(wǎng)頁的速度 這也正是HTTP緩存屬于客戶端緩存的原因嘀掸。
不同的刷新方式
- 地址欄輸入URL
瀏覽器發(fā)現(xiàn)緩存中有這個文件了紫岩，不用繼續(xù)請求了，直接去緩存拿睬塌。（最快） - F5
F5就是告訴瀏覽器泉蝌，別偷懶，好歹去服務(wù)器看看這個文件是否有過期了 - ctrl+F5
告訴瀏覽器揩晴，你先把你緩存中的這個文件給我刪了勋陪，然后再去服務(wù)器請求個完整的資源文件下來。于是客戶端就完成了強行更新的操作
狀態(tài)碼
- 2XX 請求成功
- 3XX 重定向
- 4XX 資源丟失
- 5XX 服務(wù)器內(nèi)部錯誤
瀏覽器解析渲染頁面
- 解析HTML形成DOM樹
- 解析CSS形成CSSOM 樹
- 合并DOM樹和CSSOM樹形成渲染樹
- 瀏覽器開始渲染并繪制頁面這個過程涉及兩個比較重要的概念回流和重繪硫兰，DOM結(jié)點都是以盒模型形式存在诅愚，需要瀏覽器去計算位置和寬度等，這個過程就是回流劫映。等到頁面的寬高呻粹，大小，顏色等屬性確定下來后苏研，瀏覽器開始繪制內(nèi)容等浊，這個過程叫做重繪。瀏覽器剛打開頁面一定要經(jīng)過這兩個過程的摹蘑，但是這個過程非常非常非常消耗性能筹燕，所以我們應(yīng)該盡量減少頁面的回流和重繪
回流
當Render Tree中部分或全部元素的尺寸、結(jié)構(gòu)衅鹿、或某些屬性發(fā)生改變時撒踪，瀏覽器重新渲染部分或全部文檔的過程稱為回流。
會導(dǎo)致回流的操作：
- 頁面首次渲染
- 瀏覽器窗口大小發(fā)生改變
- 元素尺寸或位置發(fā)生改變
- 元素內(nèi)容變化（文字數(shù)量或圖片大小等等）
- 元素字體大小變化
- 添加或者刪除可見的DOM元素
- 激活CSS偽類（例如：:hover）
- 查詢某些屬性或調(diào)用某些方法
一些常用且會導(dǎo)致回流的屬性和方法：
- clientWidth大渤、clientHeight制妄、clientTop、clientLeft
- offsetWidth泵三、offsetHeight耕捞、offsetTop衔掸、offsetLeft
- scrollWidth、scrollHeight俺抽、scrollTop敞映、scrollLeft
- scrollIntoView()、scrollIntoViewIfNeeded()
- getComputedStyle()
- getBoundingClientRect()
- scrollTo()
重繪
當頁面中元素樣式的改變并不影響它在文檔流中的位置時（例如：color磷斧、background-color振愿、visibility等），瀏覽器會將新樣式賦予給元素并重新繪制它弛饭，這個過程稱為重繪冕末。
