畢業(yè)之后就在一直合肥小公司工作，沒(méi)有老司機(jī)、沒(méi)有技術(shù)氛圍，在技術(shù)的道路上我只能獨(dú)自摸索。老板也只會(huì)畫(huà)餅充饑，前途一片迷?？床坏饺魏蜗ＭＳ谑呛?，我果斷辭職，在新年開(kāi)工之際來(lái)到杭州，這里的互聯(lián)網(wǎng)公司應(yīng)該是合肥的幾十倍吧。。。。

剛來(lái)3天，面試了幾家公司，有些規(guī)模比較小，有些是創(chuàng)業(yè)公司，也有些已經(jīng)發(fā)展的不錯(cuò)了；今天把最近的面試題目做個(gè)匯總，也給自己復(fù)個(gè)盤(pán)，由于我的技術(shù)棧主要為Vue，所以大部分題目都是Vue開(kāi)發(fā)相關(guān)的。

1. 談?wù)勀銓?duì)MVVM開(kāi)發(fā)模式的理解

MVVM分為Model、View、ViewModel三者。

Model 代表數(shù)據(jù)模型，數(shù)據(jù)和業(yè)務(wù)邏輯都在Model層中定義；

View 代表UI視圖，負(fù)責(zé)數(shù)據(jù)的展示；

ViewModel 負(fù)責(zé)監(jiān)聽(tīng) Model 中數(shù)據(jù)的改變并且控制視圖的更新，處理用戶(hù)交互操作；

Model 和 View 并無(wú)直接關(guān)聯(lián)，而是通過(guò) ViewModel 來(lái)進(jìn)行聯(lián)系的，Model 和 ViewModel 之間有著雙向數(shù)據(jù)綁定的聯(lián)系。因此當(dāng) Model 中的數(shù)據(jù)改變時(shí)會(huì)觸發(fā) View 層的刷新，View 中由于用戶(hù)交互操作而改變的數(shù)據(jù)也會(huì)在 Model 中同步。

這種模式實(shí)現(xiàn)了 Model 和 View 的數(shù)據(jù)自動(dòng)同步，因此開(kāi)發(fā)者只需要專(zhuān)注對(duì)數(shù)據(jù)的維護(hù)操作即可，而不需要自己操作 dom。

2. Vue 有哪些指令？

v-html、v-show、v-if、v-for等等

3. v-if 和 v-show 有什么區(qū)別？

v-show 僅僅控制元素的顯示方式，將 display 屬性在 block 和 none 來(lái)回切換；而v-if會(huì)控制這個(gè) DOM 節(jié)點(diǎn)的存在與否。當(dāng)我們需要經(jīng)常切換某個(gè)元素的顯示/隱藏時(shí)，使用v-show會(huì)更加節(jié)省性能上的開(kāi)銷(xiāo)；當(dāng)只需要一次顯示或隱藏時(shí)，使用v-if更加合理。

4. 簡(jiǎn)述Vue的響應(yīng)式原理

當(dāng)一個(gè)Vue實(shí)例創(chuàng)建時(shí)，vue會(huì)遍歷data選項(xiàng)的屬性，用 Object.defineProperty 將它們轉(zhuǎn)為 getter/setter并且在內(nèi)部追蹤相關(guān)依賴(lài)，在屬性被訪問(wèn)和修改時(shí)通知變化。

每個(gè)組件實(shí)例都有相應(yīng)的 watcher 程序?qū)嵗?，它?huì)在組件渲染的過(guò)程中把屬性記錄為依賴(lài)，之后當(dāng)依賴(lài)項(xiàng)的 setter 被調(diào)用時(shí)，會(huì)通知 watcher 重新計(jì)算，從而致使它關(guān)聯(lián)的組件得以更新。

5. Vue中如何在組件內(nèi)部實(shí)現(xiàn)一個(gè)雙向數(shù)據(jù)綁定？

假設(shè)有一個(gè)輸入框組件，用戶(hù)輸入時(shí)，同步父組件頁(yè)面中的數(shù)據(jù)

具體思路：父組件通過(guò) props 傳值給子組件，子組件通過(guò) $emit 來(lái)通知父組件修改相應(yīng)的props值，具體實(shí)現(xiàn)如下： 

import Vue from 'vue'  
const component = {  
  props: ['value'],  
  template: `  
    <div>  
      <input type="text" @input="handleInput" :value="value">  
    </div>  
  `,  
  data () {  
    return {  
    }  
  },  
  methods: {  
    handleInput (e) {  
      this.$emit('input', e.target.value)  
    }  
  } 
}  
new Vue({  
  components: {  
    CompOne: component  
  },  
  el: '#root',  
  template: `  
    <div>  
      <comp-one :value1="value" @input="value = arguments[0]"></comp-one>  
    </div>  
  `,  
  data () {  
    return {  
      value: '123'  
    }  
  }  
}) 

可以看到，當(dāng)輸入數(shù)據(jù)時(shí)，父子組件中的數(shù)據(jù)是同步改變的：

