我給面試題，你給答案，可好？

時間 2019-12-09

原文原文鏈接

越挫越勇，面試中反應自身的不足之處，喜歡被虐的感受。好期待進入把我虐的最慘的那家公司，由於我相信能夠學到更多的知識。期待！期待！期待！css

如下是我在面試中，遇到的一些面試題，歡迎你們提供答案，一塊兒學習呀。html

問題1：https與http的區別？

//答案：
一、HTTPS更安全
二、HTTPS須要申請證書
三、端口不一樣：http(80端口)，https(443端口)
四、狀態不一樣
   http：鏈接簡單，無狀態
   https：由ssl+http構建、加密傳輸、身份認證的網絡協議
HTTPS是http的升級版
對安全性很高的網絡協議，採用HTTPS協議，例如：支付寶
複製代碼

問題2：瀏覽器的內核？

一、Trident：IE內核 （css前綴：-ms-）
二、Gecko：FireFox內核（css前綴：-moz-）
三、Presto：Opera內核（css前綴：-o-）
四、Webkit：Safari、Chrome內核（css前綴：-webkit-）
五、Blink：Chrome內核（css前綴：-webkit-）
複製代碼

問題3：ajax爲何有局部刷新功能？前端
問題4：this的指向？vue

this的指向，在函數定義時肯定不了，
只有在函數執行時才能肯定this的指向。
this的最終指向的是那個調用他的對象（指向上一級對象）。
複製代碼

問題5：css樣式的優先級怎麼比較？

優先級：內聯-》ID選擇器-》僞類=屬性選擇器-》類選擇器-》元素選擇器(p)-》通用選擇器(*)-》繼承的樣式

權重：內聯樣式(1000)-》ID選擇器(100)-》class選擇器(10)-》標籤選擇器(1)

優先級同樣的：
僞類=屬性選擇器=類選擇器
複製代碼

問題6：ES6和ES7的區別？web
問題7：Vue的過濾器的使用？面試
問題8：Vue組件的使用，請說明？ajax

面試題設計模式

技術面：數組

問題1：如何作優化？項目中作了哪些優化？（頁面性能優化）

可參考一下連接：
一、https://www.cnblogs.com/coober/p/8078847.html  
二、https://blog.csdn.net/xustart7720/article/details/79960591
複製代碼

問題2：用戶輸入URL的整個流程？請說明？

答案可參考：
https://www.cnblogs.com/daijinxue/p/6640153.html 

//答案：
一、瀏覽器的地址欄輸入URL地址並按下回車；
二、瀏覽器查找當前URL是否存在緩存，並比較緩存是否過時；
三、DNS解析URL對應的IP；
四、根據IP創建TCP鏈接（三次握手）；
五、http發起請求；
六、服務器處理請求，瀏覽器接受http響應；
七、渲染頁面，構建DOM樹；
八、關閉TCP鏈接（四次揮手）
複製代碼

人事面：瀏覽器

問題1：你從參與工做至今，有哪些收穫？
問題2：若是一個剛畢業的新人，你要怎麼帶她/他？
問題3：你經歷了哪些困難的事，讓你印象深入的？
問題4：若是讓你原公司的上司對你評價，你以爲他會怎麼評價你？優勢和缺點？

面試題

問題1：數據脫敏怎麼實現？例如187****7851
問題2：報文傳輸時，前端怎麼作加密操做？

可參考的連接：
https://blog.csdn.net/guxingsheng/article/details/84451430
複製代碼

問題3：Vue單頁面的應用？
問題4：移動端有哪幾種適配方式？

一、vh和vw 【面試官給的答案】
二、rem方式
三、經過媒體查詢方式：css的media queries
四、爲天貓爲表明：flex彈性佈局
五、以淘寶首頁爲表明的：rem+viewport縮放

可參考： A、https://blog.csdn.net/chenjuan1993/article/details/81710022
B、https://blog.csdn.net/chenjuan1993/article/details/81710022
複製代碼

問題5：Vue的父子組件怎麼傳值？父組件傳給子組件？子組件傳給父組件？

