從瀏覽器位址列輸入url到顯示頁面的步驟(以http為例)
- 在瀏覽器位址列輸入url
- 瀏覽器檢視快取，如果請求資源在快取中並且新鮮，跳轉到轉碼步驟
- 如果資源未快取，發起新請求
- 如果已快取，檢驗是否足夠新鮮，足夠新鮮直接提供給客戶端，否則與伺服器進行驗證。
- 檢驗新鮮通常有兩個http頭進行控制expires和cache-control：
- http1.0提供expires，值為乙個絕對時間表示快取新鮮日期
- http1.1增加了cache-control: max-age=,值為以秒為單位的最大新鮮時間
- 瀏覽器解析url獲取協議，主機，埠，path
- 瀏覽器組裝乙個http（get）請求報文
- 瀏覽器獲取主機ip位址，過程如下：
- 瀏覽器快取
- 本機快取
- hosts檔案
- 路由器快取
- isp dns快取
- dns遞迴查詢（可能存在負載均衡導致每次ip不一樣）
- 開啟乙個socket與目標ip位址，埠建立tcp鏈結，三次握手如下：
- 客戶端傳送乙個tcp的syn=1，seq=x的包到伺服器端口
- 伺服器發回syn=1， ack=x+1， seq=y的響應包
- 客戶端傳送ack=y+1， seq=z
- tcp鏈結建立後傳送http請求
- 伺服器接受請求並解析，將請求**到服務程式，如虛擬主機使用http host頭部判斷請求的服務程式
- 伺服器檢查http請求頭是否包含快取驗證資訊如果驗證快取新鮮，返回304等對應狀態碼
- 處理程式讀取完整請求並準備http響應，可能需要查詢資料庫等操作
- 伺服器將響應報文通過tcp連線傳送回瀏覽器
- 瀏覽器接收http響應，然後根據情況選擇關閉tcp連線或者保留重用，關閉tcp連線的四次握手如下：
- 主動方傳送fin=1， ack=z， seq= x報文
- 被動方傳送ack=x+1， seq=z報文
- 被動方傳送fin=1， ack=x， seq=y報文
- 主動方傳送ack=y， seq=x報文
- 瀏覽器檢查響應狀態嗎：是否為1xx，3xx， 4xx， 5xx，這些情況處理與2xx不同
- 如果資源可快取，進行快取
- 對響應進行解碼（例如gzip壓縮）
- 根據資源型別決定如何處理（假設資源為html文件）
- 構建dom樹：
- tokenizing：根據html規範將字元流解析為標記
- lexing：詞法分析將標記轉換為物件並定義屬性和規則
- dom construction：根據html標記關係將物件組成dom樹
- 構建cssom樹：
- tokenizing：字元流轉換為標記流
- node：根據標記建立節點
- cssom：節點建立cssom樹
- 根據dom樹和cssom樹構建渲染樹:
- 從dom樹的根節點遍歷所有可見節點，不可見節點包括：1）script,meta這樣本身不可見的標籤。2)被css隱藏的節點，如display: none
- 對每乙個可見節點，找到恰當的cssom規則並應用
- 發布可視節點的內容和計算樣式
- js解析如下：
- 瀏覽器建立document物件並解析html，將解析到的元素和文字節點新增到文件中，此時document.readystate為loading
- 當文件完成解析，document.readstate變成interactive
- 所有defer指令碼會按照在文件出現的順序執行，延遲指令碼能訪問完整文件樹，禁止使用document.write()
- 瀏覽器在document物件上觸發domcontentloaded事件
- 此時文件完全解析完成，瀏覽器可能還在等待如等內容載入，等這些內容完成載入並且所有非同步指令碼完成載入和執行，document.readstate變為complete,window觸發load事件
- 顯示頁面（html解析過程中會逐步顯示頁面）
前端面試題整理
1.html5的新特性。主要講講新增哪些api 地理定位，拖放，web儲存應用快取，webworkers，sse 2.css3的新特性。3 使用嚴格模式的限制有哪些。4 什麼是同源？什麼情況下就屬於跨域？怎麼解決跨域說出三種以上的方法，jsonp原理是什麼。同源 協議，網域名稱，埠相同 方法一 co...
前端面試題整理
js 1 ajax 原理 ajax的基本原理總結 2 原型和原型鏈 原型和原型鏈 3 深拷貝淺拷貝 js的深拷貝和淺拷貝 4 繼承有幾種方式 js繼承的幾種方式 5 閉包 js閉包 6 阻止事件冒泡，和預設事件 阻止事件冒泡，阻止預設事件 7 陣列去重 物件去重 8 陣列有哪些方法 9 promis...
前端面試題（整理）
1.什麼時候需要清除浮動，清除浮動的方法有哪些？樣式與當前div衝突時需要清除浮動。方法 1 末尾額外增加乙個空標籤 2 通過設定父元素overflow值設定為overflow hidden 再ie6中需要出發haslayout,例如zoom 1 3 為父元素設定寬高 4 使用 br標籤和其自身的 ...