我們?cè)诟附M件中做了兩件事，一是給子組件傳入props，二是監(jiān)聽(tīng)input事件并同步自己的value屬性。那么這兩步操作能否再精簡(jiǎn)一下呢？答案是可以的，你只需要修改父組件： 

template: `  
    <div>  
      <!--<comp-one :value1="value" @input="value = arguments[0]"></comp-one>-->  
      <comp-one v-model="value"></comp-one>  
    </div>  
  ` 

v-model 實(shí)際上會(huì)幫我們完成上面的兩步操作。

6. Vue中如何監(jiān)控某個(gè)屬性值的變化？

比如現(xiàn)在需要監(jiān)控data中，obj.a 的變化。Vue中監(jiān)控對(duì)象屬性的變化你可以這樣： 

watch: {  
      obj: {  
      handler (newValue, oldValue) {  
        console.log('obj changed')  
      },  
      deep: true  
    }  
  } 

deep屬性表示深層遍歷，但是這么寫(xiě)會(huì)監(jiān)控obj的所有屬性變化，并不是我們想要的效果，所以做點(diǎn)修改： 

watch: {  
   'obj.a': {  
      handler (newName, oldName) {  
        console.log('obj.a changed')  
      }  
   }  
  } 

還有一種方法，可以通過(guò)computed 來(lái)實(shí)現(xiàn)，只需要： 

computed: {  
    a1 () {  
      return this.obj.a  
    }  
} 

利用計(jì)算屬性的特性來(lái)實(shí)現(xiàn)，當(dāng)依賴(lài)改變時(shí)，便會(huì)重新計(jì)算一個(gè)新值。

7. Vue中給data中的對(duì)象屬性添加一個(gè)新的屬性時(shí)會(huì)發(fā)生什么，如何解決？

示例： 

<template>  
  <div>  
    <ul>  
      <li v-for="value in obj" :key="value">  
        {{value}}  
      </li>  
    </ul>  
    <button @click="addObjB">添加obj.b</button>  
  </div>  
</template>  
<script>  
export default {  
  data () {  
    return {  
      obj: {  
        a: 'obj.a'  
      }  
    }  
  },  
  methods: {  
    addObjB () {  
      this.obj.b = 'obj.b'  
      console.log(this.obj)  
    }  
  }  
}  
</script>  
<style></style> 

點(diǎn)擊button會(huì)發(fā)現(xiàn)，obj.b 已經(jīng)成功添加，但是視圖并未刷新：

原因在于在Vue實(shí)例創(chuàng)建時(shí)，obj.b并未聲明，因此就沒(méi)有被Vue轉(zhuǎn)換為響應(yīng)式的屬性，自然就不會(huì)觸發(fā)視圖的更新，這時(shí)就需要使用Vue的全局api $set()： 

addObjB () {  
      // this.obj.b = 'obj.b'  
      this.$set(this.obj, 'b', 'obj.b')  
      console.log(this.obj)  
    } 

$set()方法相當(dāng)于手動(dòng)的去把obj.b處理成一個(gè)響應(yīng)式的屬性，此時(shí)視圖也會(huì)跟著改變了：

8. delete和Vue.delete刪除數(shù)組的區(qū)別

delete只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。

Vue.delete直接刪除了數(shù)組 改變了數(shù)組的鍵值。   

var a=[1,2,3,4]  
   var b=[1,2,3,4]  
   delete a[1]  
   console.log(a)  
   this.$delete(b,1)  
   console.log(b) 

9.如何優(yōu)化SPA應(yīng)用的首屏加載速度慢的問(wèn)題？

•  將公用的JS庫(kù)通過(guò)script標(biāo)簽外部引入，減小app.bundel的大小，讓瀏覽器并行下載資源文件，提高下載速度；
•  在配置 路由時(shí)，頁(yè)面和組件使用懶加載的方式引入，進(jìn)一步縮小 app.bundel 的體積，在調(diào)用某個(gè)組件時(shí)再加載對(duì)應(yīng)的js文件；
•  加一個(gè)首屏 loading 圖，提升用戶(hù)體驗(yàn)；

10. 前端如何優(yōu)化網(wǎng)站性能？

    1. 減少 HTTP 請(qǐng)求數(shù)量

在瀏覽器與服務(wù)器進(jìn)行通信時(shí)，主要是通過(guò) HTTP 進(jìn)行通信。瀏覽器與服務(wù)器需要經(jīng)過(guò)三次握手，每次握手需要花費(fèi)大量時(shí)間。而且不同瀏覽器對(duì)資源文件并發(fā)請(qǐng)求數(shù)量有限（不同瀏覽器允許并發(fā)數(shù)），一旦 HTTP 請(qǐng)求數(shù)量達(dá)到一定數(shù)量，資源請(qǐng)求就存在等待狀態(tài)，這是很致命的，因此減少 HTTP 的請(qǐng)求數(shù)量可以很大程度上對(duì)網(wǎng)站性能進(jìn)行優(yōu)化。

