1.一次完整的HTTP事務流程

（1）域名解析

（2）發起TCP的三次握手

（3）建立TCP連線後發起http請求

（4）伺服器響應http請求，瀏覽器得到HTML程式碼

（5）瀏覽器解析HTML程式碼，並請求HTML程式碼中的資源

（6）瀏覽器對頁面進行渲染呈現給使用者

（7）連線結束

2.用什麼解析成IP？

從網址到IP地址的轉換，稱為DNS解析，DNS解析是一個遞迴查詢的過程，具體步驟如下（以www.google.com為例）：

（1）首先在本地域名伺服器（最近的一臺DNS伺服器）中查詢IP地址

（2）如果沒有找到，本地域名伺服器會向根域名伺服器傳送一個請求

（3）如果根域名伺服器中也不存在該域名，但判定這個域名屬於“com”域，則本地域名伺服器會向com頂級域名伺服器傳送一個請求

（4）如果com頂級域名伺服器沒有找到該域名，但判定這個域名屬於“google.com”域，則本地域名伺服器會向google.com域名伺服器傳送一個請求，以此類推

（5）直到本地域名伺服器得到域名對應的IP地址，並將其快取到本地，供下次查詢使用

（6）綜上，網址的解析過程為.->.com->google.com->www.google.com.。

3.Tcp三次握手？四次揮手？

三次握手的必要性：為了保證伺服器能接收到客戶端的資訊並做出正確的應答而進行前兩次（第一次和第二次）握手，為了保證客戶端能夠接收到服務端的資訊並能做出正確的應答而進行後兩次（第二次和第三次）握手。

上圖部分標誌說明：

（1）ACK：TCP規定，只有當ACK=1時有效，也規定連線建立後所有傳送的報文的ACK必須為1

（2）SYN（SYNchronization）：在連線建立時用來同步序號。當SYN=1而ACK=0時，表明這個是一個連線請求報文。對方若同意建立連線，則響應報文中SYN=1，ACK=1。因此，SYN置1表示這是一個連線請求或連線接受報文。

（3）FIN（finish）：終結的意思，用來釋放一個連線。當FIN=1時，表明此報文段的傳送方的資料已經發送完畢，並請求釋放連線。

三次握手說明：

（1）第一次握手：建立連線。客戶端傳送連線請求報文段，將SYN位置1，序列號seq（sequence number）為x；然後，客戶端進入SYN_SEND狀態，等待伺服器的確認。

（2）第二次握手：伺服器收到SYN報文段。伺服器收到客戶端的SYN報文段，需要對這個SYN報文段進行確認，ACK位置1，確認號ack（acknowledgement number）為x+1；同時，自己還要傳送SYN請求資訊，將SYN位置1，序列號seq為y；伺服器將上述SYN+ACK報文段一併傳送給客戶端，此時伺服器進入SYN_RECV狀態。

（3）第三次握手：客戶端收到伺服器的SYN+ACK報文段。然後將確認號ack設定為y+1，向伺服器傳送ACK報文段。這個報文段傳送完畢後，客戶端和伺服器都進入ESTABLISHED狀態，完成TCP三次握手，之後可以開始傳資料。

四次揮手：當客戶端和伺服器通過三次握手建立了TCP連線之後，當資料傳輸完畢，就要斷開TCP連線，這個過程稱為四次揮手。四次揮手說明：

（1）第一次揮手：主機1（可以是客戶端，也可以是伺服器）設定序列號seq為u，向主機2傳送一個FIN報文段；此時，主機1進入FIN_WAIT狀態，這表示主機1沒有資料要傳送給主機2了。

（2）第二次揮手：主機2收到了主機1傳送的FIN報文段，向主機1回覆一個ACK報文段，確認號ack為u+1，序列號seq為v；主機2進入CLOSE_WAIT狀態；主機1收到主機2傳送的ACK報文段之後，進入FIN_WAIT_2狀態。

（3）第三次揮手：主機2向主機1傳送FIN報文段，設定序列號seq為w，確認號ack為u+1，請求關閉連線，同時主機2進入LAST_ACK狀態

（4）第四次揮手：主機1收到主機2傳送的FIN報文段，向主機2傳送ACK報文段，確認號ack為w+1，序列號seq為u+1，然後主機1進入TIME_WAIT狀態；主機2收到主機1的ACK報文段以後，就關閉連線；此時，主機1等待2MSL（MSL，最長報文段壽命）後依然沒有收到回覆，則證明服務端已經正常關閉，那麼主機1也可以關閉連線了。

