瀏覽器原理解析

1:瀏覽器渲染原理 從位址列輸入url到頁面展示 1：dns域名解析 2：tcp連線(tcp三次握手) 3：http請求，響應。http協議底層是tcp/ip, 請求的報文包括：請求行，請求頭，請求正文，請求時cookie放在請求頭中，傳輸到伺服器，這使得cookie的速度慢，效率也不高 http請求中get和post區別：get把引數放在url中，post通過request body傳遞引數，get和post請求是tcp連線 設定長連線 Connection：keep-alive 4：伺服器響應：響應內容包括狀態碼，響應頭，響應報文 5：客戶端頁面渲染， 1：處理html標記並構建dom樹， 2：處理css標記並構建css樹 3：將dom和cssom合併為一個樹 4：根據渲染樹來佈局，以計算每個節點的資訊 5：將各個節點繪製到螢幕上 5個步驟並不一定一次性完成，如果dom或css被修改，以上過程需要重複執行，這樣才能計算出那些畫素需要在螢幕上重新繪製， 處理html標記並構建dom樹，處理css標記並構建cssOM樹，將dom與cssOM合併成一個渲染樹，根據渲染樹佈局，將各個節點繪製到螢幕上 script標籤會阻止dom構建，js可以修改dom和css defer和async可以改變阻塞模式 css:

2：web回話跟蹤的方法： cookie儲存:優點，相容性不錯，建立之初就支援缺點：瀏覽器能存cookid數少，2每次請求都會附著在請求頭，傳輸到伺服器端 session: 重繪與迴流：迴流必會引起重繪，重繪不一定引起迴流。 重繪：當前元素的樣式發生變化，只需把改變的元素重新渲染一下即可，重繪對瀏覽器的效能影響小。 迴流：瀏覽器重新渲染部分或全部的文件而重新計算文件中元素的位置和幾何構造的過程，迴流可能會導致dom樹重新構造，應避免迴流，觸發迴流的過程：調整視窗大小，改變字型大小，增加或者移除表，內容變化，啟用css偽類，操作class屬性，指令碼操作dom,計算offsetwidth和offsetheight，設定style屬性的值，fixed固定定位元素,拖動滾動條時會一直迴流， 避免迴流：將樣式集中在class類上一次變化，而不是變化幾次。 具有動畫效果使用absolute,避免使用表格佈局，不要使用css表示式，在最後操作元素(迴流是自上而下的，在最後修改資訊對全域性影響小)，拖動元素時，在他x或y改變座標改變才操作，計算offsetwidth時拿一個變數儲存它，減少dom的做作儲存在變數中(var dom=document), 渲染樹：1：瀏覽器把獲取到的html程式碼解析成一棵樹，每個標籤都是dom樹中一個節點，根節點就是document物件，dom樹包含了所有標籤包括display:none,js動態新增的元素，瀏覽器把所有樣式解析成樣式結構體，解析會去掉_開頭的樣式，dom樹和樣式結構體組合後構建渲染樹，渲染樹不包括display:none的節點還有head,這些節點不會用於呈現，也不會影響呈現，visible:hidden隱藏的元素還會包含到渲染樹中，會影響佈局，佔用空間，