2018年前端面試總結

阿新 • • 發佈：2018-12-07

dset ner urn content 狀態碼大量加載解構賦值 t對象

2018年前端面試總結

再有兩個月，2018就快過完了，因而有必要在年末對2018年的前端學習做一個總結，本文主要從前端面試中的一些基礎知識來對前端進行相關的總結。本文根據網絡面試題進行總結。

基礎知識

本部分主要從以下幾個方面來回顧前端相關的基礎知識：

HTML相關
CSS相關
JAVASCRIPT相關
DOM相關
HTTP相關
webpack相關

Html

html

根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。在選擇標簽時請遵循以下原則： 1.盡可能少的使用無語義的標簽div和span； 2.在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認情況下有上下間距，對兼容特殊終端有利； 3.不要使用純樣式標簽，如：b、font、u等，改用css設置。 4.需要強調的文本，可以包含在strong或者em標簽中（瀏覽器預設樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）； 5.使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區分開，表頭用th，單元格用td； 6.表單域要用fieldset標簽包起來，並用legend標簽說明表單的用途； 7.每個input標簽對應的說明文本都需要使用label標簽，並且通過為input設置id屬性，在lable標簽中設置for=someld來讓說明文本和相對應的input關聯起來。

2 meta viewport

<!DOCTYPE html>  H5標準聲明，使用 HTML5 doctype，不區分大小寫
<head lang=”en”> 標準的 lang 屬性寫法
<meta charset=’utf-8′>    聲明文檔使用的字符編碼
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>   優先使用 IE 最新版本和 Chrome
<meta name=”description” content=”不超過150個字符”/>       頁面描述
<meta name=”keywords” content=””/>      頁面關鍵詞
<meta name=”author” content=”name, [email protected]”/>    網頁作者
<meta name=”robots” content=”index,follow”/>      搜索引擎抓取
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 為移動設備添加 viewport
<meta name=”apple-mobile-web-app-title” content=”標題”> iOS 設備 begin
<meta name=”apple-mobile-web-app-capable” content=”yes”/>  添加到主屏後的標題（iOS 6 新增）
是否啟用 WebApp 全屏模式，刪除蘋果默認的工具欄和菜單欄
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>
添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari）
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<meta name=”format-detection” content=”telphone=no, email=no”/>  設置蘋果工具欄顏色
<meta name=”renderer” content=”webkit”>  啟用360瀏覽器的極速模式(webkit)
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>     避免IE使用兼容模式
<meta http-equiv=”Cache-Control” content=”no-siteapp” />    不讓百度轉碼
<meta name=”HandheldFriendly” content=”true”>     針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓
<meta name=”MobileOptimized” content=”320″>   微軟的老式瀏覽器
<meta name=”screen-orientation” content=”portrait”>   uc強制豎屏
<meta name=”x5-orientation” content=”portrait”>    QQ強制豎屏
<meta name=”full-screen” content=”yes”>              UC強制全屏
<meta name=”x5-fullscreen” content=”true”>       QQ強制全屏
<meta name=”browsermode” content=”application”>   UC應用模式
<meta name=”x5-page-mode” content=”app”>    QQ應用模式
<meta name=”msapplication-tap-highlight” content=”no”>    windows phone 點擊無高光
設置頁面不緩存
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>

復制代碼

3 canvas

常用api: 1.fillRect(x,y,width,height)實心矩形 2.strokeRect(x,y,width,height)空心矩形 3.fillText("Hello world",200,200);實心文字 4.strokeText("Hello world",200,300)空心文字

CSS

1.盒模型

①ie盒模型算上border、padding及自身（不算margin），標準的只算上自身窗體的大小 css設置方法如下：

/* 標準模型 */
box-sizing:content-box;
 /*IE模型*/
box-sizing:border-box;
復制代碼

②幾種獲得寬高的方式：

