前端程序猿的面試題之（下）（15題）

程序猿找工做面試須要準備的，這是我面試的總結：

一.CSS盒模型：

1.box-sizing：content-box -- 默認的標準盒模型，元素的寬高不包括內邊距和邊框的尺寸。

其盒模型分爲兩類：標準盒子模型和IE盒子模型

標準盒模型包括：margin，border，padding，content，而且content部分不包括其它部分。

IE盒模型包括：margin，border，padding，content,和標準盒子模型不一樣的是，content部分包含了border和padding。

二. 什麼是閉包？

閉包就是有權訪問另外一個函數做用域內變量的函數都是閉包。

這裏 inc 函數訪問了構造函數 a 裏面的變量 n，因此造成了一個閉包。再來看一段代碼:

function a(){
        var n = 0;  //聲明瞭一個變量n，賦值爲0（初始值）
       function inc(){  //聲明瞭一個變量inc，指向一個函數做用域（保存了此函數對象的地址）
           n++;     //執行n++
           console.log(n);  //輸出n的值
        }
        return inc;  //外層函數返回變量inc（內層函數做用域的地址）
     }
     var c = a();   //調用了外層函數=>獲得返回的內層函數的地址，即inc指向的內層函數的地址=>賦值給了變量c（其實c就是保存內層函數做用域的地址）
     c();    //控制檯輸出1   
     c();    //控制檯輸出2
複製代碼

總結：

閉包就是一個函數引用另一個函數的變量，由於變量被引用着因此不會被回收，所以能夠用來封裝一個私有變量。這是優勢也是缺點，沒必要要的閉包只會徒增內存消耗！另外使用閉包也要注意變量的值是否符合你的要求，由於他就像一個靜態私有變量同樣。閉包一般會跟不少東西混搭起來，接觸多了才能加深理解。

三.你是如何作到性能優化的？

1.減小http請求，合理設置緩存：

就是把css，javascript，圖片合併，把瀏覽器要訪問的js和css合併成一個文件，這樣瀏覽器只須要一次請求，圖片就是多張合成一張。

2.使用瀏覽器緩存

若是將css，js，logo和圖標緩存在瀏覽器的話，這樣能夠提升性能，能夠經過http頭中的cache-control和expires的屬性，可設定瀏覽器緩存，緩存時間能夠是數天，甚至幾個月。

3.啓動壓縮

在瀏覽器對文件進行壓縮，可有效減小通訊傳輸的數據量。

4.Css sprites

合併css圖片，減小請求的次數

5.Css放在頁面最上部，js放在頁面最下面

就是瀏覽器會在下載完成所有css以後纔對整個頁面進行渲染，而js相反，瀏覽器在加載js後當即執行，有可能會阻塞整個頁面，形成頁面顯示緩慢，所以js最好放在頁面最下面。

6.減小cookie傳輸

Cookie包含在每次請求和相應中，太大的cookie會嚴重影響數據傳輸，所以哪些數據須要寫入cookie須要慎重考慮，儘可能減小cookie中傳輸的數據量。

四.什麼狀況會引發內存泄漏？

1.意外的全局變量引發的內存泄漏

緣由：全局變量，不會被回收

解決：使用嚴格模式避免

2.閉包引發的內存泄漏

緣由：閉包能夠維持函數內部局部變量，使其得不到釋放

解決：將事件處理函數內局部變量解除閉包，或在定義事件處理函數的外部函數中刪除dom的引用。

3.沒有清理的Dom元素

緣由：雖然別的地方刪除了，可是對象中還存在對DOM引用

解決：手動刪除

4.被遺忘的定時器或者回調

緣由：定時器中有dom的引用，即便dom刪除了，可是定時器還在，因此內存中仍是有這個dom

解決：手動刪除定時器和dom

五.什麼是vue及特色？

Vue是一個基於MVVM的，漸進式，純前端的js框架。

特色：組件化開發，可複用，先後端解耦。

六.vue生命週期鉤子函數有哪些？分別表明什麼？？

總共分爲8個階段：

1.建立前(beforeCreate) 組件還未開始初始化

2.建立後（created）data的數據初始化，還未掛載，el還未生成

3.載入前(beforeMount) 虛擬Dom已生成，還未掛載到DOM樹

4.載入後(mounted) 組件已經初始化完成,已經成功掛載到DOM樹，此時能夠有關DOM的操做

5.更新前（beforeUpdate）date的數據變化會觸發更新前和更新後的方法

6.更新後（updated）

7.銷燬前（beforeDestroy）

8.銷燬後（destried）vue實例已經解除了對DOM的事件監聽和綁定，但DOM結構依然存在

七.什麼是MVVM？

MVVM是Model View ViewModel的縮寫。

1.Model：表明數據模型，能夠在model中定義數據修改和操做的業務邏輯