4.HTTP請求碼及其作用？

HTTP狀態碼：當用戶訪問一個網頁時，瀏覽器會向網頁所在的伺服器出請求，當瀏覽器接收並顯示網頁前，此網頁所在伺服器會返回一個包含HTTP狀態碼的資訊頭（server header）用以響應瀏覽器的請求，HTTP狀態碼用於描述伺服器對請求的處理結果。

HTTP狀態碼分類：

（1）1**：資訊，伺服器收到請求，需要請求者繼續執行操作

（2）2**：成功，操作被成功接收並處理

（3）3**：重定向，需要進一步的操作以完成請求

（4）4**：客戶端錯誤，請求包含語法錯誤或者無法完成請求

（5）5**：伺服器錯誤，伺服器在處理請求的過程中發生了錯誤

常見的HTTP狀態碼：

• 200——OK，請求成功
• 301——Moved Permanently，資源（網頁等）被永久轉移到其他URL
• 302——Found，307——Temporary Redirect，臨時重定向，請求的文件被臨時移動到別處
• 304——Not Modified，未修改，表示客戶端快取的版本是最近的
• 401——Unauthorized，請求要求使用者的身份認證
• 403——Forbidden，禁止，伺服器理解客戶端請求，但是拒絕處理此請求，通常是許可權設定所致
• 404——Not Found，請求的資源（網頁等）不存在
• 500——Internal Server Error——內部伺服器錯誤
• 502——Bad Gateway，充當閘道器或代理的伺服器從遠端伺服器接收到了一個無效的請求
• 504——Gateway Time-out，充當閘道器或代理的伺服器，未及時從遠端伺服器獲取請求

5.瀏覽器解析渲染過程？

（1）瀏覽器解析HTML原始碼，然後建立一個DOM樹。

    在DOM樹中，每一個HTML標籤都有一個對應的節點（元素節點），並且每一個文字也都有一個對應的文字節點，DOM樹的根節點就是documentElement，對應的是html標籤

（2）瀏覽器解析CSS程式碼，然後建立一個CSSOM樹。

    解析CSS的時候會按照如下順序來定義優先順序（遞增）：瀏覽器預設設定<使用者設定<外聯樣式<內聯樣式<標籤樣式

（3）根據DOM樹和CSSOM來構建一個渲染樹（render tree）。

（4）當渲染樹建立完成之後，瀏覽器就可以根據渲染樹直接把頁面繪製到螢幕上。

6.渲染樹（render tree）和DOM樹的關係？

（1）在DOM樹構建的同時，瀏覽器會構建渲染樹。（為了提高使用者體驗，瀏覽器並不會等到所有HTML文件載入完成之後才建立渲染樹並渲染，而是會在從網路層獲取html文件的同時把已經接收到的區域性內容先渲染出來）

（2）DOM樹完全和html標籤一一對應，而渲染樹會忽略（即不包含）不需要渲染的元素（如head，樣式為display:none的元素等）

（3）渲染樹中每一個節點都儲存著對應的CSS屬性

7.reflow（重排，迴流）和repaint（重繪）？

reflow：瀏覽器要花時間去渲染，當它發現了某個部分發生了變化並且影響了佈局，就需要倒回去重新渲染

repaint：如果只是改變了某個元素的背景顏色或文字顏色等，不影響元素周圍或內部佈局，就只會引起瀏覽器的repaint，重畫其中一部分。

reflow比repaint更花費時間，也就更影響效能，所以在寫程式碼時應儘量避免過多的reflow。

8.什麼時候會發生reflow？

（1）頁面初始化的時候

（2）操作DOM的時候（增加或刪除DOM元素）

（3）某些元素的尺寸改了（邊距，填充，邊框，寬高）

（4）CSS的屬性發生變化（隱藏display：none）

（5）內容改變（文字改變或圖片改變而引起的的計算值的寬高改變）

（6）瀏覽器視窗尺寸改變（當resize事件發生時）

9.如何減少reflow/repaint？

（1）不要逐個修改DOM樣式，可以預先定義好css的class，然後修改DOM的className，將多個需要進行相同操作的元素一次修改

（2）不要把DOM結點的屬性值放在一個迴圈裡當成迴圈的變數

（3）當動畫元素使用fixed或absolute的position時（脫離了文件流），那麼在修改他們的CSS時不會發生reflow

（4）不要使用table佈局，因為可能很小的一個改動都會造成整個table的重新佈局

（5）在記憶體中多次操作結點，完成後再新增到文件中去

