前端面試題 vue
webpack
作用：webpack是把專案當作一個整體，通過一個給定的的主檔案，webpack將從這個檔案開始找到你的專案的所有依賴檔案，使用loaders處理它們，最後打包成一個或多個瀏覽器可識別的js檔案。
一些關鍵配置項：
entry：定義入口檔案，它將是整個依賴關係的根
var baseConfig = {
entry: './src/index.js'
}
當我們需要多個入口檔案的時候，可以把entry寫成一個物件
var baseConfig = {
entry: {
main: './src/index.js'
}
}output:即使入口檔案有多個，但是隻有一個輸出配置
var baseConfig = {
output: {
filename: 'main.js',
path: path.resolve('./build')
}
}
loader：實現對不同格式的檔案的處理，比如將scss或less轉換為css，或者將typescript轉換為js，通過使用不同的Loader，我們能夠呼叫外部的指令碼或者工具，實現對不同格式檔案的處理
module: {
rules: [
{ test: /.css$/, use: 'css-loader' },
{ test: /.ts$/, use: 'ts-loader' }
]
}幾個常用loader：
-
babel-loader：讓下一代的js檔案轉換成現代瀏覽器能夠支援的js檔案
-
css-loader,style-loader：用來解析css檔案
-
file-loader：生成的檔名就是檔案內容的MD5雜湊值並會保留所引用資源的原始副檔名
plugins：plugins和loader很容易搞混，說都是外部引用有什麼區別呢？ 事實上他們是兩個完全不同的東西。這麼說loaders負責的是處理原始檔的如css、jsx，一次處理一個檔案。而plugins並不是直接操作單個檔案，它直接對整個構建過程起作用
var baseConfig = {
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
}幾個常用plugin：
-
HtmlWebpackPlugin:依據一個簡單的index.html模版，生成一個自動引用你打包後的js檔案的新index.html
-
HotModuleReplacementPlugin:它允許你在修改元件程式碼時，自動重新整理實時預覽修改後的結果
nodejs
nodejs 開發技能圖解：
image14.jpg
什麼是錯誤優先的回撥函式？
錯誤優先的回撥函式用於傳遞錯誤和資料。第一個引數始終應該是一個錯誤物件， 用於檢查程式是否發生了錯誤
如何避免回撥地獄?
回撥地獄指的是在回撥裡進行回撥，多次迴圈帶來的程式碼閱讀和理解上的困難。，比如：
getData(function(a){
getMoreData(a, function(b){
getMoreData(b, function(c){
getMoreData(c, function(d){
getMoreData(d, function(e){
...
});
});
});
});
});
解決方法：
-
將回調函式分割為獨立的函式
-
使用Promises
-
使用async/await
-
使用yield
什麼是事件迴圈
Node採用的是單執行緒的處理機制（所有的I/O請求都採用非阻塞的工作方式），至少從Node.js開發者的角度是這樣的。 而在底層，Node.js藉助libuv來作為抽象封裝層， 從而遮蔽不同作業系統的差異，Node可以藉助libuv來來實現多執行緒。下圖表示了Node和libuv的關係。
[圖片上傳失敗...(image-f4bb97-1529672710679)]
Libuv庫負責Node API的執行。它將不同的任務分配給不同的執行緒，形成一個事件迴圈， 每一個I/O都需要一個回撥函式——一旦執行完便推到事件迴圈上用於執行。
[圖片上傳失敗...(image-95372e-1529672710679)]
哪些工具可以用來保證一致性的程式碼風格？
-
JSLint
-
JSHint
-
ESLint
-
JSCS
使用NPM有哪些好處？
通過NPM，你可以安裝和管理專案的依賴，並且能夠指明依賴項的具體版本號。 對於Node應用開發而言，你可以通過package.json檔案來管理專案資訊，配置指令碼， 以及指明專案依賴的具體版本，這可以大大提高程式碼的複用。
js建立類的方法
-
建構函式法
-
原型法（prototype）
-
Json法
js實現繼承的方法
-
原型鏈繼承（prototype ）
-
特點：
-
非常純粹的繼承關係，例項是子類的例項，也是父類的例項
-
父類新增原型方法/原型屬性，子類都能訪問到
-
缺點：
-
要想為子類新增屬性和方法，必須要在子類prototype賦值之後執行，不能放到構造器中
-
無法實現多繼承
-
建立子類例項時，無法向父類建構函式傳參
-
來自原型物件的引用屬性是所有例項共享的
-
建構函式繼承（SuperType.Call(this)）
-
特點：
-
建立子類例項時，可以向父類傳遞引數
-
來自原型物件的引用屬性不是所有例項共享的
-
可以實現多繼承（call多個父類物件）
-
缺點：
-
例項並不是父類的例項，只是子類的例項
-
只能繼承父類的例項屬性和方法，不能繼承原型屬性/方法
-
無法實現函式複用，每個子類都有父類例項函式的副本，影響效能
-
組合繼承（最常用的繼承模式）
-
特點：
-
利用原型鏈實現對原型屬性和方法的繼承，而通過借用建構函式來實現對例項屬性的繼承
-
這樣，既通過在原型上定義方法實現了函式複用，又能保證每個例項都有自己的屬性
js實現多繼承
建構函式繼承或屬性複製（複製多個父類的屬性）
js函式作用域
js的函式作用域，就是一個變數在全函式裡有效．比如有個變數p1在函式最後一行定義，第一行也有效，但是值是undefined。
apply、call、bind的區別
call 和 apply 都是為了改變某個函式執行時的 context 即上下文而存在的，換句話說，就是為了改變函式體內部 this 的指向。
call 和 apply二者的作用完全一樣，只是接受引數的方式不太一樣。
bind是繫結，執行需要再次呼叫。
閉包
什麼是閉包
閉包，官方對閉包的解釋是：一個擁有許多變數和綁定了這些變數的環境的表示式（通常是一個函式），因而這些變數也是該表示式的一部分。閉包的特點：
-
作為一個函式變數的一個引用，當函式返回時，其處於啟用狀態。
-
一個閉包就是當一個函式返回時，一個沒有釋放資源的棧區。
簡單的說，Javascript允許使用內部函式---即函式定義和函式表示式位於另一個函式的函式體內。而且，這些內部函式可以訪問它們所在的外部函式中宣告的所有區域性變數、引數和宣告的其他內部函式。當其中一個這樣的內部函式在包含它們的外部函式之外被呼叫時，就會形成閉包。
-
好處
-
快取
-
面向物件中的物件
-
實現封裝，防止變數跑到外層作用域中，發生命名衝突
-
匿名自執行函式，匿名自執行函式可以減小記憶體消耗
-
壞處
-
記憶體消耗（ 通常來說，函式的活動物件會隨著執行期上下文一起銷燬，但是，由於閉包引用另外一個函式的活動物件，因此這個活動物件無法被銷燬）
-
效能問題（使用閉包時，會涉及到跨作用域訪問，每次訪問都會導致效能損失。因此在指令碼中，最好小心使用閉包，它同時會涉及到記憶體和速度問題。不過我們可以通過把跨作用域變數儲存在區域性變數中，然後直接訪問區域性變數，來減輕對執行速度的影響）
nodejs實現一個事件通知
繼承EventEmitter
如何理解node的同步和非同步
node是單執行緒的，非同步是通過一次次的迴圈事件佇列來實現的．同步則是說阻塞式的IO,這在高併發環境會是一個很大的效能問題，所以同步一般只在基礎框架的啟動時使用，用來載入配置檔案，初始化程式什麼的。
程式總是崩潰，怎樣找出問題在哪裡?
-
node --prof 檢視哪些函式呼叫次數多
-
memwatch和heapdump獲得記憶體快照進行對比，查詢記憶體溢位
效能優化方向
-
減少HTTP請求
-
使用瀏覽器快取
-
服務端啟用壓縮
-
CSS放在頁面最上面、JavaScript放在頁面最下面
-
精簡CSS和JS檔案
-
減少對DOM的操作
-
正確理解Repaint和Reflow
Repaint 和 Reflow 也就是重繪和重排，Repaint(重繪)就是在一個元素的外觀被改變，但沒有改變佈局(寬高)的情況下發生，如改變visibility、outline、背景色等等。
Reflow(重排)就是DOM的變化影響到了元素的幾何屬性（寬和高），瀏覽器會重新計算元素的幾何屬性，會使渲染樹中受到影響的部分失效，瀏覽器會驗證DOM樹上的所有其它結點的visibility屬性，這也是Reflow低效的原因。如：改變窗囗大小、改變文字大小、內容的改變、瀏覽器視窗變化，style屬性的改變等等。如果Reflow的過於頻繁，CPU使用率就會噌噌的往上漲，所以前端也就有必要知道 Repaint 和 Reflow的知識。
上面提到通過設定style屬性改變結點樣式的話，每設定一次都會導致一次reflow，所以最好通過設定class的方式；有動畫效果的元素，它的position屬性應當設為fixed或absolute，這樣不會影響其它元素的佈局；如果功能需求上不能設定position為fixed或absolute，那麼就權衡速度的平滑性。
總之，因為 Reflow 有時確實不可避免，所以只能儘可能限制Reflow的影響範圍。
-
使用JSON格式進行資料交換
-
減少Cookie傳輸
-
使用CDN加速
HTTP協議
image15.png
特點：
-
支援客戶/伺服器模式。支援基本認證和安全認證。
-
簡單快速：客戶向伺服器請求服務時，只需傳送請求方法和路徑。請求方法常用的有GET、HEAD、POST。每種方法規定了客戶與伺服器聯絡的型別不同。由於HTTP協議簡單，使得HTTP伺服器的程式規模小，因而通訊速度很快。
-
靈活：HTTP允許傳輸任意型別的資料物件。正在傳輸的型別由Content-Type加以標記。
-
HTTP 0.9和1.0使用非持續連線：限制每次連線只處理一個請求，伺服器處理完客戶的請求，並收到客戶的應答後，即斷開連線。HTTP 1.1使用持續連線(keep-alive)：不必為每個web物件建立一個新的連線，一個連線可以傳送多個物件，採用這種方式可以節省傳輸時間。
-
無狀態：HTTP協議是無狀態協議。無狀態是指協議對於事務處理沒有記憶能力。缺少狀態意味著如果後續處理需要前面的資訊，則它必須重傳，這樣可能導致每次連線傳送的資料量增大。
請求格式:
分為請求行、請求頭部、空行、請求內容，以post為例：
POST / HTTP1.1
Host:www.wrox.com
User-Agent:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022)
Content-Type:application/x-www-form-urlencoded
Content-Length:40
Connection: Keep-Alive
name=Professional%20Ajax&publisher=Wiley
第一部分：請求行，第一行明瞭是post請求，以及http1.1版本。
第二部分：請求頭部，第二行至第六行。
第三部分：空行，第七行的空行。
第四部分：請求資料，第八行。
響應格式
分為狀態行、訊息報頭、空行和響應正文
HTTP/1.1 200 OK
Date: Fri, 22 May 2009 06:07:21 GMT
Content-Type: text/html; charset=UTF-8
<html>
<head></head>
<body>
<!--body goes here-->
</body>
</html>
-
第一部分：狀態行，由HTTP協議版本號， 狀態碼， 狀態訊息 三部分組成。
-
第一行為狀態行，（HTTP/1.1）表明HTTP版本為1.1版本，狀態碼為200，狀態訊息為（ok）
-
第二部分：訊息報頭，用來說明客戶端要使用的一些附加資訊第二行和第三行為訊息報頭，Date:生成響應的日期和時間；Content-Type:指定了MIME型別的HTML(text/html),編碼型別是UTF-8
-
第三部分：空行，訊息報頭後面的空行是必須的
-
第四部分：響應正文，伺服器返回給客戶端的文字資訊
rem佈局
定義
rem（font size of the root element）是指相對於根元素的字型大小的單位。簡單的說它就是一個相對單位。看到rem大家一定會想起em單位，em（font size of the element）是指相對於父元素的字型大小的單位。它們之間其實很相似，只不過一個計算的規則是依賴根元素一個是依賴父元素計算。
flex佈局
佈局的傳統解決方案，基於盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對於那些特殊佈局非常不方便，比如，垂直居中就不容易實現。
require.js
因為自身設計的不足，JavaScript 這門語言實際上並沒有模組化這種概念與機制，所以想實現如JAVA，PHP等一些後臺語言的模組化開發，那麼我們必須藉助 requireJS 這個前端模擬模組化的外掛。
koa
koa 是由 Express 原班人馬打造的，致力於成為一個更小、更富有表現力、更健壯的 Web 框架。使用 koa 編寫 web 應用，通過組合不同的 generator，可以免除重複繁瑣的回撥函式巢狀，並極大地提升錯誤處理的效率。koa 不在核心方法中繫結任何中介軟體，它僅僅提供了一個輕量優雅的函式庫，使得編寫 Web 應用變得得心應手。
koa 1
Express的API很簡單，但是它是基於ES5的語法，要實現非同步程式碼，只有一個方法：回撥。如果非同步巢狀層次過多，程式碼寫起來就非常難看。隨著新版Node.js開始支援ES6，Express的團隊又基於ES6的generator重新編寫了下一代web框架koa 1.0，但是generator的本意並不是非同步。
koa 2
基於ES7開發了koa2，和koa 1相比，koa2完全使用Promise並配合async來實現非同步.
vue
概括視訊：網頁連結
一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。
v-if和v-show的區別
-
v-show指令是通過修改元素的displayCSS屬性讓其顯示或者隱藏
-
v-if指令是直接銷燬和重建DOM達到讓元素顯示和隱藏的效果
<keep-alive></keep-alive>的作用是什麼
用於包裹動態元件，會快取不活動的元件例項,主要用於保留元件狀態或避免重新渲染
Vue的雙向資料繫結原理是什麼？
vue.js 是採用資料劫持結合釋出者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在資料變動時釋出訊息給訂閱者，觸發相應的監聽回撥。
vue生命週期？
總共分為8個階段建立前/後，載入前/後，更新前/後，銷燬前/後
-
建立前/後： 在beforeCreated階段，vue例項的掛載元素$el和資料物件data都為undefined，還未初始化。在created階段，vue例項的資料物件data有了，$el還沒有。
-
載入前/後：在beforeMount階段，vue例項的$el和data都初始化了，但還是掛載之前為虛擬的dom節點，data.message還未替換。在mounted階段，vue例項掛載完成，data.message成功渲染。
-
更新前/後：當data變化時，會觸發beforeUpdate和updated方法。
-
銷燬前/後：在執行destroy方法後，對data的改變不會再觸發周期函式，說明此時vue例項已經解除了事件監聽以及和dom的繫結，但是dom結構依然存在
封裝 vue 元件的過程
使用Vue.extend方法建立一個元件，然後使用Vue.component方法註冊元件。子元件需要資料，可以在props中接受定義。而子元件修改好資料後，想把資料傳遞給父元件，可以採用emit方法。
關於怎麼快速學web前端開發，有什麼方法，這個問題，想必大家都已經心中有數了，打算深入瞭解這個行業的朋友，可以加下小編的web前端開發學習群（374941052）不管你是小白還是大牛，小編我都歡迎，不定期分享乾貨，包括小編自己整理的一份2018最新的web前端開發資料和0基礎入門教程，歡迎初學和進階中的小夥伴。