2018年前端面試總結

伺服器瀏覽器 · 發表 2018-12-06 00:56:00

摘要：再有兩個月，2018就快過完了，因而有必要在年末對2018年的前端學習做一個總結，本文主要從前端面試中的一些基礎知識來對前端進行相關的總結。本文根據網路面試題進行總結。基礎知識本部分主要從以下幾個方面來回顧前端相關的基礎知識： HTML相關 CSS相關 JA...

再有兩個月，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:both;height:0;overflow:hidden;}

.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值。

11.web標準以及w3c標準

標籤閉合，標籤小寫，不亂巢狀，使用外鍊形式的css和js，結構層，表現層，行為層分離。

12.xhtml和html有什麼區別

TML與XHTML之間的差別，主要分為功能上的差別和書寫習慣的差別兩方面。

關於功能上的差別，主要是XHTML可相容各大瀏覽器、手機以及PDA，並且瀏覽器也能快速正確地編譯網頁。

由於XHTML的語法較為嚴謹，所以如果你是習慣鬆散結構的HTML編寫者，那需要注意XHTML的規則。

13.Doctype作用，嚴格模式與混雜模式如何區分？它們有何意義?

Doctype處於文件的最前面，用來告訴瀏覽器的解析器，文件的型別。嚴格模式的js執行和排版是按照瀏覽器支援的最高標準的。混雜模式就是相容性模式，當頁面相容不好的時候，就可以選用這種模式，防止頁面佈局錯落無法站點工作。

14.行內元素有哪些，塊級元素有哪些，空(void)元素有那些？行內元素和塊級元素有什麼區別？

行內元素：a b span img input select strong 塊級元素：div ul li ol dl dt dd h1 h2 h3 p 空元素：br hr link meta 塊級元素獨佔一行，行內元素合一併行一行

15.html的全域性屬性有哪些

class：為元素設定類標識 data-**：為元素新增自定義屬性 draggable：設定元素是否可以拖曳 id：元素的id，同一個id文件內是唯一的 style：元素樣式 title：滑鼠上移顯示資訊

16.canvas和svg的區別

svg繪製出來的圖片有獨立dom節點，可以繫結事件，是向量圖，放大圖片不會有鋸齒。 canvas繪製出來的圖片是一個畫布，等於就是一張圖，放大會產生鋸齒。

17.css sprite是什麼，有什麼優缺點

就是將多個小圖示拼接在一張圖片上，減少對圖片的請求，使用 background-size來定位到相關圖片上。

優點：①減少HTTP請求數，極大地提高頁面載入速度； ②增加圖片資訊重複度，提高壓縮比，減少圖片大小； ③更換風格方便，只需在一張或幾張圖片上修改顏色或樣式即可實現；

缺點：①圖片合併麻煩； ②維護麻煩，修改一個圖片可能需要從新佈局整個圖片，樣式；

18.display: none;與visibility: hidden;的區別

總的來說，他們的作用都是讓元素不可見。區別在於： display：none會讓元素完全從 dom 樹中消失，渲染的時候不佔據任何空間。 visibility：hidden不會讓元素從渲染樹 dom 中消失，而且還是會佔據一定的空間，只是內容不可見而已。

19.link與@import的區別

1.link是html 的方式，@import是css的方式 2.link最大限度支援並行下載，@import過多巢狀導致序列下載 3.link可以通過rel="alternate stylesheet"指定候選樣式 4.總體來說：link優於@import

20.清除浮動的幾種方式

1.clear：both，新增一個空標籤div 2.父級div定義偽類:after和zoom 3.父級div定義overflow:hidden 4.父級div也浮動，需要定義寬度 5.結尾處加br標籤clear:both

例如：

.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}
.clearfix{display:inline-table}
.clearfix{height:1%}
.clearfix{display:block;*zoom:1}

複製程式碼

21.為什麼要初始化css樣式

因為瀏覽器的相容問題，不同瀏覽器對有些標籤的預設值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。

22.css3有哪些新特性

