輸入網址到顯示網頁瀏覽器都幹了什麼

-Advertisement-

輸入地址到顯示頁面發生了什麼 [Toc] 簡單版 1. 瀏覽器發起DNS請求,解析功能變數名稱得到地址 2. 封裝請求報文,併發送給伺服器 3. 伺服器接收請求並處理請求,封裝響應報發送會瀏覽器 4. 瀏覽器解析響應報文, 遇到新資源繼續請求 5. 瀏覽器根據解析結果生成樹, 樹, 進行頁面佈局和渲 ...

輸入地址到顯示頁面發生了什麼
- 簡單版
- 詳細版

輸入地址到顯示頁面發生了什麼

簡單版

瀏覽器發起DNS請求,解析功能變數名稱得到ip地址
封裝HTTP請求報文,併發送給伺服器
伺服器接收請求並處理請求,封裝HTTP響應報發送會瀏覽器
瀏覽器解析響應報文, 遇到新資源繼續請求
瀏覽器根據解析結果生成DOM樹, CSSOM樹, 進行頁面佈局和渲染
最終顯示完整頁面

詳細版

瀏覽器先查看緩存, 如果請求資源在緩存中且沒過期,使用緩存
1. 如果資源沒有緩存,發起新請求
2. 如果已緩存,檢查是否過期
  1. 沒有過期直接使用緩存
  2. 過期與伺服器進行驗證
(資源未緩存)瀏覽器解析URL, 獲取請求協議,主機,埠,路徑信息
封裝一個HTTP請求報文
獲取IP地址
1. 查看瀏覽器有沒有緩存這個IP地址
2. 本機緩存中有沒有
3. hosts文件有沒有
4. DNS查詢
與目標IP伺服器建立TCP連接, 然後發送HTTP請求報文
伺服器接收請求並處理
伺服器檢查HTTP請求頭是否包含緩存驗證信息, 如果驗證沒有過期,返回304
組裝HTTP響應報文, 並將發送回瀏覽器
瀏覽器接收HTTP響應,然後根據情況選擇關閉TCP連接或保留重用
對響應報文體進行解碼
瀏覽器檢查響應狀態碼, 如果資源可以緩存,進行緩存
解析HTML結構,構建DOM樹, CSSOM樹
解析過程遇到新的資源繼續發送請求,直到所有資源都載入完畢
根據DOM樹和CSSOM構建渲染樹, 並對渲染樹進行佈局
1. 解析HTML構建DOM樹
2. 根據DOM樹,CSSOM樹構建渲染樹
  1. 不可見節點不會放入渲染樹
    - 不可見節點: script, meta這樣的節點本身不可見
    - 被CSS隱藏的元素(display: none, visibility:hidden)
3. 對渲染樹進行佈局. 計算元素信息,確定大小,位置.
4. 調用系統API進行繪圖操作,顯示頁面
解析,執行JS(一般將JS放在末尾,所以JS的執行在DOM渲染之後)
1. 語法檢查階段
  - 詞法分析
  - 語法分析
2. 運行階段
  - 預解析
    1. 創建執行環境
      - 確定 變數對象
      - 確定 作用域
      - 確定 this
    2. 屬性填充(順序)
      - 函數參數(沒有傳入,初始化值為:undefined)
      - 函數聲明+定義(發生命名衝突會覆蓋)
      - 變數聲明(初始化值為:undefined, 發生命名衝突會忽略)
  - 代碼執行
    - js引擎一行行讀取代碼並執行
顯示頁面

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

想從新手小白蛻變成web前端大神，你不得不跨過這些坑

在大多數人眼裡，互聯網前端開發是一個有著高薪水、高職業榮譽感的行業。沒錯，隨著互聯網大環境的快速崛起，HTML5的發展，絕對屬於既有“錢景”還有前景的的朝陽行業。高收入、前景光明，即使對前端開發的要求越來越高，也還是有許多新人願意來一試身手，紛紛打破頭往這個行業裡面涌。都說一入前端深似海，從此節 ...
CSS--幾種常用的水平垂直居中對齊方法

CSS 幾種常用的水平垂直居中對齊方法 [Toc] 文字的水平垂直居中元素的水平垂直居中 1 使用絕對定位 2 使用絕對定位+ calc() 3. 使用絕對定位+transform 4. 使用display:flex; ...
簡單構造 Ext.tree 樹例子

Ext.define('MyTreeModel', { extend: 'Ext.data.Model', fields: [ 'name','url' ] }); var tree = Ext.create('Ext.tree.Panel',{ width:'200', height:'200', ...
CSS--百分比都是相對於誰計算的?

CSS 百分比都是相對於誰計算 [Toc] 相對於父級元素寬高 + , , ,`padding text indent` ... 等相對於父級定位元素寬高 + , , , 相對於自身寬高 + , , , 相對於自身字體大小 + 相對於繼承字體大小 + `font size` ...
網頁優化

網頁優化 [Toc] 上一章介紹了 "從輸入地址到到顯示網頁瀏覽器都幹了什麼" ,絕大部分的優化都在這個過程中減少HTTP請求減少HTTP請求是優化的重要手段 1. 減少圖片使用 2. 對小圖標這一類圖片使用合併, 或者使用編碼圖片 1. 優點: 減少了請求 2. 缺點: 修改維護不方便, ...
web前端入門到實戰：學習web前端流程以及職場規劃

解釋一下web前端工作是做啥的，Web前端開發工程師，主要職責是利用(X)HTML/CSS/JavaScript/Flash等各種Web技術進行客戶端產品的開發。完成客戶端程式（也就是瀏覽器端）的開發，開發JavaScript以及Flash模塊，同時結合後臺開發技術模擬整體效果，進行豐富互聯網的We ...
js判斷數組是否包含某個值

//判斷數組是否包含某個值 var nArr = new Array();nArr.push('123');nArr.push('345'); if (nArr.indexOf(234) != -1) { alert('存在');} else { alert('不存在');} ...
js驗證日期是否正確

/** * 驗證日期是否正確 * 日期格式：yyyy-mm-dd，yyyy-m-d，yyyy/mm/dd，yyyy/m/d */function checkDate(dateStr) { dateStr = dateStr.replace(/\//g, '-'); var dateReg = /^( ...