•  CSS Sprites：國(guó)內(nèi)俗稱(chēng) CSS 精靈，這是將多張圖片合并成一張圖片達(dá)到減少 HTTP 請(qǐng)求的一種解決方案，可以通過(guò) CSS background 屬性來(lái)訪問(wèn)圖片內(nèi)容。這種方案同時(shí)還可以減少圖片總字節(jié)數(shù)。
•  合并 CSS 和 JS 文件：現(xiàn)在前端有很多工程化打包工具，如：grunt、gulp、webpack等。為了減少 HTTP 請(qǐng)求數(shù)量，可以通過(guò)這些工具再發(fā)布前將多個(gè) CSS 或者 多個(gè) JS 合并成一個(gè)文件。
•  采用 lazyLoad：俗稱(chēng)懶加載，可以控制網(wǎng)頁(yè)上的內(nèi)容在一開(kāi)始無(wú)需加載，不需要發(fā)請(qǐng)求，等到用戶(hù)操作真正需要的時(shí)候立即加載出內(nèi)容。這樣就控制了網(wǎng)頁(yè)資源一次性請(qǐng)求數(shù)量。

    1. 控制資源文件加載優(yōu)先級(jí)

瀏覽器在加載 HTML 內(nèi)容時(shí)，是將 HTML 內(nèi)容從上至下依次解析，解析到 link 或者 script 標(biāo)簽就會(huì)加載 href 或者 src 對(duì)應(yīng)鏈接內(nèi)容，為了***時(shí)間展示頁(yè)面給用戶(hù)，就需要將 CSS 提前加載，不要受 JS 加載影響。

一般情況下都是 CSS 在頭部，JS 在底部。

    1. 利用瀏覽器緩存

    瀏覽器緩存是將網(wǎng)絡(luò)資源存儲(chǔ)在本地，等待下次請(qǐng)求該資源時(shí)，如果資源已經(jīng)存在就不需要到服務(wù)器重新請(qǐng)求該資源，直接在本地讀取該資源。

    2. 減少重排（Reflow）

    基本原理：重排是 DOM 的變化影響到了元素的幾何屬性（寬和高），瀏覽器會(huì)重新計(jì)算元素的幾何屬性，會(huì)使渲染樹(shù)中受到影響的部分失效，瀏覽器會(huì)驗(yàn)證 DOM 樹(shù)上的所有其它結(jié)點(diǎn)的 visibility 屬性，這也是 Reflow 低效的原因。如果 Reflow 的過(guò)于頻繁，CPU 使用率就會(huì)急劇上升。

減少 Reflow，如果需要在 DOM 操作時(shí)添加樣式，盡量使用 增加 class 屬性，而不是通過(guò) style 操作樣式。

1.  減少 DOM 操作
2.  圖標(biāo)使用 IconFont 替換

11. 網(wǎng)頁(yè)從輸入網(wǎng)址到渲染完成經(jīng)歷了哪些過(guò)程？

大致可以分為如下7步：

1.  輸入網(wǎng)址；
2.  發(fā)送到DNS服務(wù)器，并獲取域名對(duì)應(yīng)的web服務(wù)器對(duì)應(yīng)的ip地址；
3.  與web服務(wù)器建立TCP連接；
4.  瀏覽器向web服務(wù)器發(fā)送http請(qǐng)求；
5.  web服務(wù)器響應(yīng)請(qǐng)求，并返回指定url的數(shù)據(jù)（或錯(cuò)誤信息，或重定向的新的url地址）；
6.  瀏覽器下載web服務(wù)器返回的數(shù)據(jù)及解析html源文件；
7.  生成DOM樹(shù)，解析css和js，渲染頁(yè)面，直至顯示完成；

12. jQuery獲取的dom對(duì)象和原生的dom對(duì)象有何區(qū)別？

js原生獲取的dom是一個(gè)對(duì)象，jQuery對(duì)象就是一個(gè)數(shù)組對(duì)象，其實(shí)就是選擇出來(lái)的元素的數(shù)組集合，所以說(shuō)他們兩者是不同的對(duì)象類(lèi)型不等價(jià)。

•  原生DOM對(duì)象轉(zhuǎn)jQuery對(duì)象： 

var box = document.getElementById('box');  
var $box = $(box); 

•  jQuery對(duì)象轉(zhuǎn)原生DOM對(duì)象： 

var $box = $('#box');  
var box = $box[0]; 

13. jQuery如何擴(kuò)展自定義方法 

(jQuery.fn.myMethod=function () {  
       alert('myMethod');  
})  
// 或者：  
(function ($) {  
        $.fn.extend({  
             myMethod : function () {  
                  alert('myMethod');  
             }  
        })  
})(jQuery) 

使用： 

$("#div").myMethod(); 

目前來(lái)看公司面試的問(wèn)題還是比較基礎(chǔ)的，但是對(duì)于某些只追求會(huì)用并不研究其原理的同學(xué)來(lái)說(shuō)可能就沒(méi)那么容易了。所以大家不僅要追求學(xué)習(xí)的廣度，更要追求深度。

OK，希望自己能早日拿到心儀的offer.