渲染過程

構建DOM樹(DOM tree)：從上到下解析HTML文檔生成DOM節點樹（DOM tree）
構建CSSOM(CSS Object Model)樹：加載解析樣式生成CSSOM樹
執行JavaScript：加載并執行JavaScript代碼（包括內聯代碼或外聯JavaScript文件）
構建渲染樹(render tree)：根據DOM樹和CSSOM樹,生成渲染樹(render tree)；渲染樹：按順序展示在屏幕上的一系列矩形，這些矩形帶有字體，顏色和尺寸等視覺屬性
布局（layout）：根據渲染樹將節點樹的每一個節點布局在屏幕上的正確位置
繪制（painting）：遍歷渲染樹繪制所有節點，為每一個節點適用對應的樣式，這一過程是通過UI后端模塊完成

重排或者叫回流（reflow，relayout）

這個過程就是通過渲染樹中渲染對象的信息，計算出每一個渲染對象的位置和尺寸
將其安置在瀏覽器窗口的正確位置
觸發：增加、刪除、修改、移動、修改css樣式

重繪(redraw)

瀏覽器會根據元素的新屬性重新繪制，使元素呈現新的外觀
重繪不會帶來重新布局，并不一定伴隨重排
觸發：dom改變，css移動，改變visibility、outline、背景色等屬性

HTTP

http協議的概念

http是HyperText Transfer Protocol的縮寫，也稱為超文本傳輸協議，最初的版本只能用來傳輸html文件，現在則可以傳輸包括文字、圖像、視頻和二進制文件的所有內容

http協議的特點

1、簡單快速，每個資源固定出來起來方便
2、 靈活，每個資源頭部數據類型
3、 無連接：連接一次就會斷掉，不會一直連接
4、無狀態，客戶端和服務端是兩種身份，http幫助連接，下次連接不會記住狀態，是誰連接的

http協議報文組成部分

請求報文：請求行、請求頭、空行（告訴服務器請求頭部到此為止）、請求體

響應報文：狀態行（200 ok）、響應頭、空行、響應體

get和post

1、Get 請求能緩存，Post 不能
2、Post 相對 Get 安全一點點，因為Get 請求都包含在 URL 里，且會被瀏覽器保存歷史紀錄，Post 不會，但是在抓包的情況下都是一樣的。
3、Post 可以通過 request body來傳輸比 Get 更多的數據，Get 沒有這個技術
4、URL有長度限制，會影響 Get 請求，但是這個長度限制是瀏覽器規定的，不是 RFC 規定的
5、Post 支持更多的編碼類型且不對數據類型限制
6、在express框架中，對于GET請求的參數'?xxxx=',使用req.query.xxxxx方法獲得；對于POST請求的參數，使用req.body.xxxxx方法獲得

http常見狀態碼

2XX 成功

200 OK，表示從客戶端發來的請求在服務器端被正確處理
204 No content，表示請求成功，但響應報文不含實體的主體部分
206 Partial Content，進行范圍請求

3XX 重定向

301 moved permanently，永久性重定向，表示資源已被分配了新的 URL
302 found，臨時性重定向，表示資源臨時被分配了新的 URL
303 see other，表示資源存在著另一個 URL，應使用 GET 方法丁香獲取資源
304 not modified，表示服務器允許訪問資源，但因發生請求未滿足條件的情況
307 temporary redirect，臨時重定向，和302含義相同

4XX 客戶端錯誤

400 bad request，請求報文存在語法錯誤
401 unauthorized，表示發送的請求需要有通過 HTTP 認證的認證信息
403 forbidden，表示對請求資源的訪問被服務器拒絕
404 not found，表示在服務器上沒有找到請求的資源

5XX 服務器錯誤

500 internal sever error，表示服務器端在執行請求時發生了錯誤
503 service unavailable，表明服務器暫時處于超負載或正在停機維護，無法處理請求

http持久連接

HTTP 協議采用“請求-應答”模式，當使用普通模式，即非 Keep-Alive 模式時，每個請求/應答客戶和服務器都要新建一個連接，完成之后立即斷開連接（HTTP協議為無連接的協議）；當使用 Keep-Alive 模式（又稱持久連接、連接重用）時，Keep-Alive 功能使客戶端到服務器端的連接持續有效，當出現對服務器的后繼請求時，Keep-Alive 功能避免了建立或者重新建立連接

HTTP 管線化

默認情況下 HTTP 協議中每個傳輸層連接只能承載一個 HTTP 請求和響應，瀏覽器會在收到上一個請求的響應之后，再發送下一個請求。在使用持久連接的情況下，某個連接上消息的傳遞類似于請求1 -> 響應1 -> 請求2 -> 響應2 -> 請求3 -> 響應3。

