瀏覽器原理解析

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隱藏的元素還會包含到渲染樹中，會影響佈局，佔用空間，