主要的新特性有：

新增各種css選擇器
圓角 border-radius
多列布局
陰影和反射
文字特效text-shadow
線性漸變
旋轉transform
動畫效果

23.介紹一下css盒子模型

有兩種， IE盒子模型、W3C盒子模型；盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border)；區別： IE（低版本）的content部分把 border 和 padding計算了進去;

24.css的優先順序演算法是怎麼樣的

優先順序為: !important > id > class > tag 且important 比內聯優先順序高。

25.base64的原理及優缺點

優點:可以將二進位制資料轉化為可列印字元，方便傳輸資料，對資料進行簡單的加密，肉眼安全。缺點：內容編碼後體積變大，編碼和解碼需要CPU額外工作量。

26.說說你對作用於鏈的理解

作用域鏈中的變數都是向上訪問的，變數訪問到windows物件後終止，向下訪問是不允許的。簡單的說，作用域就是變數函式的可訪問範圍。

27.js原型，原型鏈有什麼特點

每個物件在內部都是會初始化一個屬性的，prototype（原型），當我們訪問一個物件的屬性時，如果這個物件不存在這個屬性，那麼他就會去 prototype中查詢，然後 prototype中還有自己的 prototype，就這樣一直找下去，這就是原型鏈的概念。

28.什麼是事件代理，事件委託

假如我們有一個 ul 列表，裡面有4個li，我們可以在 li 上繫結 click 事件，但是也可以在她們的父節點 ul上繫結，這種在父節點上繫結事件來代替子節點事件的方法，就叫做事件委託。

29.談談對this的理解

this總是指向函式的直接呼叫者（而非間接呼叫者）如果有new關鍵字，this指向new出來的那個物件在事件中，this指向觸發這個事件的物件，特殊的是，IE中的attachEvent中的this總是指向全域性物件Window

30.事件模型是什麼

w3c中定義的事件發生的過程的3個階段：捕獲階段（capturing）、目標階段（targetin）、冒泡階段（bubbling）

31.ajax的優缺點

優點：通過非同步模式，提升了使用者體驗. 優化了瀏覽器和伺服器之間的傳輸，減少不必要的資料往返，減少了頻寬佔用. Ajax在客戶端執行，承擔了一部分本來由伺服器承擔的工作，減少了大使用者量下的伺服器負載。 Ajax可以實現動態不重新整理（區域性重新整理）

缺點：安全問題 AJAX暴露了與伺服器互動的細節。對搜尋引擎的支援比較弱。不容易除錯。

32.怎麼解決跨域問題

跨域問題可以從jsonp、 iframe、window.name、window.postMessage、伺服器上設定代理頁面等方面來解決。一般由後臺設定允許跨域。

33.哪些操作會造成記憶體洩漏

記憶體洩漏是指一些物件我們不在使用它的時候，他任然存在 setTimeout 的第一個引數使用字串而非函式的話，會引發記憶體洩漏閉包使用不當。

簡述vue、react、angular

一、Angular特性：由自己實現一套模板編譯規則，資料變化依賴髒檢查，基本屬性包括：資料雙向繫結、基本模板指令、自定義指令、表單驗證、路由操作、依賴注入、過濾器、內建服務、自定義服務、元件、模組。執行效率較低，資料變更檢測方式。學習angular會迫使你學習特有的預發，上手成本很大，程式碼看起來很乾淨依賴注入，即一個物件將依賴項提供給另一個物件（客戶端）的模式。導致更多的靈活性和更乾淨的程式碼。 Angular 最適合單頁應用（SPA），因為它可能太臃腫而不能用於微服務。框架比較臃腫，每次用啥功能要引入一大堆東西 Angular錯誤提示不夠清晰明顯，對於初級開發者，很難看懂Angular的錯誤提示。（個人認為這是最大的不好之處，當初學習這個遇到很多坑啊），而且定位bug很難。面向物件程式設計的思想，Angular由後端開發人員設計的前端框架。詳細比較：React和Vue的區別

