1. 程式人生 > >前端面試題集錦(一)

前端面試題集錦(一)

ajax 生成 -s 需要 資源 元素 device 比例 代碼

移動端的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"

前端面試題集錦(一)