作者：xiangzhihong
鏈接：https://juejin.im/post/5bee888fe51d4557fe34e356

再有兩個月，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

 H5標準聲明，使用 HTML5 doctype，不區分大小寫
 標準的 lang 屬性寫法
 聲明文檔使用的字符編碼
 優先使用 IE 最新版本和 Chrome
 頁面描述
 頁面關鍵詞
 網頁作者
 搜索引擎抓取
 爲移動設備添加 viewport
 iOS 設備 begin
 添加到主屏後的標題（iOS 6 新增）
是否啓用 WebApp 全屏模式，刪除蘋果默認的工具欄和菜單欄

添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari）

 設置蘋果工具欄顏色
 啓用360瀏覽器的極速模式(webkit)
 避免IE使用兼容模式
 不讓百度轉碼
 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓
 微軟的老式瀏覽器
 uc強制豎屏
 QQ強制豎屏
 UC強制全屏
 QQ強制全屏
 UC應用模式
 QQ應用模式
 windows phone 點擊無高光
設置頁面不緩存

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，優先級：瀏覽器默認設置

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.什麼是面向對象的編程和麪向過程的編程，以及異同和優缺點

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

43.說說你對Promise的理解

所謂Promise，簡單說就是一個容器，裏面保存着某個未來纔會結束的事件（通常是一個異步操作）的結果。從語法上說，Promise 是一個對象，從它可以獲取異步操作的消息。Promise 提供統一的 API，各種異步操作都可以用同樣的方法進行處理。

Promise對象有以下兩個特點:

• 對象的狀態不受外界影響，Promise對象代表一個異步操作，有三種狀態：Pending（進行中）、Resolved（已完成，又稱Fulfilled）和Rejected（已失敗）
• 一旦狀態改變，就不會再變，任何時候都可以得到這個結果。