二、React特性: 單向繫結，先更新model,然後渲染UI元素，資料在一個方向流動，使得除錯更加容易。程式碼冗餘，各種生命週期太麻煩，剛開始接觸好難記。用了虛擬DOM。（對虛擬DOM的理解剛開始我不是很理解概念，建議大家去看【深入REACT技術棧】這本書有很好的講解）更適合大型應用和更好的可測試性 Web端和移動端原生APP通吃更大的生態系統，更多的支援和好用的工具

三、Vue特性模板和渲染函式的彈性選擇簡單的語法和專案配置更快的渲染速度和更小的體積四

35.eval是什麼

它的功能是把對應的字串解析成JS程式碼並執行應該避免使用eval，不安全，非常耗效能（2次，一次解析成js語句，一次執行）由JSON字串轉換為JSON物件的時候可以用eval，var obj =eval('('+ str +')')

36.null和undefine的區別

undefine: 表示不存在這個值，如果變數被聲明瞭沒有賦值。 null ：變數被定義賦值了，但是為空的情況，沒有任何屬性方法和值在驗證null時，一定要使用 === ，因為 ==無法分別null 和 undefined

37.談談對json的瞭解

json是JavaScript Object Notation的縮寫，即JavaScript物件表示法，是一種輕量級的資料交換格式，易於閱讀和編寫，同時也易於機器解析和生成。json是儲存和交換文字資訊的語法，類似於XML。json採用完全獨立與語言的文字格式，它的語言格式類似於c語言家族。這些特性也使的json成為理想的資料交換語言。

JSON字串轉換為JSON物件:

var obj =eval('('+ str +')');
var obj = str.parseJSON();
var obj = JSON.parse(str);
複製程式碼

JSON物件轉換為json字串

var last=obj.toJSONString();
var last=JSON.stringify(obj);
複製程式碼

38.同步和非同步的區別

同步：瀏覽器訪問伺服器請求，使用者看得到頁面重新整理，重新發請求,等請求完，頁面重新整理，新內容出現，使用者看到新內容,進行下一步操作。非同步：瀏覽器訪問伺服器請求，使用者正常操作，瀏覽器後端進行請求。等請求完，頁面不重新整理，新內容也會出現，使用者看到新內容。

39.漸進增強和優雅降級

漸進增強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高階瀏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。優雅降級：一開始就構建完整的功能，然後再針對低版本瀏覽器進行相容。

40.attribute和property的區別是什麼？

attribute是dom元素在文件中作為html標籤擁有的屬性； property就是dom元素在js中作為物件擁有的屬性。

41.談談對ES6的理解

es6是一個新的標準，它包含了許多新的語言特性和庫，是JS最實質性的一次升級。比如’箭頭函式’、’字串模板’、’generators(生成器)’、’async/await’、’解構賦值’、’class’等等，還有就是引入module模組的概念。

可以讓this指向固定化，這種特性很有利於封裝回調函式

（1）函式體內的this物件，就是定義時所在的物件，而不是使用時所在的物件。
（2）不可以當作建構函式，也就是說，不可以使用new命令，否則會丟擲一個錯誤。
（3）不可以使用arguments物件，該物件在函式體內不存在。如果要用，可以用Rest引數代替。
（4）不可以使用yield命令，因此箭頭函式不能用作Generator函式。

async/await 是寫非同步程式碼的新方式，以前的方法有回撥函式和Promise。 async/await是基於Promise實現的，它不能用於普通的回撥函式。async/await與Promise一樣，是非阻塞的。 async/await使得非同步程式碼看起來像同步程式碼，這正是它的魔力所在。

42.什麼是面向物件的程式設計和麵向過程的程式設計，以及異同和優缺點

面向過程就是對一個問題提出解決思路，然後一步步的列出函式解決，依次呼叫。面向物件就是將構成問題分解成各個物件，建立物件的目的不是為了完成一個步驟，而是為了描敘某個事物在整個解決問題的步驟中的行為。面向物件是以功能來劃分問題，而不是步驟