前端程序員心心念念的面試題精選（全都有答案）助你拿心儀offer（前端程序員面試寶典）

小編在之前的文章中分享了PHP、Java等面試題以及答案，許多人就給小編留言，希望分享前端、大數(shù)據(jù)、軟件測(cè)試等面試題，小編已經(jīng)拿小本本記下來(lái)了，在接來(lái)的文章中會(huì)相繼分享給大家，而今天我們就一起來(lái)看看前端的一些面試題吧~

談?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ù)的改變并且控制視圖的更新，處理用戶交互操作；

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中由于用戶交互操作而改變的數(shù)據(jù)也會(huì)在Model中同步。

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

Vue 有哪些指令？(2018年Vue.js深入淺出教程)

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

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)銷；當(dāng)只需要一次顯示或隱藏時(shí)，使用v-if更加合理。

簡(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)依賴，在屬性被訪問(wèn)和修改時(shí)通知變化。每個(gè)組件實(shí)例都有相應(yīng)的watcher程序?qū)嵗鼤?huì)在組件渲染的過(guò)程中把屬性記錄為依賴，之后當(dāng)依賴項(xiàng)的setter被調(diào)用時(shí)，會(huì)通知watcher重新計(jì)算，從而致使它關(guān)聯(lián)的組件得以更新。

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

假設(shè)有一個(gè)輸入框組件，用戶輸入時(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ì)幫我們完成上面的兩步操作。

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屬性表示深層遍歷，但是這么寫會(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)依賴改變時(shí)，便會(huì)重新計(jì)算一個(gè)新值。

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ì)跟著改變了：

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)

如何優(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圖，提升用戶體驗(yàn)；

前端如何優(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)俗稱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

俗稱懶加載，可以控制網(wǎng)頁(yè)上的內(nèi)容在一開(kāi)始無(wú)需加載，不需要發(fā)請(qǐng)求，等到用戶操作真正需要的時(shí)候立即加載出內(nèi)容。這樣就控制了網(wǎng)頁(yè)資源一次性請(qǐng)求數(shù)量。

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

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

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

3、利用瀏覽器緩存

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

4、減少重排（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操作樣式。

5、減少 DOM 操作

6、圖標(biāo)使用 IconFont 替換

網(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è)面，直至顯示完成；

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

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

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

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

使用：

$(

“#div”

).myMethod();

CSS，JS代碼壓縮，以及代碼CDN托管，圖片整合。

(1)CSS,JS 代碼壓縮：

可以應(yīng)用gulp的gulp-uglify，gulp-minify-css模塊完成;可以應(yīng)用Webpack的 UglifyJsPlugin壓縮插件完成。

(2)CDN：

內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN)是一個(gè)經(jīng)策略性部署的整體系統(tǒng)，包括分布式存儲(chǔ)、負(fù)載均衡、網(wǎng)絡(luò)請(qǐng)求的重定向和內(nèi)容管理4個(gè)要件。主要特點(diǎn)有：本地Cache加速，鏡像服務(wù)，遠(yuǎn)程加速，帶寬優(yōu)化。關(guān)鍵技術(shù)有：內(nèi)容發(fā)布，內(nèi)容路由，內(nèi)容交換，性能管理。CDN網(wǎng)站加速適合以咨詢?yōu)橹鞯木W(wǎng)站。CDN是對(duì)域名加速不是對(duì)網(wǎng)站服務(wù)器加速。CDN和鏡像站比較不需要訪客手動(dòng)選擇要訪問(wèn)的鏡像站。CDN使用后網(wǎng)站無(wú)需任何修改即可使用CDN獲得加速效果。如果通過(guò)CDN后看到的網(wǎng)頁(yè)還是舊網(wǎng)頁(yè)，可以通過(guò)URL推送服務(wù)解決，新增的網(wǎng)頁(yè)和圖片不需要URL推送。使用動(dòng)態(tài)網(wǎng)頁(yè)可以不緩存即時(shí)性要求很高的網(wǎng)頁(yè)和圖片。CDN可以通過(guò)git或SVN來(lái)管理。

(3)圖片整合

減少網(wǎng)站加載時(shí)間的最有效的方式之一就是減少網(wǎng)站的HTTP請(qǐng)求數(shù)。實(shí)現(xiàn)這一目標(biāo)的一個(gè)有效的方法就是通過(guò)CSS Sprites——將多個(gè)圖片整合到一個(gè)圖片中，然后再用CSS來(lái)定位。缺點(diǎn)是可維護(hù)性差?？梢允褂冒俣鹊膄is/Webpack來(lái)自動(dòng)化管理sprite。

如何利用Webpack把代碼上傳服務(wù)器以及轉(zhuǎn)碼測(cè)試?

(1)代碼上傳：

可以使用sftp-Webpack-plugin，但是會(huì)把子文件夾給提取出來(lái)，不優(yōu)雅?？梢允褂胓ulp Webpack來(lái)實(shí)現(xiàn)。

(2)轉(zhuǎn)碼測(cè)試

Webpack應(yīng)用babel來(lái)對(duì)ES6轉(zhuǎn)碼，開(kāi)啟devtool: “source-map” 來(lái)進(jìn)行瀏覽器測(cè)試。應(yīng)用karma或mocha來(lái)做單元測(cè)試。

項(xiàng)目上線流程是怎樣的?

(1)流程建議

– 模擬線上的開(kāi)發(fā)環(huán)境

本地反向代理線上真實(shí)環(huán)境開(kāi)發(fā)即可。(apache，nginx，nodejs均可實(shí)現(xiàn))

– 模擬線上的測(cè)試環(huán)境