dom.style.width/height ??這種方式只能取到dom元素內聯樣式所設置的寬高，也就是說如果該節點的樣式是在style標簽中或外聯的CSS文件中設置的話，通過這種方法是獲取不到dom的寬高的。 ?? dom.currentStyle.width/height ??這種方式獲取的是在頁面渲染完成後的結果，就是說不管是哪種方式設置的樣式，都能獲取到。但這種方式只有IE瀏覽器支持。 ??window.getComputedStyle(dom).width/height ??這種方式的原理和2是一樣的，這個可以兼容更多的瀏覽器，通用性好一些。 ?? dom.getBoundingClientRect().width/height??這種方式是根據元素在視窗中的絕對位置來獲取寬高的。 ??dom.offsetWidth/offsetHeight ??這個就沒什麽好說的了，最常用的，也是兼容最好的。

2，css reset 和 normalize.css 有什麽區別

兩者都是通過重置樣式，保持瀏覽器樣式的一致性；
前者幾乎為所有標簽添加了樣式，後者保持了許多瀏覽器樣式，保持盡可能的一致；
後者修復了常見的桌面端和移動端瀏覽器的bug：包含了HTML5元素的顯示設置、預格式化文字的font-size問題、在IE9中SVG的溢出、許多出現在各瀏覽器和操作系統中的與表單相關的bug。
前者中含有大段的繼承鏈；
後者模塊化，文檔較前者來說豐富；

####3，清除浮動不清楚浮動會發生高度塌陷：浮動元素父元素高度自適應（父元素不寫高度時，子元素寫了浮動後，父元素會發生高度塌陷）

clear清除浮動（添加空div法）在浮動元素下方添加空div,並給該元素寫css樣式：{clear:both;height:0;overflow:hidden;}
給浮動元素父級設置高度；
父級同時浮動（需要給父級同級元素添加浮動）；
父級設置成inline-block，其margin: 0 auto居中方式失效；
利用br標簽的clear屬性；
給父級添加overflow:hidden 清除浮動方法；
萬能清除法 after偽類清浮動（現在主流方法，推薦使用）；

.float_div:after{
    content:".";
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
}
.float_div{
    zoom:1
}

復制代碼

4，畫三角形

#item {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid transparent;
    border-bottom: 50px solid blue;
    background: white;
}
復制代碼

JavaScript

1，什麽是立即執行函數？使用立即執行函數的目的是什麽？

常見兩種方式
1.(function(){...})()
  (function(x){
      console.log(x);
  })(12345)
2.(function(){...}())
  (function(x){
      console.log(x);
  }(12345))
作用 不破壞汙染全局的命名空間，若需要使用，將其用變量傳入如
（function(window){...}(window)）

復制代碼

2，async/await

ES7 提出的async 函數，終於讓 JavaScript 對於異步操作有了終極解決方案。No more callback hell。 async 函數是 Generator 函數的語法糖。使用關鍵字 async 來表示，在函數內部使用 await 來表示異步。想較於 Generator，Async 函數的改進在於下面四點：

內置執行器。Generator 函數的執行必須依靠執行器，而 Aysnc 函數自帶執行器，調用方式跟普通函數的調用一樣；
更好的語義。async 和 await 相較於 * 和 yield 更加語義化；
更廣的適用性。co 模塊約定，yield 命令後面只能是 Thunk 函數或 Promise對象。而 async 函數的 await命令後面則可以是 Promise 或者原始類型的值（Number，string，boolean，但這時等同於同步操作）；
返回值是 Promise。async 函數返回值是 Promise 對象，比 Generator 函數返回的 Iterator對象方便，可以直接使用 then() 方法進行調用。

下面是使用示例：

作用：異步代碼的新方式
promise示例
const makeRequest = () => {
  return getJSON()
    .then(data => {
      if (data.needsAnotherRequest) {
        return makeAnotherRequest(data)
          .then(moreData => {
            console.log(moreData)
            return moreData
          })
      } else {
        console.log(data)
        return data
      }
    })
}
async/await示例
const makeRequest = async () => {
  const data = await getJSON()
  if (data.needsAnotherRequest) {
    const moreData = await makeAnotherRequest(data);
    console.log(moreData)
    return moreData
  } else {
    console.log(data)
    return data    
  }
}