（6）如果要對一個元素進行復雜的操作，可以先隱藏它（display：none），操作完成後再顯示

（7）對於需要經常取出的引起瀏覽器重排的屬性值，要快取到變數中

10.為什麼要先引入css檔案，再引入js檔案？

（1）js程式碼的下載是阻塞下載，不可以和其他程式碼並行下載和解析；CSS的載入不會阻塞DOM樹的解析（會阻塞其渲染，也會阻塞後面的js執行）

（2）頁面載入時，是按照從上到下，從左到右的順序載入的。如果將js放在前面，會立即執行，阻塞後續的資源下載和執行。如果外部指令碼載入時間過長，會造成網頁長時間失去響應，瀏覽器就會呈現“假死”狀態（阻塞效應）

（2）頁面需要等到head中的js和css載入完成之後才開始繪製，當js放在body最後時，不需要等待，可以避免資源阻塞，同時使靜態頁面迅速顯示

（3）部分js的執行依賴於前面的樣式。

（4）js一般是處理功能，所以不需要提前載入。先給使用者觀感，在給使用者上手體驗。

11.為了避免使用者看到長時間的白屏時間，應儘可能的提高CSS的載入速度，具體方法？

（1）使用CDN（Content Delivery Network，內容分發網路），CDN會根據你的網路狀況，替你挑選最近的一個具有快取內容的節點為你提供資源，減少載入時間

（2）對css進行壓縮

（3）合理的使用快取（設定cache-control，expires以及E-tag）

（4）減少http請求數，將多個css檔案合併，或者乾脆直接寫成內聯樣式（但是內聯樣式的缺點是不能快取）

12.頁面效能優化？

頁面效能為什麼不好？回顧第五個問題：瀏覽器解析渲染過程，其中前三部都非常快，第四步（生成佈局layout）和第五步（繪製paint）合稱為渲染，耗時長。網頁生成的時候至少會渲染一次，使用者訪問的過程中，還會不斷重新渲染。

優化方法如下：

（1）回顧問題11

（2）將樣式表放在頭部，將指令碼放在底部

（3）減少重排（reflow）和重繪（repaint）（回顧問題9）

13.瀏覽器快取機制？

14.HTTP和HTTPS的區別

HTTP（Hyper Text Transfer Protocol，超文字傳輸協議）被用於在web瀏覽器和網站伺服器之間傳遞資訊，HTTP協議以明文的方式傳送內容，不提供任何方式的資料加密，如果攻擊者截取了web瀏覽器和網站伺服器之間的傳輸報文，就可以直接讀懂其中的資訊，因此，HTTP協議不適合傳輸一些敏感資訊，比如：信用卡號，密碼等支付資訊。

HTTPS（Hyper Text Transfer Protocol over Secure Socket Layer，安全套接字超文字傳輸協議），為了資料傳輸的安全，HTTPS在HTTP的基礎上加入了SSL/TLS，依靠證書來驗證伺服器的身份，併為瀏覽器和伺服器之間的通訊加密。其中SSL（Secure Socket Layer，安全套接層），TLS（Transport Layer Securit，傳輸層安全協議），SSL 3.0和TLS 1.0差別很小，在HTTPS通訊中具體使用哪一個還要看客戶端和服務端的支援程度，二者在網路模型中位於哪一層？

區別：

（1）HTTPS協議需要CA申請證書，一般免費證書比較少，所以需要一定費用

（2）HTTP是超文字傳輸協議，資訊室明文傳輸，HTTPS則是具有安全性的SSL加密傳輸協議

（3）HTTP和HTTPS使用的是完全不同的連線方式，使用的埠號也不一樣，前者是80，後者是443

（4）HTTP連線很簡單，是無狀態的；HTTPS協議是由HTTP+SSL協議構建的可進行加密傳輸、身份認證的網路協議，比較安全。

（5）谷歌搜尋引擎演算法中，比起同等HTTP網站，採用HTTPS加密的網站在搜尋結果中排名會更高

15.客戶端使用HTTPS方式與web伺服器通訊的步驟：

（1）客戶使用HTTPS的URL訪問web伺服器，要求與web伺服器建立SSL連線

（2）web伺服器收到客戶端請求後，將網站的證書資訊（證書中包含公鑰）傳送一份給客戶端

（3）客戶端的瀏覽器與web伺服器開始協商SSL連線的安全等級，也就是資訊的加密等級

（4）客戶端的瀏覽器根據雙方同意的安全等級，建立會話祕鑰，然後利用網站的公鑰將會話祕鑰加密，並傳送給網站