模擬線上的測(cè)試環(huán)境，其實(shí)是需要一臺(tái)有真實(shí)數(shù)據(jù)的測(cè)試機(jī)，建議沒(méi)條件搭daily的，就直接用線上數(shù)據(jù)測(cè)好了，只不過(guò)程序部分走你們的測(cè)試環(huán)境而已，有條件搭daily最好。

– 可連調(diào)的測(cè)試環(huán)境

可連調(diào)的測(cè)試環(huán)境，分為2種。一種是開(kāi)發(fā)測(cè)試都在一個(gè)局域網(wǎng)段，直接綁hosts即可，不在一個(gè)網(wǎng)段，就每人分配一臺(tái)虛擬的測(cè)試機(jī)，放在大家都可以訪問(wèn)到的公司內(nèi)網(wǎng)，代碼直接往上布即可。

– 自動(dòng)化的上線系統(tǒng)

自動(dòng)化的上線系統(tǒng)，可以采用Jenkins。如果沒(méi)有，可以自行搭建一個(gè)簡(jiǎn)易的上線系統(tǒng)，原理是每次上線時(shí)都抽取最新的trunk或master，做一個(gè)tag，再打一個(gè)時(shí)間戳的標(biāo)記，然后分發(fā)到cdn就行了。界面里就2個(gè)功能，打tag，回滾到某tag，部署。

– 適合前后端的開(kāi)發(fā)流程

開(kāi)發(fā)流程依據(jù)公司所用到的工具，構(gòu)建，框架。原則就是分散獨(dú)立開(kāi)發(fā)，互相不干擾，連調(diào)時(shí)有hosts可綁即可。

(2)簡(jiǎn)單的可操作流程

– 代碼通過(guò)git管理，新需求創(chuàng)建新分支，分支開(kāi)發(fā)，主干發(fā)布

– 上線走簡(jiǎn)易上線系統(tǒng)，參見(jiàn)上一節(jié)

– 通過(guò)gulp Webpack連到發(fā)布系統(tǒng)，一鍵集成，本地只關(guān)心原碼開(kāi)發(fā)

– 本地環(huán)境通過(guò)Webpack反向代理的server

– 搭建基于linux的本地測(cè)試機(jī)，自動(dòng)完成build push功能

工程化怎么管理的?

gulp和Webpack

git常用命令

Workspace：工作區(qū)

Index / Stage：暫存區(qū)

Repository：倉(cāng)庫(kù)區(qū)(或本地倉(cāng)庫(kù))

Remote：遠(yuǎn)程倉(cāng)庫(kù)

Webpack 和 gulp對(duì)比

Gulp 就是為了規(guī)范前端開(kāi)發(fā)流程，實(shí)現(xiàn)前后端分離、模塊化開(kāi)發(fā)、版本控制、文件合并與壓縮、mock數(shù)據(jù)等功能的一個(gè)前端自動(dòng)化構(gòu)建工具。說(shuō)的形象點(diǎn)，“Gulp就像是一個(gè)產(chǎn)品的流水線，整個(gè)產(chǎn)品從無(wú)到有，都要受流水線的控制，在流水線上我們可以對(duì)產(chǎn)品進(jìn)行管理。” 另外，Gulp是通過(guò)task對(duì)整個(gè)開(kāi)發(fā)過(guò)程進(jìn)行構(gòu)建。

Webpack 是當(dāng)下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進(jìn)行代碼分隔，等到實(shí)際需要的時(shí)候再異步加載。通過(guò) loader的轉(zhuǎn)換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、AMD 模塊、ES6 模塊、CSS、圖片、JSON、Coffeescript、LESS 等。

Gulp和Webpack功能實(shí)現(xiàn)對(duì)比：從基本概念、啟動(dòng)本地Server、sass/less預(yù)編譯、模塊化開(kāi)發(fā)、文件合并與壓縮、mock數(shù)據(jù)、版本控制、組件控制八個(gè)方面對(duì)Gulp和Webpack進(jìn)行對(duì)比。

Webpack打包文件太大怎么辦?

Webpack 把我們所有的文件都打包成一個(gè) JS 文件，這樣即使你是小項(xiàng)目，打包后的文件也會(huì)非常大。可以從去除不必要的插件，提取第三方庫(kù)，代碼壓縮，代碼分割，設(shè)置緩存幾個(gè)方面著手優(yōu)化。

不想讓別人盜用你的圖片，訪問(wèn)你的服務(wù)器資源該怎么處理?

目前常用的防盜鏈方法主要有兩種：

(1)設(shè)置Referer：適合不想寫代碼的用戶，也適合喜歡開(kāi)發(fā)的用戶

(2)簽名URL：適合喜歡開(kāi)發(fā)的用戶

精靈圖和base64如何選擇?

css精靈，用于一些小的圖標(biāo)不是特別多，一個(gè)的體積也稍大，比如大于10K(這個(gè)沒(méi)有嚴(yán)格的界定)。

base64，用于小圖標(biāo)體積較小(相對(duì)于css精靈)，多少都無(wú)所謂。字體圖標(biāo)，用于一些別人做好的圖標(biāo)庫(kù)(也有少數(shù)自己去做的)用起來(lái)比較方便，他的圖標(biāo)只能用于單色，圖標(biāo)用只能于一種顏色。

Webpack怎么引入第三方的庫(kù)?

拿jQuery為例：

entry: {

page: ‘path/to/page.js’,

jquery: ‘node_modules/jquery/dist/jquery.min.js’

}

new HtmlWebpackPlugin({

filename: ‘index.html’,

template: ‘index.html’,

inject: true,

chunks: [‘jquery’, ‘page’] // 按照先后順序插入script標(biāo)簽

})

希望大家不僅要追求學(xué)習(xí)的廣度，更要追求深度。愿你能早日拿到心儀的offer。