復制代碼

HTTP

常見狀態碼

2開頭（請求成功）表示成功處理了請求的狀態代碼

200 （成功）服務器已成功處理了請求。通常，這表示服務器提供了請求的網頁。
201 （已創建）請求成功並且服務器創建了新的資源。
202 （已接受）服務器已接受請求，但尚未處理。
203 （非授權信息）服務器已成功處理了請求，但返回的信息可能來自另一來源。
204 （無內容）服務器成功處理了請求，但沒有返回任何內容。
205 （重置內容）服務器成功處理了請求，但沒有返回任何內容。
206 （部分內容）服務器成功處理了部分 GET 請求。

3開頭（請求被重定向）表示要完成請求，需要進一步操作。通常，這些狀態代碼用來重定向。

300 （多種選擇）針對請求，服務器可執行多種操作。服務器可根據請求者 (user agent)選擇一項操作，或提供操作列表供請求者選擇。
301 （永久移動）請求的網頁已永久移動到新位置。服務器返回此響應（對 GET 或 HEAD請求的響應）時，會自動將請求者轉到新位置。
302 （臨時移動）服務器目前從不同位置的網頁響應請求，但請求者應繼續使用原有位置來進行以後的請求。
303 （查看其他位置）請求者應當對不同的位置使用單獨的 GET 請求來檢索響應時，服務器返回此代碼。
304 （未修改）自從上次請求後，請求的網頁未修改過。服務器返回此響應時，不會返回網頁內容。
305 （使用代理）請求者只能使用代理訪問請求的網頁。如果服務器返回此響應，還表示請求者應使用代理。
307 （臨時重定向）服務器目前從不同位置的網頁響應請求，但請求者應繼續使用原有位置來進行以後的請求。

4開頭（請求錯誤）這些狀態代碼表示請求可能出錯，妨礙了服務器的處理。

400 （錯誤請求）服務器不理解請求的語法。
401 （未授權）請求要求身份驗證。對於需要登錄的網頁，服務器可能返回此響應。
403 （禁止）服務器拒絕請求。
404 （未找到）服務器找不到請求的網頁。
405 （方法禁用）禁用請求中指定的方法。
406 （不接受）無法使用請求的內容特性響應請求的網頁。
407 （需要代理授權）此狀態代碼與 401（未授權）類似，但指定請求者應當授權使用代理。
408 （請求超時）服務器等候請求時發生超時。
409 （沖突）服務器在完成請求時發生沖突。服務器必須在響應中包含有關沖突的信息。
410 （已刪除）如果請求的資源已永久刪除，服務器就會返回此響應。
411 （需要有效長度）服務器不接受不含有效內容長度標頭字段的請求。
412 （未滿足前提條件）服務器未滿足請求者在請求中設置的其中一個前提條件。
413 （請求實體過大）服務器無法處理請求，因為請求實體過大，超出服務器的處理能力。
414 （請求的 URI 過長）請求的 URI（通常為網址）過長，服務器無法處理。
415 （不支持的媒體類型）請求的格式不受請求頁面的支持。
416 （請求範圍不符合要求）如果頁面無法提供請求的範圍，則服務器會返回此狀態代碼。
417 （未滿足期望值）服務器未滿足"期望"請求標頭字段的要求。

5開頭（服務器錯誤）這些狀態代碼表示服務器在嘗試處理請求時發生內部錯誤。這些錯誤可能是服務器本身的錯誤，而不是請求出錯。

500 （服務器內部錯誤）服務器遇到錯誤，無法完成請求。
501 （尚未實施）服務器不具備完成請求的功能。例如，服務器無法識別請求方法時可能會返回此代碼。
502 （錯誤網關）服務器作為網關或代理，從上遊服務器收到無效響應。
503 （服務不可用）服務器目前無法使用（由於超載或停機維護）。通常，這只是暫時狀態。
504 （網關超時）服務器作為網關或代理，但是沒有及時從上遊服務器收到請求。
505 （HTTP 版本不受支持）服務器不支持請求中所用的 HTTP 協議版本。

