前言
本人很榮幸參加了一次騰訊大廠的一面，雖然結(jié)果不理想，但是總歸是檢測了一下自己，發(fā)現(xiàn)了自己的不足地方，以此督促自己加強學習。
本次面試共分為筆試題一個小時和面試一個小時。
一、編程題（請用es6實現(xiàn)編碼）：
1、 二分查找
給定一個 n 個元素有序的（升序）整型數(shù)組 nums 和一個目標值 target ，寫一個函數(shù)二分查找 nums 中的 target，如果目標值存在返回下標，否則返回 -1。
let arr = [1, 3, 5, 7, 9];
function search(nums, target) {
let left = 0;
let right = nums.length - 1;
while(left <= right) {
let mid = (right + left) / 2;
if (nums[mid] == target) {
return mid;
} else if (nums[mid] < target) {
left = mid + 1;
} else {
right = mid -1;
}
}
return -1;
}
console.log(search(arr, 7));
2、 編寫一個異步查詢等待結(jié)果的輪詢組件
組件具體輸入如下：
- 查詢執(zhí)行方法
- 輪詢間隔
- 超時時長
- 最多輪詢次數(shù)
組件輸出： - 返回一個promise對象
- 查詢方法執(zhí)行無異常，則輪詢結(jié)束，返回查詢結(jié)果
解答：
// vue代碼
data() {
return {
data: {}, // 請求結(jié)果
remainTime: 0, // 剩余限制時長
start: 0, // 開始時間
end: 0, // 請求得到數(shù)據(jù)的時間
}
}
mounted () {
// 請求之前計時 start
this.start = Math.floor(new Date().getTime()/1000);
this.query(50, 2, 10);
},
methods: {
// 只要輪詢次數(shù)和最大限制時長任何一個達到閾值 就 停止輪詢
query(num, interval, limitTime=60) { // 參數(shù)num：輪詢次數(shù) interval：定時器時間(s) l imitTime：最大限制時長(s)
let timer;
if (num > 1) {
return new Promise((resolve, reject) => {
let postParams = {
id: this.$route.params.id
}
Api.getArticleOne(postParams).then(res => {
this.data = res.data.data.content; // 這個只是接口返回的數(shù)據(jù)結(jié)構(gòu)
this.end = Math.floor(new Date().getTime()/1000);
}, err => {
reject(err);
}).catch(err => {
console.log(err)
});
if (this.end !== 0) {
// 如果拿到數(shù)據(jù)了，就用當前的 剩余限制時長 - （結(jié)束時間 - 開始時間）
this.remainTime = limitTime - (this.end - this.start);
} else {
// 如果還沒拿到接口數(shù)據(jù) 這個時候 end就為0 需要繼續(xù) 輪詢 這個時候的剩余時間還是 傳過來的 限制時長
this.remainTime = limitTime;
}
if (this.remainTime <= 0) { // 如果剩余時間小于等于 0 或者 循環(huán)次數(shù) 為 1 就結(jié)束定時器
clearTimeout(timer);
return;
} else {
// 輪詢一次 num就減少一次
num--;
this.remainTime = this.remainTime - interval; // 當前剩余時長 = 當前剩余時長 - 定時器
timer = setTimeout(() => { this.query(num, interval, this.remainTime)}, interval * 1000);
}
}).catch(err => {
console.log(err)
})
} else {
clearTimeout(timer);
return;
}
},
}
3、 邏輯題
共有60塊磚，60人搬，男搬5，女搬3，兩個小孩搬1塊，一次搬完，需要小孩、男人、女人各多少人，有幾種組合方案？
解答：
function solution() {
let x, y, z;
for(x =1; x < 12; x++) {
for(y = 1; y < 20; y++) {
z = 60 - x - y;
if (z%2 == 0) {
if (5*x + y*3 + z/2 == 60) {
console.log(x, y, z, '搬磚組合'); // 5 3 52
}
}
}
}
}
solution();
答案：只有一種方案：男人：5 ；女人： 3 ；小孩：52
二、問答題
1-5題
1. 請寫出下面代碼輸出結(jié)果以及原因
var myname = "小明";
function showName(){
console.log(myname); // undefined
if(0){ var myname = "小紅" }
console.log(myname); // undefined
}
showName();
2. 請寫出下面代碼輸出結(jié)果以及原因
function letTest() {
let x = 1;
if (true) {
let x = 2;
console.log(x); // 2
}
console.log(x); // 1
}
letTest();
3. 請寫出下面代碼輸出結(jié)果以及原因？并且用箭頭函數(shù)實現(xiàn)
function bar() {
console.log(myName)
}
function foo() {
var myName = "騰訊1"
bar()
}
var myName = "騰訊2"
foo()；// 騰訊2
箭頭函數(shù)：var foo = () => () => {
console.log(myName);
}
4. 請寫出下面代碼輸出結(jié)果以及原因
var myObj = {
name : "騰訊1",
showThis: function(){
console.log(this);
var self = this;
function bar(){
self.name = "騰訊2";
}
bar()
}
}
myObj.showThis(); // myObject對象
console.log(myObj.name); // 騰訊2
console.log(window.name); // undefined
5. 請寫出以下this指向情況：
// 情況1
function foo() {
console.log(this.a) //1
}
var a = 1
foo();
this指向window全局
// 情況2
function fn(){
console.log(this);
}
var obj = {fn: fn};
obj.fn(); // this => obj this指向obj對象
// 情況3
function CreateJsPerson(name,age){
// this是當前類的一個實例p1
this.name=name; // => p1.name = name
this.age=age; // => p1.age = age
}
var p1=new CreateJsPerson("尹華芝",48);
// 情況4
function add(c, d){
return this.a + this.b + c + d;
}
var o = {a: 1, b: 3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 this指向o對象
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34 this指向o對象
// 情況5
<button id="btn1">箭頭函數(shù)this</button>
<script type="text/javascript">
let btn1 = document.getElementById('btn1');
let obj = {
name: 'kobe',
age: 39,
getName: function () {
btn1.onclick = () => {
console.log(this);//obj
};
}
};
obj.getName();
this指向obj，因為箭頭函數(shù)的this是在外層函數(shù)定義的時候就指定了
</script>
6. 說一說你最近了解的你覺得在前端比較新的技術(shù)，并寫寫你的見解
(開放性題)
node V8引擎，異步I/O，事件機制
Typescript 對變量類型的指定，解除javascript的弱類型的詬病
服務(wù)端渲染（vue-ssr、nuxt、next）：利于seo，更快時間到達，需要服務(wù)器支持，加重服務(wù)器負載。
7. webpack相關(guān)
webpac默認的入口文件是index.js
默認輸出目錄是dist
如何修改webpack的默認輸出目錄。需要用到webpack命令是webpack
Webpack 常見名詞解釋，請解釋下面名詞：
entry 項目入口
module 模塊，對于webpack來說，所有的資源(.js、.css、.png)都是module
chunk 打包過程中被操作的模塊文件叫做chunk
bundle 最后打包后的文件，最終輸出的chunk在用戶端，被稱之為bundle；一般一個chunk對應(yīng)一個bundle，只有在配置了sourcemap時，才會出現(xiàn)一個chunk對應(yīng)多個bundle的情況；
loader 它就是一個轉(zhuǎn)換器, loader讓webpack能夠處理不同的文件。loader可以將所有類型的文件轉(zhuǎn)換為webpack能夠處理的有效模塊，然后利用webpack的打包能力，對他們進行處理。
plugins 它就是一個擴展器，它豐富了wepack本身，針對是loader結(jié)束后，webpack打包的整個過程，它并不直接操作文件，而是基于事件機制工作，會監(jiān)聽webpack打包過程中的某些節(jié)點，執(zhí)行廣泛的任務(wù)。
8. Node 如何進行緩存
強制緩存和協(xié)商緩存,跟瀏覽器緩存差不多吧
9. 瀏覽器的js循環(huán)機制和nodejs循環(huán)機制的差別？
[圖片上傳失敗...(image-22e8bf-1586703310728)]
宏任務(wù)：setTimeout，setInterval，
微任務(wù)：promise的回調(diào)
js的事件循環(huán)機制比較簡單
先執(zhí)行主線程代碼，執(zhí)行完畢后，清空微任務(wù)隊列，然后取出一個宏任務(wù)，然后清空微任務(wù)隊列，如此循環(huán)
Node的事件循環(huán)比較復(fù)雜
Node的事件循環(huán)分為六個階段
(1)timers計時器 執(zhí)行setTimeout、setInterval的回調(diào)函數(shù)
(2)I/0 callbacks 執(zhí)行I/O callback被延遲到下一階段執(zhí)行；
(3)idle, prepare 隊列的移動，僅內(nèi)部使用
(4)poll 輪詢階段 這個階段是用來執(zhí)行和 IO 操作有關(guān)的回調(diào)的，Node會向操作系統(tǒng)詢問是否有新的 IO 事件已經(jīng)觸發(fā)，然后會執(zhí)行響應(yīng)的事件回調(diào)。幾乎所有除了 定時器事件、 setImmediate() 和 close callbacks 之外操作都會在這個階段執(zhí)行。
(5)check 這個階段會執(zhí)行 setImmediate() 設(shè)置的任務(wù)
(6)close 執(zhí)行close事件的callback，例如socket.on("close",func) 如果一個 socket 或 handle(句柄) 突然被關(guān)閉了，例如通過 socket.destroy() 關(guān)閉了，close事件將會在這個階段發(fā)出。
10. VUE響應(yīng)式原理解釋
監(jiān)聽器 Observer：用來劫持并通過Object.defineProperty監(jiān)聽所有屬性（轉(zhuǎn)變成setter/getter形式），如果屬性發(fā)生變化，就通知訂閱者。
訂閱器 Dep：用來收集訂閱者，對監(jiān)聽器 Observer 和 訂閱者 Watcher 進行統(tǒng)一管理。
訂閱者 Watcher：監(jiān)聽器Observer和解析器Compile之間通信的橋梁；如果收到屬性的變化通知，就會執(zhí)行相應(yīng)的方法，從而更新視圖。
解析器 Compile：可以解析每個節(jié)點的相關(guān)指令，對模板數(shù)據(jù)和訂閱器進行初始化。
主要做的事情是:
- 在自身實例化時往屬性
訂閱器(dep)里面添加自己。 - 自身有一個update()方法。
- 待屬性變動dep.notice()通知時，能調(diào)用自身的update()方法，并觸發(fā)
解析器(Compile)中綁定的回調(diào)。
總結(jié)：vue.js 是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。
Vue3.0的Proxy相比于defineProperty的優(yōu)勢
Object.defineProperty() 的問題主要有三個：
- 不能監(jiān)聽數(shù)組的變化
- 必須遍歷對象的每個屬性
- 必須深層遍歷嵌套的對象
Proxy 在 ES2015 規(guī)范中被正式加入，它有以下幾個特點：
針對對象： 針對整個對象，而不是對象的某個屬性，所以也就不需要對 keys 進行遍歷。這解決了上述 Object.defineProperty() 第二個問題。
支持數(shù)組： Proxy 不需要對數(shù)組的方法進行重載，省去了眾多 hack，減少代碼量等于減少了維護成本，而且標準的就是最好的。
11. HTTP/2、https 有什么新特性
HTTP/2：
HTTP/2 更簡單,高效,強大。
它在傳輸層解決了以前我們HTTP1.x中一直存在的問題。使用它可以優(yōu)化我們的應(yīng)用。HTTP/2 的首要目標是通過完全的請求，響應(yīng)多路復(fù)用，頭部的壓縮頭部域來減小頭部的體積，添加了請求優(yōu)先級，服務(wù)端推送。為了支持這些特性,他需要大量的協(xié)議增加頭部字段來支持，例如新的流量控制，差錯處理，升級機制.而這些是每個web開發(fā)者都應(yīng)該在他們的應(yīng)用中用到的。
HTTP/2并沒有在應(yīng)用中改變HTTP的語義，而是通過在客戶端和服務(wù)端傳輸?shù)臄?shù)據(jù)格式(frame)和傳輸.它通過在新的二進制幀層控制整個過程以及隱藏復(fù)雜性，而這不需要改變原來有的東西就可以實現(xiàn)。
https：
一、HTTPS協(xié)議需要到證書頒發(fā)機構(gòu)CA申請證書，HTTP不用申請證書；
二、HTTP是超文本傳輸協(xié)議，屬于應(yīng)用層信息傳輸，HTTPS 則是具有SSL加密傳安全性傳輸協(xié)議，對數(shù)據(jù)的傳輸進行加密，相當于HTTP的升級版；
三、HTTP和HTTPS使用的是完全不同的連接方式，用的端口也不一樣，前者是80，后者是443。
四、HTTP的連接很簡單，是無狀態(tài)的；HTTPS協(xié)議是由SSL+HTTP協(xié)議構(gòu)建的可進行加密傳輸、身份認證的網(wǎng)絡(luò)協(xié)議，比HTTP協(xié)議安全。
12. TCP/ip5層模型，并且解釋每層的作用
TCP/IP“五層模型”分為：物理層、互聯(lián)網(wǎng)層、網(wǎng)絡(luò)層(IP層)、傳輸層(TCP/UDP層)、應(yīng)用層。
各層網(wǎng)絡(luò)協(xié)議
應(yīng)用層(Application)： 應(yīng)用程序網(wǎng)關(guān)（application gateway）
Telnet: 遠程登錄 （在應(yīng)用層連接兩部分應(yīng)用程序）
FTP（File Transfer Protocol）：文件傳輸協(xié)議
HTTP（Hyper Text Transfer Protocol）：超文本傳輸協(xié)議
SMTP（Simple Mail Transter Protocol）：簡單郵件傳輸協(xié)議
POP3（Post Office Ptotocol）：郵局協(xié)議
SNMP（Simple Network Mangement Protocol）：簡單網(wǎng)絡(luò)管理協(xié)議
DNS（Domain Name System）：域名系統(tǒng)
傳輸層（Transport）： 傳輸網(wǎng)關(guān)（transport gateway）
TCP（Transmission Control Potocol)：傳輸控制協(xié)議 （在傳輸層連接兩個網(wǎng)絡(luò)）
UDP（User Data Potocol）：用戶數(shù)據(jù)協(xié)議
網(wǎng)絡(luò)層（Internet）： 多協(xié)議路由器（multiprotocol router）
IP（Internet Protocol）：網(wǎng)絡(luò)協(xié)議 （在異構(gòu)網(wǎng)絡(luò)間轉(zhuǎn)發(fā)分組）
ARP（Address Resolution Protocol）：地址解析協(xié)議
RARP（Reverse Address Resolution Protocol) ：逆地址解析協(xié)議
ICMP（Internet Control Message Protocol）：因特網(wǎng)控制消息協(xié)議
IGMP（Internet Group Manage Protocol）：因特網(wǎng)組管理協(xié)議
BOOTP （Bootstrap）：可選安全啟動協(xié)議
互聯(lián)網(wǎng)層 即 數(shù)據(jù)鏈路層（Data Link）： 網(wǎng)橋（bridge）交換機（switcher）
HDLC（High Data Link Control）：高級數(shù)據(jù)鏈路控制 （在LAN之間存儲-轉(zhuǎn)發(fā)數(shù)據(jù)鏈路針）
SLIP（Serial Line IP）：串行線路IP
PPP（Point-to-Point Protocol）：點到點協(xié)議
802.2等
物理層（Physical）： 中繼器（repeater） 集線器（hub）
無 （放大或再生弱的信號，在兩個電纜段之間復(fù)制每一個比特）
應(yīng)用層:應(yīng)用程序間溝通的層，如簡單電子郵件傳輸（SMTP）、文件傳輸協(xié)議（FTP）、網(wǎng)絡(luò)遠程訪問協(xié)議（Telnet）等。
傳輸層：在此層中，它提供了節(jié)點間的數(shù)據(jù)傳送服務(wù)，如傳輸控制協(xié)議（TCP）、用戶數(shù)據(jù)報協(xié)議（UDP）等，TCP和UDP給數(shù)據(jù)包加入傳輸數(shù)據(jù)并把它傳輸?shù)较乱粚又?，這一層負責傳送數(shù)據(jù)，并且確定數(shù)據(jù)已被送達并接收。
數(shù)據(jù)鏈路層： O S I 模型的第二層，它控制網(wǎng)絡(luò)層與物理層之間的通信。它的主要功能是如何在不可靠的物理線路上進行數(shù)據(jù)的可靠傳遞。為了保證傳輸，從網(wǎng)絡(luò)層接收到的數(shù)據(jù)被分割成特定的可被物理層傳輸?shù)膸?。幀是用來移動?shù)據(jù)的結(jié)構(gòu)包，它不僅包括原始數(shù)據(jù)，還包括發(fā)送方和接收方的網(wǎng)絡(luò)地址以及糾錯和控制信息。其中的地址確定了幀將發(fā)送到何處，而糾錯和控制信息則確保幀無差錯到達。
數(shù)據(jù)鏈路層的功能獨立于網(wǎng)絡(luò)和它的節(jié)點和所采用的物理層類型，它也不關(guān)心是否正在運行 Wo r d 、E x c e l 或使用I n t e r n e t 。有一些連接設(shè)備，如交換機，由于它們要對幀解碼并使用幀信息將數(shù)據(jù)發(fā)送到正確的接收方，所以它們是工作在數(shù)據(jù)鏈路層的。
網(wǎng)絡(luò)層： O S I 模型的第三層，其主要功能是將網(wǎng)絡(luò)地址翻譯成對應(yīng)的物理地址，并決定如何將數(shù)據(jù)從發(fā)送方路由到接收方。
網(wǎng)絡(luò)層通過綜合考慮發(fā)送優(yōu)先權(quán)、網(wǎng)絡(luò)擁塞程度、服務(wù)質(zhì)量以及可選路由的花費來決定從一個網(wǎng)絡(luò)中節(jié)點A 到另一個網(wǎng)絡(luò)中節(jié)點B 的最佳路徑。由于網(wǎng)絡(luò)層處理路由，而路由器因為即連接網(wǎng)絡(luò)各段，并智能指導數(shù)據(jù)傳送，屬于網(wǎng)絡(luò)層。在網(wǎng)絡(luò)中，“路由”是基于編址方案、使用模式以及可達性來指引數(shù)據(jù)的發(fā)送。
物理層： O S I 模型的最低層或第一層，該層包括物理連網(wǎng)媒介，如電纜連線連接器。物理層的協(xié)議產(chǎn)生并檢測電壓以便發(fā)送和接收攜帶數(shù)據(jù)的信號。在你的桌面P C 上插入網(wǎng)絡(luò)接口卡，你就建立了計算機連網(wǎng)的基礎(chǔ)。換言之，你提供了一個物理層。盡管物理層不提供糾錯服務(wù)，但它能夠設(shè)定數(shù)據(jù)傳輸速率并監(jiān)測數(shù)據(jù)出錯率。網(wǎng)絡(luò)物理問題，如電線斷開，將影響物理層。
13. 從前端的角度，如何系統(tǒng)性的提升大型 Web 應(yīng)用的可用性？可從你認為的可用性維度、監(jiān)控手段和改善措施等方面闡述。
一、前端用戶性意義與現(xiàn)狀
什么是前端可用性？
前端可用性是從用戶的角度出發(fā)，檢測整個系統(tǒng)的可用性，系統(tǒng)任何一個環(huán)節(jié)的缺失都會對體驗造成影響。
前端可用性現(xiàn)狀
- 頁面功能和交互復(fù)雜度增加
- 前端功能測試局限性
- 各種前端渲染框架的引入
- 運營線上問題反饋
前端可用性建設(shè)意義
前端可用性評估指標
- 關(guān)鍵指標白屏時間6s
前端可用性保障系統(tǒng)設(shè)計
可用性系統(tǒng)要求：實時性， 全面性
1. 數(shù)據(jù)采集：請求異常、資源異常、渲染異常、交互異常。
請求狀態(tài)嗎異常，請求超時，返回數(shù)據(jù)格式錯誤。（AJAX監(jiān)控）
資源加載失敗（CDN監(jiān)控）
渲染異常（DOM檢查）
交互異常（JS錯誤監(jiān)控）
2. 監(jiān)控預(yù)警：實時監(jiān)控、閾值報警。
海量數(shù)據(jù)存儲讀取、可視化數(shù)據(jù)展現(xiàn)、多維度數(shù)據(jù)查詢。
設(shè)定合理閾值、郵件短信報警
3. 兜底容災(zāi)：容錯機制、快速降級。
異步渲染機制出錯跳轉(zhuǎn)同步頁、友好的錯誤用戶提示。
重要機制添加降級開關(guān)、迅速（3min內(nèi)）完成降級
前端可用性優(yōu)化思路
前端可用性展望
面試總結(jié)
主要就是結(jié)合簡歷上的一個一個詳細地問，只要簡歷上寫了就會問到原理性的東西，然后就是問了項目中你負責哪塊，前端規(guī)劃之類的。
然后針對前端重復(fù)頁面的編寫探討了一下，面試官小姐姐給我解答了，他們后臺有自己的組件庫，純的組件，前端要用，就直接引用下載，開始不以為然，到下來自己去查了一下，大概就是npm發(fā)包的那種吧。
小感慨：關(guān)于這次面試的總結(jié)，我想我還是加強寫博客吧，就像有人說前端兩三年有一個瓶頸期，就是什么都會一點，但是歸根到底還是基礎(chǔ)不夠牢固，而尤其是針對我這種非科班的，想很多計算機原理都還是一知半解，瀏覽器緩存，服務(wù)器相關(guān)還是懂的少，主要就是工作中為涉獵，這也是死我為什么要搞一個自己的博客網(wǎng)站(https://www.jscwwd.com)的原因。然后我自己也買了三本書“深入淺出nodejs”、"學習Javascript的數(shù)據(jù)結(jié)構(gòu)與算法"、“深入理解Typescript”，今年就準備把基礎(chǔ)重新過一遍，期待來年與騰訊等大廠的會面！
以上就是本人這次一面的筆試題，當時答得不好，然后也沒了后來，然后自己下來找了一些資料總結(jié)了一下，希望對大家有用！歡迎對題目中有其他答案的，歡迎交流或在下方評論！
個人博客網(wǎng)站文章地址https://www.jscwwd.com/article/5e92d61b2c6a7805a4569f7a