一、父組件與子組件傳值：
	父組件經過標籤上面定義傳值
	子組件經過props接受數據
二、子組件向父組件傳遞數據：
	子組件經過$emit方法傳遞參數
複製代碼

問題:6：watch和computed的區別？

同：均可以觀察頁面的數據變化
異：
	computed：對原數據進行改造輸出。例如：格式的編輯、大小寫的轉換、順序重排、添加符號等。
	watch：監控數據。應用：天氣預報的穿衣指數。
複製代碼

面試題

問題1：document.cokie是什麼數據類型？

答案：字符串
複製代碼

問題2：localStorage、sessionStorage和cookie三者的區別？

同：都是保存在瀏覽器端，且同源。
異：
	一、cookie數據始終在同源http請求中攜帶(即便不須要)，即在瀏覽器和服務器之間來回傳遞；sessionStorage和localStorage不會自動把數據發送給服務器，僅在本地保存；cookie數據還有路勁(path)的概念，能夠限制cookie只屬於某個路勁下。
	二、存儲大小限制的不一樣。cookie數據不能超過4K，同時由於每次http請求都會攜帶cookie，因此cookie只適合保存很小的數據，如：會話標識。sessionStorage和localStorage雖有大小限制，可是比cookie大，可達5M或更大。
	三、數據有效期不一樣。sessionStorage：僅在當前瀏覽器關閉以前有效；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，所以用做持久數據；cookie：只在設置的cookie過時時間以前有效，即便窗口或瀏覽器關閉。
	四、做用域不一樣。sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；localStorage在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。

參考的連接：https://www.cnblogs.com/zr123/p/8086525.html
複製代碼

問題3：要遍歷頁面中全部父元素爲p標籤的img標籤，有哪幾種方式？你會選擇哪一種方式？爲何？（講一下思路）
問題4：position有哪幾種值？

一、absolute：生成絕對定位的元素。相對於static定位之外的第一個父元素進行定位；
二、fixed：生成絕對定位的元素。相對於瀏覽器窗口進行定位；
三、relative：生成相對定位的元素。相對於其正常位置進行定位；
四、static：默認值。沒有定位，元素出如今正常的流中。
五、inherit：規定應該從父元素繼承position屬性的值。
複製代碼

問題5：position的值absolute、relative和fixed的區別？

答案：見以上的問題4
複製代碼

問題6：實現一個塊級元素水平垂直居中，有幾種方法？

法1：絕對定位 + margin負值使用
	
法2：絕對定位 + transform屬性

法3：flex佈局

法4：display:table來模擬表格形式，vertical-align:middle

參考連接：https://www.cnblogs.com/TigerZhang-home/p/7085503.html

複製代碼

問題7：一個變量a，被賦值成字符串和對象，有什麼區別？

答案：基本數據類型 和 引用數據類型
複製代碼

問題8：js的原型和原型鏈，有什麼區別？

原型鏈實現了繼承。
原型鏈：每一個繼承父函數的子函數的對象都包含一個內部屬性_proto_。該屬性包含一個指針，指向父函數的prototype，若父函數的原型對象的_proto_屬性爲再上一層函數，在此過程當中就造成了原型鏈。
原型：在JavaScript中，一共有兩種類型的值，原始值和對象值，每一個對象都有一個內部屬性[[prototype]]，咱們稱之爲原型。
複製代碼

問題9：js深拷貝，講一下原理？
問題10：js的call、apply和bind三者的區別？

同：
	一、三者都是用來改變函數的this對象的指向的
	二、第一個參數都是this要指向的對象
	三、均可以利用後續參數傳值
異：
	一、call和apply都是對函數的直接調用，而bind返回的還是一個函數，因此還須要()來進行調用，例：xw.call(xh)、xw.apply(xh)、xw.bind(xh)()
	二、傳參不同。call是列表式傳法，apply是數組形式的傳法，bind的傳參與call一致，可是須要先調用再傳參。例：xw.call(xh,'參數1','參數2')、xw.apply(xh,['參數1','參數2'])、xw.bind(xh)('參數1','參數2')