HTTP Pipelining（管線化）是將多個 HTTP 請求整批提交的技術，在傳送過程中不需等待服務端的回應。使用 HTTP Pipelining 技術之后，某個連接上的消息變成了類似這樣請求1 -> 請求2 -> 請求3 -> 響應1 -> 響應2 -> 響應3。

注意下面幾點：

1、管線化機制通過持久連接（persistent connection）完成，僅 HTTP/1.1 支持此技術（HTTP/1.0不支持）
2、只有 GET 和 HEAD 請求可以進行管線化，而 POST 則有所限制
3、初次創建連接時不應啟動管線機制，因為對方（服務器）不一定支持 HTTP/1.1 版本的協議
4、管線化不會影響響應到來的順序，如上面的例子所示，響應返回的順序并未改變
5、HTTP /1.1 要求服務器端支持管線化，但并不要求服務器端也對響應進行管線化處理，只是要求對于管線化的請求不失敗即可
6、由于上面提到的服務器端問題，開啟管線化很可能并不會帶來大幅度的性能提升，而且很多服務器端和代理程序對管線化的支持并不好，因此現代瀏覽器如 Chrome 和 Firefox 默認并未開啟管線化支持

HTTP 緩存機制和原理

對于強制緩存，服務器通知瀏覽器一個緩存時間，在緩存時間內，下次請求，直接用緩存，不在時間內，執行比較緩存策略
對于比較緩存，將緩存信息中的Etag和Last-Modified通過請求發送給服務器，由服務器校驗，返回304狀態碼時，瀏覽器直接使用緩存

存儲

各種存儲方案的簡單對比

1、Cookies：瀏覽器均支持，容量為4KB
2、UserData：僅IE支持，容量為64KB  
3、 Flash：100KB，非HTML原生，需要插件支持
4、 Google Gears SQLite ：需要插件支持，容量無限制
5、 LocalStorage：HTML5，容量為5M
6、 SesstionStorage：HTML5，容量為5M
7、globalStorage：Firefox獨有的，Firefox13開始就不再支持這個方法

Cookie

特點
1、cookie的大小受限制，cookie大小被限制在4KB，不能接受像大文件或郵件那樣的大數據 2、cookie要在服務器和瀏覽器之間來回傳送，cookie數據始終在同源的http請求中攜帶（即使不需要） 3、cookie是服務端生成，客戶端進行維護和存儲

Cookie的生成方式

生成方式一：http response header中的set-cookie
生成方式二：js中可以通過document.cookie可以讀寫cookie//以鍵值對的形式展示

Cookie的缺陷

1、cookie會被附加在每個HTTP請求中，在HttpRequest 和HttpResponse的header中都是要被傳輸的，所以無形中增加了一些不必要的流量損失
cookie是用來維護用戶信息的，而域名(domain)下所有請求都會攜帶cookie，但對于靜態文件的請求，攜帶cookie信息根本沒有用，此時可以通過cdn（存儲靜態文件的）的域名和主站的域名分開來解決

2、由于在HTTP請求中的Cookie是明文傳遞的，所以安全性成問題，除非用HTTPS。 可以使用HttpOnly提升Cookie安全性。httponly 不支持讀寫，瀏覽器不允許腳本操作document.cookie去更改cookie，一般情況下都應該設置這個為true，這樣可以避免被XSS攻擊拿到cookie

session

session機制是一種服務器端的機制，服務器使用一種類似于散列表的結構（也可能就是使用散列表）來保存信息

localStorage

這是一種持久化的存儲方式，也就是說如果不手動清除，數據就永遠不會過期。它也是采用Key - Value的方式存儲數據，底層數據接口是sqlite，按域名將數據分別保存到對應數據庫文件里。它能保存更大的數據（IE8上是10MB，Chrome是5MB），同時保存的數據不會再發送給服務器，避免帶寬浪費

localStorage缺點

① localStorage大小限制在500萬字符左右，各個瀏覽器不一致
② localStorage在隱私模式下不可讀取
③ localStorage本質是在讀寫文件，數據多的話會比較卡
④ localStorage不能被爬蟲爬取，不要用它完全取代URL傳參

SessionStorage

和服務器端使用的session類似，是一種會話級別的緩存，關閉瀏覽器會數據會被清除。不過有點特別的是它的作用域是窗口級別的，也就是說不同窗口間的sessionStorage數據不能共享的。

SessionStorage缺點

① 會話級別的瀏覽器存儲
② 大小為5M左右
③僅在客戶端使用，不和服務端進行通信
④ 接口封裝較好

總結

以上是生活随笔為你收集整理的浏览器网络相关概念的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。