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