GET 與POST區別

請求行，請求頭，請求體詳解

其中，1,2,3表示請求行，4請求體，5請求體。

webpack

打包體積

為了減小包的打包體積，可以從以下幾個方面進行優化：

提取第三方庫或通過引用外部文件的方式引入第三方庫
代碼壓縮插件UglifyJsPlugin
服務器啟用gzip壓縮
按需加載資源文件 require.ensure
優化devtool中的source-map
剝離css文件，單獨打包
去除不必要插件，通常就是開發環境與生產環境用同一套配置文件導致

打包效率

開發環境采用增量構建，啟用熱更新
開發環境不做無意義的工作如提取css計算文件hash等
配置devtool
選擇合適的loader，個別loader開啟cache 如babel-loader
第三方庫采用引入方式
提取公共代碼
優化構建時的搜索路徑指明需要構建目錄及不需要構建目錄
模塊化引入需要的部分

Loader

loader就是一個node模塊，它輸出了一個函數。當某種資源需要用這個loader轉換時，這個函數會被調用。並且，這個函數可以通過提供給它的this上下文訪問Loader API。

module.exports = function(src) {
  //src是原文件內容（abcde），下面對內容進行處理，這裏是反轉
  var result = src.split(‘‘).reverse().join(‘‘); 
  //返回JavaScript源碼，必須是String或者Buffer
  return `module.exports = ‘${result}‘`;
}
使用
{
    test: /\.txt$/,
    use: [
        {
            ‘./path/reverse-txt-loader‘
        }
    ]
},

復制代碼

除此之外，前端的東西還有很多，大家可以參考前端的知識庫來復習。

常見面試題

1.怎樣添加、移除、移動、復制、創建和查找節點？

①創建新節點

createDocumentFragment  //創建新DOM片段
createElement //創建一個元素
createTextNode //創建一個文本節點
復制代碼

②添加移除替換插入

appendChild() //添加
removeChild //移除
replaceChild //替換
insertBofore //插入
復制代碼

③查找

getElementsByTagName() //通過標簽名查找
getElementsByName() //通過元素的name屬性查找
getElementById() //通過元素的id查找
復制代碼

2.如何理解閉包

定義和用法：一個父函數裏面包含了一個子函數，子函數調用了父函數內部的變量，如果子函數在外部被調用，就產生了閉包。簡單的說，閉包就是能夠讀取其他函數內部變量的函數。

閉包的作用： ①讀取其他函數內部的變量 ②變量保存在內存中

註意：使用過多的閉包會消耗大量內存，造成網頁的性能問題，可以在函數執行完成之前把不需要的局部變量刪除。

3.sessionStorge , localStorge , cookie , Web Storage之間的區別

①數據存儲大小 cookie：4kb webStorge：5mb

②數據存儲有效期限 cookie：根據自己的設置時間 sessionStorage：關閉窗口後失效

localStorage：永久有效除非js刪除或者瀏覽器刪除 ③作用域 cookie和localStorage是在同源窗口，同一個瀏覽器共享的，sessionStorage只在同一個標簽頁共享。

4.請指出document load和document ready的區別？

ready：頁面的文檔結構加載完成，不包括圖片視頻等非文字內容。 load：所有頁面元素都加載完成 ready的速度比load快

5.網站性能優化

網站性能優化主要從以下幾個方面進行優化： ①資源文件js css 圖片合並壓縮 ②減少頁面dom操作，操作多的話可以考慮使用虛擬dom ③減少http請求 ④使用cdn加速 cdn的作用：cdn可以處理整個網站 70%-95%的訪問量，從而解決網站的並發量，簡單的說就是通過在不同地點緩存內容，然後通過負載平衡等技術將用戶請求定向到最近的緩存服務器上獲取內容，提高用戶訪問網站的響應速度。 ⑤減少cookie大小

