小猿圈web之前端面試題（內含答案）
想要找工作的朋友們，最好做充足的準備，這樣才會事半功倍；小猿圈加加最近整理了一套前端的面試題，朋友們可以做一下，然後去迎接大公司的面試。
1、JSON 的了解？
JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小。
格式：採用鍵值對，例如：{age:12, name:back}
2、new操作符具體幹了什麼呢?
（1）創建一個空對象，並且 this 變數引用該對象，同時還繼承了該函數的原型。
（2）屬性和方法被加入到 this 引用的對象中。
（3）新創建的對象由 this 所引用，並且最後隱式的返回 this 。
3、HTML5 為什麼只需要寫<!DOCTYPE html> ？
HTML5不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）。
而HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。
4、常用那幾種瀏覽器測試？有哪些內核(Layout Engine)?
(Q1) 瀏覽器：IE，Chrome，FireFox，Safari，Opera。
(Q2) 內核：Trident，Gecko，Presto，Webkit。
5、vue-router有哪幾種導航鉤子?
三種，一種是全局導航鉤子：router.beforeEach(to,from,next)，作用：跳轉前進行判斷攔截。第二種：組件內的鉤子;第三種：單獨路由獨享組件
6、怎麼定義vue-router的動態路由?怎麼獲取傳過來的動態參數?
在router目錄下的index.js文件中，對path屬性加上/:id。 使用router對象的params.id
7、mint-ui是什麼?怎麼使用?說出至少三個組件使用方法?
基於vue的前端組件庫。npm安裝，然後import樣式和js，vue.use(mintUi)全局引入。在單個組件局部引入：import {Toast} from 『mint-ui』。組件一：Toast(『登錄成功』);組件二：mint-header;組件三：mint-swiper
8、v-model是什麼?怎麼使用? vue中標籤怎麼綁定事件?
可以實現雙向綁定，指令(v-class、v-for、v-if、v-show、v-on)。vue的model層的data屬性。綁定事件：<input @click=doLog() />
9、mvvm框架是什麼?它和其它框架(jquery)的區別是什麼?哪些場景適合?
一個model+view+viewModel框架，數據模型model，viewModel連接兩個
區別：vue數據驅動，通過數據來顯示視圖層而不是節點操作。
場景：數據操作比較多的場景，更加便捷
10、XML和JSON的區別？
(1).數據體積方面。
JSON相對於XML來講，數據的體積小，傳遞的速度更快些。
(2).數據交互方面。
JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互。
(3).數據描述方面。
JSON對數據的描述性比XML較差。
(4).傳輸速度方面。
JSON的速度要遠遠快於XML。
11、TCP和UDP的區別
TCP（Transmission Control Protocol，傳輸控制協議）是基於連接的協議，也就是說，在正式收發數據前，必須和對方建立可靠的連接。一個TCP連接必須要經過三次「對話」才能建立起來
UDP（User Data Protocol，用戶數據報協議）是與TCP相對應的協議。它是面向非連接的協議，它不與對方建立連接，而是直接就把數據包發送過去！
UDP適用於一次只傳送少量數據、對可靠性要求不高的應用環境。
12、棧和隊列的區別?
棧的插入和刪除操作都是在一端進行的，而隊列的操作卻是在兩端進行的。
隊列先進先出，棧先進後出。
棧只允許在表尾一端進行插入和刪除，而隊列只允許在表尾一端進行插入，在表頭一端進行刪除
13、vue-loader是什麼?使用它的用途有哪些?
解析.vue文件的一個載入器，跟template/js/style轉換成js模塊。
用途：js可以寫es6、style樣式可以scss或less、template可以加jade等
14、HTTP狀態碼知道哪些？
100 Continue 繼續，一般在發送post請求時，已發送了http header之後服務端將返回此信息，表示確認，之後發送具體參數信息
200 OK 正常返回信息
201 Created 請求成功並且伺服器創建了新的資源
202 Accepted 伺服器已接受請求，但尚未處理
301 Moved Permanently 請求的網頁已永久移動到新位置。
302 Found 臨時性重定向。
303 See Other 臨時性重定向，且總是使用 GET 請求新的 URI。
304 Not Modified 自從上次請求後，請求的網頁未修改過。
400 Bad Request 伺服器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求。
401 Unauthorized 請求未授權。
403 Forbidden 禁止訪問。
404 Not Found 找不到如何與 URI 相匹配的資源。
500 Internal Server Error 最常見的伺服器端錯誤。
503 Service Unavailable 伺服器端暫時無法處理請求（可能是過載或維護）。
15、編寫一個方法 求一個字元串的位元組長度
假設：一個英文字元佔用一個位元組，一個中文字元佔用兩個位元組
function GetBytes(str){
var len = str.length;
var bytes = len;
for(var i=0; i<len; i++){
if (str.charCodeAt(i) > 255) bytes++;
}
return bytes;
}
alert(GetBytes("遠方,as"));
以上是小編在網上整理出來的面試題，感覺這幾道題挺重要的，朋友們可以做一下，有問題可以給小編留言哦，小猿圈加加告訴大家一個面試技巧，在面試的過程中，遇到自己的弱項，不要沉默，這樣給面試官留一個不好的印象，可以大大方方回答面試官：抱歉哈，這個問題我不太了解，但是我對xxx有所研究，把面試官帶到自己強項的地方，最後，祝各位朋友面試成功！
推薦閱讀：
