前端面試題及答案，網絡和優化和移動端兼容

1.1、講講輸入完網址按下回車，到看到網頁這個過程當中發生了什麼

a. 域名解析

b. 發起TCP的3次握手

c. 創建TCP鏈接後發起http請求

d. 服務器端響應http請求，瀏覽器獲得html代碼

e. 瀏覽器解析html代碼，並請求html代碼中的資源

f. 瀏覽器對頁面進行渲染呈現給用戶

參考《輸入URL到展示頁面的全過程》

 

1.2、談談你對前端性能優化的理解

a. 請求優化：

合併JS和CSS，減小DNS查找次數，避免重定向，使用GET完成AJAX請求，減少請求中的Cookie，緩存資源，使用CDN，開啓GZip，壓縮HTML頁面，開啓長鏈接，避免行內腳本阻塞並行下載，少用iframe（阻塞onload事件，影響並行下載）。

b. CSS優化：

樣式表置於頁面頂部，避免使用CSS表達式，使用外部JS和CSS，壓縮JS和CSS，避免濾鏡。

c. JavaScript優化：

腳本置於頁面底部，減小DOM訪問，減小重繪和重排，儘可能使用局部變量，使用定時器分割大型任務，用合適的正則操做字符串，惰性模式減小分支，事件委託，第三方代碼異步加載，節流與去抖動，使用localStorage替代cookie。

d. 圖片優化：

內聯圖使用Data:URL，壓縮圖片或使用WebP格式，固定圖片尺寸，圖片預加載，圖片延遲加載，使用字體矢量圖標，Sprites圖片。

 

1.3、請說出三種減小頁面加載時間的方法

a. 儘可能減小頁面中重複的HTTP請求數量

b. 服務器開啓gzip壓縮

c. css樣式的定義放置在文件頭部

d. Javascript腳本放在文件末尾

e. 壓縮合並Javascript、CSS代碼

f. 使用多域名負載網頁內的多個文件、圖片

 

 

1.4、請介紹下cache-control

每一個資源均可以經過 Cache-Control HTTP 頭來定義本身的緩存策略

Cache-Control 指令控制誰在什麼條件下能夠緩存響應以及能夠緩存多久

Cache-Control 頭在 HTTP/1.1 規範中定義，取代了以前用來定義響應緩存策略的頭（例如 Expires）。

 

1.5、一次js請求通常狀況下有哪些地方會有緩存處理？

a. 瀏覽器端存儲

b. 瀏覽器端文件緩存

c. HTTP緩存304

d. 服務器端文件類型緩存

e. 表現層&DOM緩存

 

 

1.6、一個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗。

a. 圖片懶加載，滾動到相應位置才加載圖片。

b. 圖片預加載，若是爲幻燈片、相冊等，將當前展現圖片的前一張和後一張優先下載。

c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技術，若是圖片爲css圖片的話。

d. 若是圖片過大，可使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提升用戶體驗。

 

1.7、談談之前端角度出發作好SEO須要考慮什麼？

a. 瞭解搜索引擎如何抓取網頁和如何索引網頁

b. meta標籤優化

c. 關鍵詞分析

d. 付費給搜索引擎

e. 連接交換和連接普遍度（Link Popularity）

f. 合理的標籤使用

 

1.8、HTTP2.0有哪些提高？

a. HTTP 2.0中的二進制分幀層突破了限制：客戶端和服務器能夠把HTTP消息分解爲互不依賴的幀，而後亂序發送，最後再在另外一端把它們從新組合起來。

b. 把HTTP消息分解爲不少獨立的幀以後，就能夠經過優化這些幀的交錯和傳輸順序，進一步提高性能。

c. HTTP 2.0經過讓全部數據流共用同一個鏈接，能夠更有效地使用TCP鏈接。

d. 服務器除了對最初請求的響應外，服務器還能夠額外向客戶端推送資源，而無需客戶端明確地請求。

e. HTTP 2.0會壓縮首部元數據，針對以前的數據只編碼發送差別數據。

 

1.9、TCP與UDP的區別

a. UDP 協議的頭長度不到TCP頭的一半，因此一樣大小的包裏UDP攜帶的淨數據比TCP包多。

b. TCP會發響應，UDP不會。而且UDP沒有Seq和Ack等概念，省去了創建鏈接的開銷，DNS解析就使用UDP協議。TCP有3次握手4次揮手。

c. UDP不能分割報文段（MSS），超過MTU的時候，發送方的網絡層負責分片，接收方收到分片後再組裝起來，這個過程會消耗資源，下降性能。

d. UDP沒有重傳機制，丟包的時候就不能按需發送。TCP有超時重傳、快速重傳和SACK。

 

1.10、URI和URL

URI（Uniform Resource Identifier）：統一資源標識符。

URL（Uniform Resoure Locator）：統一資源定位符，通俗的說法是網址。

URI表示某一互聯網資源，而URL表示資源地點，因此URL是URI的子集。

 1.11、移動端click延遲300ms和事件穿透

解決300MS延遲

    方案1：FastClick.js

   方案2：用JQ的tap事件

解決事件穿透

方案1：點擊消失元素，添加超過300MS的動畫

方案2：動態地在觸摸位置生成一個透明的元素，這樣當上層元素消失而延遲的click來到時，它點擊到的是那個透明的元素，也不會「穿透」到底下。在必定的timeout後再將生成的透明元素移除。

方案3：點擊觸發事件的時候pointer-events變成none,過400毫毛pointer-events變成auto

方案4：fastclick 取消 click 事件，用 touchend 模擬快速點擊行爲