6.簡述從瀏覽器地址欄輸入url到顯示頁面的步驟

涉及的主要流程或步驟有： ①瀏覽器根據請求的URL，交給DNS域名解析，找到真實的ip，交給域名解析。 ②服務器交給後端處理完成後返回的數據，瀏覽器接收文件HTML,CSS,JS圖片等。 ③瀏覽器對加載的資源進行語法解析，建立相應的數據內部結構。 ④解析html，創建dom樹，自上而下的順序 ⑤解析css，優先級：瀏覽器默認設置<用戶設置<外部樣式<內聯樣式<HTML中的style樣式； ⑥將css與dom合並，構建渲染樹 ⑦布局重繪重排，頁面完成渲染。

7.常見的HTML狀態碼及其的含義

1XX：信息狀態碼 100 Continue 繼續，一般在發送post請求時，已發送了http header之後服務端將返回此信息，表示確認，之後發送具體參數信息

2XX：成功狀態碼 200 OK 正常返回信息 201 Created 請求成功並且服務器創建了新的資源 202 Accepted 服務器已接受請求，但尚未處理

3XX：重定向 301 Moved Permanently 請求的網頁已永久移動到新位置。 302 Found 臨時性重定向。 303 See Other 臨時性重定向，且總是使用 GET 請求新的 URI。 304 Not Modified 自從上次請求後，請求的網頁未修改過。

4XX：客戶端錯誤 400 Bad Request 服務器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求。 401 Unauthorized 請求未授權。 403 Forbidden 禁止訪問。 404 Not Found 找不到如何與 URI 相匹配的資源。

5XX: 服務器錯誤 500 Internal Server Error 最常見的服務器端錯誤。 503 Service Unavailable 服務器端暫時無法處理請求（可能是過載或維護）。

8.對瀏覽器內核的理解

主要分為渲染引擎和js引擎渲染引擎：主要負責取得網頁的（html，xml，圖片等），整理信息結合css渲染頁面，計算網頁的顯示方式，瀏覽器內核的不同對網頁的語法解釋也會有所不同，所以渲染效果也會有所不同，這也是我們需要做兼容性處理的原因。

js引擎：解析和執行js來達到網頁的動態交互效果。

最開始渲染引擎和js引擎沒有太區分，後來越來越獨立化，然後內核一般就是指渲染引擎了。

9.html5有哪些新特性

新增了 canvas，video，audio，nav，section，footer，header等元素。表單控件，calendar、date、time、email、url、search 存儲技術：localStorage，sessionStorage等新的技術：webworker, websocket, Geolocation

10.iframed的缺點

①iframe會阻塞頁面的 onload事件 ②搜索引擎不能夠解讀 iframe 頁面，不利於 seo ③iframe和主頁面共享連接池，然而瀏覽器對相同域的鏈接是有限制的，所以這會影響頁面的並行加載。 ④如果想要繞開以上的2個問題，可以考慮通過js動態復職給 iframe添加src值。

2018年前端面試總結

2018年前端面試總結

基礎知識

Html

html

2 meta viewport

3 canvas

CSS

1.盒模型

2，css reset 和 normalize.css 有什麽區別

4，畫三角形

JavaScript

1，什麽是立即執行函數？使用立即執行函數的目的是什麽？

2，async/await

HTTP

常見狀態碼

GET 與POST區別

請求行，請求頭，請求體詳解

webpack

打包體積

打包效率

Loader

常見面試題

1.怎樣添加、移除、移動、復制、創建和查找節點？

2.如何理解閉包

3.sessionStorge , localStorge , cookie , Web Storage之間的區別

4.請指出document load和document ready的區別？

5.網站性能優化

6.簡述從瀏覽器地址欄輸入url到顯示頁面的步驟

7.常見的HTML狀態碼及其的含義

8.對瀏覽器內核的理解

9.html5有哪些新特性

10.iframed的缺點

11.web標準以及w3c標準

相關推薦