那麼各位問題來了，真正輪到你去面試的時候
你能否很好的回到這些問題呢？
使用者輸入url回車之後，瀏覽器到底做了啥？
頁面渲染的完整流程是怎樣的？
前端效能優化有哪些經驗？
如果不能，那我們往下走：
（有人會疑惑說不是講前端嗎？為毛要講tcp、dns這些與前端無關的知識?別慌咯，跟著文章走吧，多學無害！）
tcpudp
套接字socket
http協議
dns解析
http請求發起和響應
頁面渲染的過程
頁面的效能優化
tcp連線
tcp：transmission control protocol， 傳輸控制協議，是一種面向連線的、可靠的、基於位元組流的傳輸層通訊協議。
說的這麼專業，有啥用呢？
先來舉個栗子吧
還記得小時候我們做的紙杯**麼？兩個紙杯用一條繩子連到一起，兩個各拿乙個紙杯把線拉直，乙個對著紙杯講，乙個用耳朵對著紙杯聽。
這其實就是一種最簡單的連線通訊，兩人通過一根線連線起來，聲音從這邊的紙杯發出通過線傳輸到另乙個紙杯接收，擴充套件到現在家家戶戶都有的固定**也是如此，它的通訊也是建立在雙方可接受並且信任的基礎上進行，如：
客戶端傳送syn包(syn=j)到伺服器，並進入syn_send狀態，等待伺服器確認。
伺服器收到syn包，必須確認客戶的syn（ack=j+1），同時自己也傳送乙個syn包（syn=k），即syn+ack包，此時伺服器進入syn_recv狀態。
客戶端收到伺服器的syn＋ack包，向伺服器傳送確認包ack(ack=k+1)，此包傳送完畢，客戶端和伺服器進入established狀態，完成三次握手。
syn:synchronous 建立聯機
ack:acknowledgement 確認
syn_sent:請求連線
syn_recv:服務端被動開啟後,接收到了客戶端的syn並且傳送了ack時的狀態。再進一步接收到客戶端的ack就進入established狀態。
值得注意的是：tcp在握手過程中並不攜帶資料，(就像你打**給酒店訂房時，在確認對方是酒店客服人員之前，你也不會馬上把身份證號碼報給他吧？)，而是在三次握手完成之後，才會進行資料傳送。
udp協議
(udp協議並非本文需要重點著筆的內容，但是講到tcp了，作為他的互補兄弟，在此掠過一筆)
udp ：user datagram protocol 使用者資料報協議
相比於tcp的面向連線需要反覆確認的繁瑣步驟，udp是一中性格特立獨行並且主觀性超強的非面向連線的協議，使用udp協議經常通訊並不需要建立連線，它只是負責把資料盡可能快的傳送出去，簡單粗暴，並且不可靠，而在接收端，udp把每個訊息斷放入佇列中，接收端程式從佇列中讀取資料。
套接字socket
為什麼要說巢狀字？
那是因為就像前面說的，tcp或udp都是一種協議，也就是計算機網路通訊中在傳輸層的一種協議，簡單地說，就是一種約定，就像合作雙方的合同一樣，然後合同是死的，只有履行合同才是實質性的行動，因此無論是tcp還是udp要產生作用，都需要有實際的行為去執行才能體現協議的作用，
那麼，有什麼辦法讓這些協議作用呢？
這就要說到socket了。
socket：也叫巢狀字 ，是一組實現tcp/udp通訊的介面api，也就是說無論tcp還是udp，通過對scoket的程式設計，都可以實現tcp/ucp通訊，作為乙個通訊鏈的控制代碼，它包含網路通訊必備的5種資訊：
連線使用的協議
本地主機的ip位址
本地程序的協議埠
遠地主機的ip位址
遠地程序的協議埠
可見，socket包含了通訊本方和對方的ip和埠以及連線使用的協議（tcp/udp）。通訊雙方中的一方（暫稱：客戶端）通過scoket（巢狀字）對另一方（暫稱：服務端）發起連線請求，服務端在網路上監聽請求，當收到客戶端發來的請求之後，根據socket裡攜帶的資訊，定位到客戶端，就相應請求，把socket描述發給客戶端，雙方確認之後連線就建立了。
因此套接字之間的連線過程有三個步驟：
socket在即時通訊（qq等各種聊天軟體）等應用上應用廣泛。
http協議
http協議：hypertext transfer protocol 也叫超文字傳送協議 ，它是一種基於tcp/ip協議棧、在表示層和應用層上的協議（tcp在傳輸層的協議），通俗一點說就是：
tcp/ip是位於傳輸層上的一種協議，用於在網路中傳輸資料；
http協議是應用層協議，基於tcp協議，用於包裝資料，程式使用它進行通訊，可以簡單高效的處理通訊中資料的傳輸和識別處理
而在現在應用非常廣泛的http連線則是建立在http協議上的、處於應用層中的一種具體應用。
上面說到socket連線一旦建立就保持連線狀態，而http連線則不一樣，它基於tcp協議的短連線，也就是客戶端發起請求，伺服器響應請求之後，連線就會自動斷開，不會一直保持。
url前面講了tcp、udp、http…等等都是為了講乙個具體問題而做的知識點鋪墊，那就是：我們開發的web應用中請求的發起和響應，是乙個怎樣的底層原理。
我們都知道，web應用絕大部分都是通過http來進行請求的，而url則是http用來做連線建立和傳輸資料的一種具體實現，因此在此要簡單講一下url。
url：uniform resource locator 統一資源定位符。說白了就是網路上用來標識具體資源的乙個位址，包含了使用者查詢該資源的資訊，http使用它來傳輸資料和建立連線
乙個url有以下組成部分：
因此，當使用者在瀏覽器輸入回車時，它經歷了以下步驟：
使用者輸入url，瀏覽器獲取到url
瀏覽器(應用層)進行dns解析（如果輸入的是ip位址，此步驟省略）
根據解析出的ip位址+埠，瀏覽器（應用層）發起http請求，請求中攜帶（請求頭header（也可細分為請求行和請求頭）、請求體body），
header包含：
請求的方法（get、post、put…）
協議（http、https、ftp、sftp…）
目標url（具體的請求路徑已**件名）
一些必要資訊（快取、cookie之類）
body包含：
請求的內容
請求到達傳輸層，tcp協議為傳輸報文提供可靠的位元組流傳輸服務，它通過三次握手等手段來保證傳輸過程中的安全可靠。通過對大塊資料的分割成乙個個報文段的方式提供給大量資料的便攜傳輸。
到網路層， 網路層通過arp定址得到接收方的mac位址，ip協議把在傳輸層被分割成乙個個資料報傳送接收方。
資料到達資料鏈路層，請求階段完成
接收方在資料鏈路層收到資料報之後，層層傳遞到應用層，接收方應用程式就獲得到請求報文。
接收方收到傳送方的http請求之後，進行請求檔案資源（如html頁面）的尋找並響應報文
傳送方收到響應報文後，如果報文中的狀態碼表示請求成功，則接受返回的資源（如html檔案），進行頁面渲染。
頁面的渲染
當乙個請求的發起和響應都完成之後，瀏覽器就會收到響應內容，但瀏覽器收到的是一串串的**或url鏈結，怎麼把這些**轉化成使用者可以看得懂的介面呈現出來，就是瀏覽器的工作了。
目前市場上的瀏覽器已經不下百種，各個瀏覽器根據核心又可以分成幾大類，每一類瀏覽器對頁面的渲染原理和過程有所差異。
但總的來說，各個瀏覽器渲染頁面都基本遵循如下圖的流程：
圖中有幾處英文詞彙可能不好理解，沒關係，先做一下解釋：
瀏覽器通過htmlparser根據深度遍歷的原則把html解析成dom tree。
將css解析成css rule tree（cssom tree）。
根據dom樹和cssom樹來構造render tree。
layout：根據得到的render tree來計算所有節點在螢幕的位置。
paint：遍歷render樹，並呼叫硬體圖形api來繪製每個節點。
前端效能優化
對於頁面渲染基本上這樣就是乙個的流程，看完之後，有沒有什麼感覺在實際編碼中可以優化的點呢？沒有吧？因為很多細節都沒有講述，因此為了找到可優化的點，在此對頁面渲染過程的幾個關鍵步驟做一下陳述：
html解析：
上面講到，html解析是瀏覽器的html解析器把html解析成dom tree，而在解析過程，瀏覽器根據html檔案的結構從上到下解析html，html元素是以深度優先的方式解析，而script、link、style等標籤會使解析過程產生阻塞，阻塞的情況有：
外部樣式會阻塞內部指令碼的執行。
外部樣式與外部指令碼並行載入，但外部樣式會阻塞外部指令碼執行。
如果外部指令碼帶有async屬性，則外部指令碼的載入與執行不受外部樣式影響
如果link標籤是動態建立（js生成），不管有無async屬性，都不會阻塞外部指令碼的載入與執行。
2. css解析:
css parser作用就是將很多個css檔案中的樣式合併解析出具有樹形結構style rules，在對樣式解析的過程中，預設css選擇器是從右往左進行解析的。至於為什麼是從右到左，而不是從左到右、也是不會從左到左…
下面舉個栗子來說一下：
假如現在有這樣的乙個樣式:
1#parent .ch1 .dh1 {}
2.fh1 .ch1 .dh1{}
3.ah1 .ch1 .eh1 {}
4#parent .fh1 {}
5.ch1 .dh1{}
我們來比較從左到右和從右到左兩種方式的結果：
從兩個圖的比較就可以看幾點：
右邊的tree複雜度要比左邊的低
右邊的tree公用樣式重合度比左邊的低
右邊的tree從根開始的節點數要比左邊的少
可能光看這幾點沒看出什麼問題，但你要知道：瀏覽器中的css解析器負責css的解析，並為每個節點計算出樣式，因此雖然css解析器要做的事情不多，但要每個節點都要進行遍歷查詢計算，計算量極大，因此解析的方式是決定其效能的關鍵點。
就如1#parant .a{}
2和3.a{}
估計絕大多數人都會認為前者要比後者效能更優，其實不然，在解析過程中
#paran .a{}意味著css解析器要先找到#parent再找到他下面的.a所在節點
而後者可以直接定位到.a{}因此哪一種方式更優，顯而易見。
指令碼執行:
瀏覽器解析html時，當遇到
前端面試（一）
1.對web標準的理解？結構 html 表現 css 行為 js dom es 2.cookie和session的區別。1 cookie資料存放在客戶的瀏覽器上，session資料放在伺服器上。2 cookie不安全，別人可以分析存放在本地的cookie並進行cookie欺騙 3 session會在...
前端面試 一
1 vue相對於原生js的優勢在 認知現代js框架存在的根本原因是保持ui與狀態同步 核心思想 資料驅動 dom 核心功能 資料雙向繫結 元件 component 核心概念 非同步更新佇列 el el用於指定乙個頁面中已存在的dom元素來掛載vue例項。beforedestroy生命週期 例項銷毀之...
Web前端面試常用技巧
有技巧面試可以幫助大家更好的準備面試，提高面試成功率，走向高薪。找工作的第乙個重要問題就是寫簡歷了，簡歷就是乙個人的門面。簡歷寫的不好，用人方也沒有多大興趣再深入了解你，畢竟行業人太多了。所以簡歷應該是經常去更新的，隔幾個月去更新一次簡歷，了解自己這幾個月以來的成長在 結果是什麼。當我們準備投遞簡歷...