2.View表明是視圖，負責將數據模型轉化爲UI展示出來

3.ViewModel：是一個自動同步View和Model對象，是一個控制器

4.在MVVM架構下，Model和ViewModel之間交互是雙向的，所以View的數據變化會同步到Model中。Model的數據變化也會當即反應到View上。

八.Vue是如何渲染頁面的及特色？

new Vue()內包含兩大子系統:

1.響應系統:

將data中每一個變量，都從新封裝爲new Vue()對象的訪問器屬性。 只要修改new Vue()的屬性，就會觸發set() set()除了修改模型數據外，還通知Vue，該模型變量發生了變化，須要修改DOM樹。

2.虛擬DOM樹:

new Vue()對受監視的頁面元素，從新掃描後構建的簡化版DOM樹。 模型數據發生變化，會通知虛擬DOM樹 虛擬DOM樹會經過遍歷本身的方式查找到受影響的元素 用本身封裝好的DOM API僅更新受影響的元素。

特色：

1. 遍歷快：僅保存了受影響的元素和屬性
2. 僅更新受影響的DOM元素，效率比總體替換高！

九. vuex特性是什麼？有什麼優勢？vuex有哪幾種屬性？

Vuex就是一個倉庫，倉庫裏放了不少對象，其中state就是數據存放地，相似於vue中的data。 State裏面存放的數據是響應式的，只要其中的數據發生變化，就會通知其餘依賴這些數據組件更新數據。

優勢： 當你打算開發大型單頁應用，會出現多個視圖組件依賴同一個狀態，來自不一樣視圖的行爲須要變動同一個狀態。遇到以上狀況時候，你就應該考慮使用Vuex了，它能把組件的共享狀態抽取出來，當作一個全局單例模式進行管理。這樣無論你在何處改變狀態，都會通知使用該狀態的組件作出相應修改

屬性：

有5種：分別是

state //存放要保存的數據

getter //定義取出保存數據的方法

mutation //定義修改保存的數據的方法

action //異步修改數據的方法

module //把數據模塊化

十.axios是什麼？

Axios是請求後臺資源的模塊。

1.axios是一個基於promise的HTTP庫，支持promise的全部AP。；

2.它能夠攔截請求和響應。

3.它能夠轉換請求數據和響應數據,並對響應回來的內容自動轉換爲json類型的數據。

4.它安全性更高，客戶端支持防護XSRF。

5.支持多種請求的方式：put post get delete patch。

6.axios能夠配。

十一.vue組件之間的傳參？

1.父組件傳給子組件

父組件經過給子組件的標籤上面定義屬性，在子組件內經過props接受父組件傳過來的屬性值。

2.子組件傳給父組件

父組件經過給子組件標籤訂義一個方法，在子組件經過$emit（定義方法的觸發名，要傳的參數），觸發父組件定義的方法，並把參數傳給父組件

3.兄弟組件間的傳參

在main.js裏面給vue的原型定義實例方法，經過$on給要接收參數的組件綁定方法，要傳遞參數

十二.vue路由傳參的是哪三種方式？

1.this.$router.push()

2.經過路由屬性的name，用params來傳遞參數

3.用path來匹配路由，經過query傳遞參數

十三.什麼是HTTP協議及HTTP協議的工做過程？

HTTP是比TCP更高層次的應用層協議，由請求和響應構成，是一個標準的客戶端服務器模型。是一個無狀態的協議（同一個客戶端的此次請求和上次請求是沒有對應關係）。

1.地址解析

瀏覽器把地址欄的URL解析成協議名、主機名、端口、對象路徑等，而後須要請求DNS服務器，把獲得的域名解析成對應的IP地址。

2.封裝HTTP請求數據包

把以上部分結合本機本身的信息，封裝成一個HTTP請求數據包

3.封裝成TCP包，創建TCP鏈接（TCP的三次握手

由於HTTP比TCP更高層的應用層協議，因此根據規則，只有低層協議創建鏈接以後，才能進行更高層的協議鏈接。 所以，首先要創建TCP鏈接，而後才能HTTP的鏈接。通常TCP鏈接的端口號是80。這裏是8080端口

4.客戶機發送請求命令

創建鏈接以後，客戶機發送一個請求給服務器

5.服務器響應

服務器接到請求後，給予相應的響應信息，其格式爲一個狀態行

6.服務器關閉TCP鏈接

十四.Vue雙向綁定原理？

是使用了訪問器屬性，object.defineProperty()來劫持各個屬性的setter和getter，在數據變更發佈消息給訂閱者，觸發相應的監聽回調。

十五.Conputed和methods有什麼區別？

Conputed：計算屬性是基於他們的依賴進行緩存的，只有在他的相關依賴發生改變時纔會從新求值。

Methods：只要發生從新渲染，method調用總會執行該函數。