複製代碼

問題11：請解釋一下變量提高和暫時性死區？

變量提高：變量在聲明以前使用，值爲undefined。
暫時性死區：在代碼塊內，使用let命令聲明變量以前，該變量都是不可用的。
複製代碼

問題12：看如下代碼，說出輸出什麼結果？

let a = [
    {
       index:'1',
       name:'apple'
    },
    {
       index:'2',
       name:'apple1'
    }
];
a.forEach(item=>{
     item = {index:'0',name:'banana'};
});
console.log(a);
複製代碼

問題13：看如下2個代碼段，請說一下都輸出了什麼？並說明。

//代碼1：
var aa = 1;
function funA(){
   console.log(aa);
   var aa = 2;
   console.log(aa);
}
funA();
console.log(aa);

//代碼2：
let bb = 1;
function funB(){
   console.log(bb);
   let bb = 2;
   console.log(bb);
}
funB();
console.log(bb);
複製代碼

問題14：講解一下棧和堆的區別？
問題15：Java的23種設計模式？

整體來講設計模式分爲三大類：

建立型模式，共五種：工廠方法模式、抽象工廠模式、單例模式、建造者模式、原型模式。

結構型模式，共七種：適配器模式、裝飾器模式、代理模式、外觀模式、橋接模式、組合模式、享元模式。

行爲型模式，共十一種：策略模式、模板方法模式、觀察者模式、迭代子模式、責任鏈模式、命令模式、備忘錄模式、狀態模式、訪問者模式、中介者模式、解釋器模式。

其實還有兩類：併發型模式和線程池模式。

參考連接：https://www.cnblogs.com/wangzhongqiu/p/6245820.html
複製代碼

問題16：vue的生命週期？並講解每一個生命週期的做用？通常用到哪幾個生命週期？更新週期，vue的執行原理是什麼？
問題17：vue的生命週期中的銷燬，實際開發中通常會應用到哪裏？

//答案提示：關閉定時器、清數據
複製代碼

問題18：vue的雙向數據綁定的原理是什麼？
問題19：用戶輸入URL後，都發生了什麼？請介紹？

答案可參考：
https://www.cnblogs.com/daijinxue/p/6640153.html 

//答案：
一、瀏覽器的地址欄輸入URL地址並按下回車；
二、瀏覽器查找當前URL是否存在緩存，並比較緩存是否過時；
三、DNS解析URL對應的IP；
四、根據IP創建TCP鏈接（三次握手）；
五、http發起請求；
六、服務器處理請求，瀏覽器接受http響應；
七、渲染頁面，構建DOM樹；
八、關閉TCP鏈接（四次揮手）
複製代碼

問題20：DNS域名解析的原理是什麼？

DNS域名解析：將域名還原爲IP地址的過程。
過程：
	一、首先瀏覽器先檢查本地hosts文件是否有這個網址映射關係，如有就調用這個IP地址映射，完成域名解析；
	二、若沒找到則會查找本地DNS解析器緩存，若是查找到則返回；
	三、若仍是沒找到則會查找本地DNS服務器，若查找到則返回；
	四、最後迭代查詢，按根域服務器-》頂級域,.cn-》第二層域,hb.cn-》子域，www.hb.cn的順序找到IP地址
複製代碼

問題21：http的狀態嗎，都表示什麼？200/304/403/404/500/503請講解這幾個狀態碼？

200：OK 服務器成功處理了請求
301：重定向，請求的URL已移走
304：未修改，客戶的緩存資源是最新的，要客戶端使用緩存
403：禁止，請求被服務器拒絕了
404：未找到資源
500：內部服務器錯誤
503：服務不可用
504：網關超時

參考連接：https://blog.csdn.net/allen_a/article/details/50715957
複製代碼

問題22：看如下2段代碼，輸出什麼？並說明。

//代碼1：
for(var i=0;i<5;i++){
   setTimeout(function(){
       console.log(i);
   },1000);
}

//代碼2：
for(let j=0;j<10;j++){
   setTimeout(function(){
       console.log(j);
   },1000);
}
複製代碼