前端面試題集錦（一）

移動端的300ms延時：

300ms延時的主要緣由是雙擊縮放，即手指在屏幕上迅速點兩下，iOS自帶的瀏覽器會將網頁縮放至原始比例。因此假如當用戶點擊一個連接時，瀏覽器不能當即肯定用戶是否要打開這個連接仍是執行雙擊屏幕操做，因此iOS就等待300ms，以等待用戶是否再次點擊屏幕，並且如今幾乎全部的移動端都有這個功能。

解決方案：

添加viewpoint meta標籤

<meta name="viewport" content="width=device-width,initial-scale=1,minium-scale=1,maximum-scale=1,user-scalable=no /">

前端性能優化：

①減小HTTP請求次數：

根據須要儘量的去合併靜態資源圖片，JavaScript代碼和css文件，減小頁面請求次數，這樣能夠縮短頁面首次訪問的等待時間，除此以外也要儘可能避免重複資源，防止增長多餘的請求。

②減小HTTP請求大小：

對文件進行壓縮優化，開啓GZIP壓縮傳輸內容，縮短網絡傳輸等待延遲等等。

③將css和js放到外部文件中，使用<link hrref="">和<script src="">,在外部進行引入

④爲HTML指定Cache-Control或者Expires，能夠將HTML內容緩存起來，避免頻繁向服務器發送請求，緩存以後瀏覽器會直接從緩存讀取內容，不向服務器發送請求。

<meta http-equiv="Cache_control" content="max-age=7200">

<meta http-equiv="expires" content="Wed ,20 July 2018 10:29:00 GMT">

⑤減小頁面的重定向

⑥靜態資源不一樣域名存放：

瀏覽器在同一時刻向同一個域名請求文件的並行下載數是有限的，所以能夠有多個域名的主機來存放不一樣的靜態資源，增大頁面加載時資源的並行下載數。

⑦使用可緩存的Ajax ， 合理使用ajax能加快ajax響應速度並減小服務器壓力

$.ajax({

　　url:url,

　　dataType:'json',

　　cache:true,

　　success:function(data){

　　}

})

⑧合理使用get請求

POST請求會首先發送文件頭，而後發送HTTP正文的數據。而使用get只發送頭部，作一在獲取數據時使用get請求效率要高

⑨減小cookie的大小並進行cookie隔離

由於HTTP請求默認會帶上瀏覽器端的cookie一塊兒發送給服務器端，因此在沒必要要的狀況下要儘可能減小Cookie。

對於靜態的資源，儘可能使用不一樣的域名存放，由於Cookie默認是不能跨域的，這樣就會作到不一樣域名下靜態資源請求的Cookie隔離。

頁面渲染類的前端優化

①css文件放在頁面的頭部，JavaScript文件放在頁面的底部

②減小DOM元素數量和深度

儘可能避免使用table,iframe等慢元素，table的DOM渲染是所有生成完並一次性繪製到頁面上，因此長表格渲染是很耗性能，能夠考慮用ul代替。

儘可能使用異步的方式動態加載iframe，由於iframe內資源的下載進程會阻塞父頁面靜態資源的下載以及HTML中DOM的解析。

頁面重定向的幾種方法：

JS實現頁面重定向：

window.location.href=c

window.history.back(-1)  //後退一步並刷新

window.navigate("http:www.baidu.com")

self.location="http:www.baidu.com"