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

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

談談對MVVM開發(fā)模式的理解

MVVM分為Model、View、ViewModel三者。

• Model：代表數(shù)據(jù)模型，數(shù)據(jù)和業(yè)務邏輯都在Model層中定義；
• View：代表UI視圖，負責數(shù)據(jù)的展示；
• ViewModel：負責監(jiān)聽Model中數(shù)據(jù)的改變并且控制視圖的更新，處理用戶交互操作；

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

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

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

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

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

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

簡述Vue的響應式原理

當一個Vue實例創(chuàng)建時，vue會遍歷data選項的屬性，用 Object.defineProperty將它們轉(zhuǎn)為getter/setter并且在內(nèi)部追蹤相關依賴，在屬性被訪問和修改時通知變化。每個組件實例都有相應的watcher程序?qū)嵗?，它會在組件渲染的過程中把屬性記錄為依賴，之后當依賴項的setter被調(diào)用時，會通知watcher重新計算，從而致使它關聯(lián)的組件得以更新。

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

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

具體思路：父組件通過props傳值給子組件，子組件通過 $emit 來通知父組件修改相應的props值，具體實現(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’ } }})

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

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

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

v-model 實際上會幫我們完成上面的兩步操作。

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

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

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

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

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

還有一種方法，可以通過computed 來實現(xiàn)，只需要：

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

利用計算屬性的特性來實現(xiàn)，當依賴改變時，便會重新計算一個新值。

Vue中給data中的對象屬性添加一個新的屬性時會發(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>

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

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

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

$set() 方法相當于手動的去把 obj.b 處理成一個響應式的屬性，此時視圖也會跟著改變了：

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應用的首屏加載速度慢的問題？

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

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

1、減少 HTTP 請求數(shù)量

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

CSS Sprites

國內(nèi)俗稱CSS精靈，這是將多張圖片合并成一張圖片達到減少HTTP請求的一種解決方案，可以通過CSS的background屬性來訪問圖片內(nèi)容。這種方案同時還可以減少圖片總字節(jié)數(shù)。

合并 CSS 和 JS 文件

現(xiàn)在前端有很多工程化打包工具，如：grunt、gulp、webpack等。為了減少 HTTP 請求數(shù)量，可以通過這些工具再發(fā)布前將多個CSS或者多個JS合并成一個文件。

采用 lazyLoad

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

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

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

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

3、利用瀏覽器緩存

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

4、減少重排（Reflow）

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

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

5、減少 DOM 操作

6、圖標使用 IconFont 替換

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

大致可以分為如下7步：

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

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

js原生獲取的dom是一個對象，jQuery對象就是一個數(shù)組對象，其實就是選擇出來的元素的數(shù)組集合，所以說他們兩者是不同的對象類型不等價。

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

var box = document.getElementById(‘box’);var $box = $(box);

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

var $box = $(‘#box’);var box = $box[0];

jQuery如何擴展自定義方法

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

使用：

$(

“#div”

).myMethod();

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

(1)CSS,JS 代碼壓縮：

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

(2)CDN：

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

(3)圖片整合

減少網(wǎng)站加載時間的最有效的方式之一就是減少網(wǎng)站的HTTP請求數(shù)。實現(xiàn)這一目標的一個有效的方法就是通過CSS Sprites——將多個圖片整合到一個圖片中，然后再用CSS來定位。缺點是可維護性差。可以使用百度的fis/Webpack來自動化管理sprite。

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

(1)代碼上傳：

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

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

Webpack應用babel來對ES6轉(zhuǎn)碼，開啟devtool: “source-map” 來進行瀏覽器測試。應用karma或mocha來做單元測試。

項目上線流程是怎樣的?

(1)流程建議

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

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

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

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

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

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

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

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

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

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

(2)簡單的可操作流程

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

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

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

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

– 搭建基于linux的本地測試機，自動完成build push功能

工程化怎么管理的?

gulp和Webpack

git常用命令

Workspace：工作區(qū)

Index / Stage：暫存區(qū)

Repository：倉庫區(qū)(或本地倉庫)

Remote：遠程倉庫

Webpack 和 gulp對比

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

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

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

Webpack打包文件太大怎么辦?

Webpack 把我們所有的文件都打包成一個 JS 文件，這樣即使你是小項目，打包后的文件也會非常大?？梢詮娜コ槐匾牟寮?，提取第三方庫，代碼壓縮，代碼分割，設置緩存幾個方面著手優(yōu)化。

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

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

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

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

精靈圖和base64如何選擇?

css精靈，用于一些小的圖標不是特別多，一個的體積也稍大，比如大于10K(這個沒有嚴格的界定)。

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

Webpack怎么引入第三方的庫?

拿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標簽

})

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