（5）web伺服器利用自己的私鑰解密出會話祕鑰

（6）web伺服器利用會話祕鑰加密與客戶端之間的通訊

16.如何從HTTP切換到HTTPS？

（1）需要將頁面中所有的連結（例如js,css,圖片等連結）都由http改為https

（2）一般情況下會建議保留HTTP，所以在切換的時候可以做HTTP和HTTPS的相容，具體實現方式是：去掉頁面連線中的http頭部，這樣惡意自動匹配HTTP頭和HTTPS頭

17.TCP/IP四層協議體系結構？

由上至下順序為：

（1）應用層（FTP、Telnet、SMTP、RIP、NFS、DNS）

（2）運輸層（TCP、UDP）

（3）網際層（IP、ICMP、ARP、RARP）

（4）網路介面層

18.五層協議體系結構？

（1）應用層

（2）運輸層

（3）網路層

（4）資料鏈路層

（5）物理層

19.OSI的七層體系結構？

（1）應用層

（2）表示層

（3）會話層

（4）運輸層

（5）網路層

（6）資料鏈路層

（7）物理層

20.瀏覽器同源策略

（1）瀏覽器安全的基石是“同源策略”（same-origin policy）。所謂“同源”指的是“三個相同”：

• 協議相同
• 域名相同
• 埠相同

（2）同源策略的目的是為了保證使用者資訊的安全，防止惡意的網站竊取資料。不同源的客戶端指令碼在沒有明確授權的情況下，不能讀寫對方的資源。

（3）如果非同源，共有三種行為受到限制：

• Cookie、LocalStorage和IndexDB無法讀取
• DOM無法獲得
• AJAX請求不能傳送

（3）不受同源策略限制的：

• 頁面中的連結，重定向以及表單提交
• 跨域資源的引入是可以的，但是js不能讀寫載入的內容。（如<script src=...></script>，<img>，<link>，<iframe>）

21.跨域？

（1）受同源策略的限制，不是同源的指令碼不能操作其他源下面的物件。想要操作另一個源下的物件，就需要跨域。

（2）跨域的實現方式

• 降域 document.domain
• 設定視窗片段識別符號，監聽讀取location.hash
• window.name
• HTML5的postMessage方法
• LocalStorage
• JSONP
• WebSocket
• CORS

22.重申了12的問題並擴充套件：前端優化方案？移動端優化方案？（面試常考，同時還會針對其中某些方案深入）

（1）前端優化方案（可以查一下雅虎軍規）：

減少請求數量：合併指令碼和樣式表，CSS Sprites，劃分主域

降低請求頻寬：使用GZip，精簡JavaScript，移除重複指令碼，影象優化，儘可能減少DOM節點數

快取利用：使用CDN，使用外部的JavaScript和CSS，減少DNS查詢，新增Expires頭，配置ETag，使Ajax可快取

頁面結構：將樣式表放在頭部，將指令碼放在底部，儘早重新整理文件的輸出

程式碼校驗：避免CSS表示式，避免重定向

（2）移動端優化方案：

在上述的前端優化方案的基礎上，可以做以下優化：保持單個內容小於25KB，打包元件成符合文件

23.關於22題的一些關鍵詞說明

CSS Sprites：在國內又稱為CSS精靈，是一種網頁圖片應用處理方式。目前對不高於200KB單張圖片的所需載入時間基本差不多。CSS Sprites的原理其實就是把網頁中的一些背景圖片整合到一張圖片檔案中，再利用CSS的“background-image”，“background-repeat”，“background-position”的組合進行背景定位，來顯示需要顯示的部分。這樣可以很好地減少網頁的http請求，缺點是需要合理的合併圖片，維護比較麻煩。

劃分主域：（待補充）

GZip：其思想就是把檔案現在伺服器端進行壓縮，其壓縮率可達85%，然後再傳輸，傳輸完畢後瀏覽器會重新對壓縮過的內容進行解壓，並執行。其好處在於GZip的支援度很高，爬蟲可識別，但缺點是對pdf檔案的壓縮效果不大，會浪費CPU。

圖片優化：CSS Sprites（小圖片合併雪碧圖），使用小且可快取的favicon.ico

CDN：內容分發網路（Content Delivery Network）。將網站的內容釋出到最接近使用者的cache伺服器內，通過DNS負載均衡的技術，判斷使用者來源就近訪問cache伺服器去的所需的內容。將靜態內容分佈到CDN可以較少使用者響應時間20%或更多。

Ajax可快取：（待補充）

24.