2020年4月大廠騰訊前端面經分享

時間 2020-04-13

標籤 2020年 4月大廠騰訊端面分享欄目騰訊简体版

原文原文鏈接

前言

本人很榮幸參加了一次騰訊大廠的一面，雖然結果不理想，可是總歸是檢測了一下本身，發現了本身的不足地方，以此督促本身增強學習。
本次面試共分爲筆試題一個小時和麪試一個小時。javascript

1、編程題（請用es6實現編碼）：

一、二分查找

給定一個 n 個元素有序的（升序）整型數組 nums 和一個目標值 target ，寫一個函數二分查找 nums 中的 target，若是目標值存在返回下標，不然返回 -1。css

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));

二、編寫一個異步查詢等待結果的輪詢組件

組件具體輸入以下：前端

查詢執行方法
輪詢間隔
超時時長
最多輪詢次數
組件輸出：
返回一個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;
      }
    },
  }

三、邏輯題

共有60塊磚，60人搬，男搬5，女搬3，兩個小孩搬1塊，一次搬完，須要小孩、男人、女人各多少人，有幾種組合方案？
解答：vue

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 ；小孩：52java

2、問答題

1-5題

1. 請寫出下面代碼輸出結果以及緣由node

var myname = "小明";
function showName(){ 
  console.log(myname); // undefined
  if(0){ var myname = "小紅" }
  console.log(myname); // undefined 
}
showName();

2. 請寫出下面代碼輸出結果以及緣由webpack

function letTest() {
  let x = 1; 
  if (true) { 
    let x = 2; 
    console.log(x);  // 2
  }
  console.log(x); // 1
}
letTest();

3. 請寫出下面代碼輸出結果以及緣由？而且用箭頭函數實現es6

function bar() {
console.log(myName)
}
function foo() {
  var myName = "騰訊1"
  bar()
}
var myName = "騰訊2"
foo()；// 騰訊2

箭頭函數：var foo = () => () => {
console.log(myName);
}web

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/二、https 有什麼新特性

HTTP/2：

HTTP/2 更簡單,高效,強大。
它在傳輸層解決了之前咱們HTTP1.x中一直存在的問題。使用它能夠優化咱們的應用。HTTP/2 的首要目標是經過徹底的請求，響應多路複用，頭部的壓縮頭部域來減少頭部的體積，添加了請求優先級，服務端推送。爲了支持這些特性,他須要大量的協議增長頭部字段來支持，例如新的流量控制，差錯處理，升級機制.而這些是每一個web開發者都應該在他們的應用中用到的。

HTTP/2並無在應用中改變HTTP的語義，而是經過在客戶端和服務端傳輸的數據格式(frame)和傳輸.它經過在新的二進制幀層控制整個過程以及隱藏複雜性，而這不須要改變原來有的東西就能夠實現。

詳情參考=>

https：

1、HTTPS協議須要到證書頒發機構CA申請證書，HTTP不用申請證書；

2、HTTP是超文本傳輸協議，屬於應用層信息傳輸，HTTPS 則是具備SSL加密傳安全性傳輸協議，對數據的傳輸進行加密，至關於HTTP的升級版；

3、HTTP和HTTPS使用的是徹底不一樣的鏈接方式，用的端口也不同，前者是80，後者是443。

4、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 應用的可用性？可從你認爲的可用性維度、監控手段和改善措施等方面闡述。

1、前端用戶性意義與現狀

什麼是前端可用性？

前端可用性是從用戶的角度出發，檢測整個系統的可用性，系統任何一個環節的缺失都會對體驗形成影響。

前端可用性現狀

頁面功能和交互複雜度增長
前端功能測試侷限性
各類前端渲染框架的引入
運營線上問題反饋

前端可用性建設意義

前端可用性評估指標

關鍵指標白屏時間6s

前端可用性保障系統設計

可用性系統要求：實時性，全面性

1. 數據採集：請求異常、資源異常、渲染異常、交互異常。

請求狀態嗎異常，請求超時，返回數據格式錯誤。（AJAX監控）

資源加載失敗（CDN監控）

渲染異常（DOM檢查）

交互異常（JS錯誤監控）

2. 監控預警：實時監控、閾值報警。

海量數據存儲讀取、可視化數據展示、多維度數據查詢。

設定合理閾值、郵件短信報警

3. 兜底容災：容錯機制、快速降級。

異步渲染機制出錯跳轉同步頁、友好的錯誤用戶提示。

重要機制添加降級開關、迅速（3min內）完成降級

前端可用性優化思路

前端可用性展望

面試總結

主要就是結合簡歷上的一個一個詳細地問，只要簡歷上寫了就會問到原理性的東西，而後就是問了項目中你負責哪塊，前端規劃之類的。

而後針對前端重複頁面的編寫探討了一下，面試官小姐姐給我解答了，他們後臺有本身的組件庫，純的組件，前端要用，就直接引用下載，開始不覺得然，到下來本身去查了一下，大概就是npm發包的那種吧。

小感慨：關於此次面試的總結，我想我仍是增強寫博客吧，就像有人說前端兩三年有一個瓶頸期，就是什麼都會一點，可是歸根到底仍是基礎不夠牢固，而尤爲是針對我這種非科班的，想不少計算機原理都仍是隻知其一;不知其二，瀏覽器緩存，服務器相關仍是懂的少，主要就是工做中爲涉獵，這也是死我爲何要搞一個本身的博客網站(https://www.jscwwd.com)的緣由。而後我本身也買了三本書「深刻淺出nodejs」、"學習Javascript的數據結構與算法"、「深刻理解Typescript」，今年就準備把基礎從新過一遍，期待來年與騰訊等大廠的會面！