目錄

• 前言
• 楔子
• 正文
  • 面試前做出的準備
  • 快要面試時做出的準備
  • 面試前奏
  • 面試高潮
  • 面試尾聲
• 小技巧
• 總結

前言

你好，我是星輝，幸會幸會。
今天我參加了位元組跳動的前段視訊第一次面試，把它記錄總結下來，希望能夠對大家帶來幫助。

楔子

投遞簡歷後過了一段時間接到約面小姐姐的電話，瞭解你的具體的實習時間段，和你約定面試時間。你確認後小姐姐掛電話。過段時間hr給你發視訊面試的連結，是牛客網用來面試的連結。

正文

面試前做出的準備

我在面試前準備以下幾點東西，似乎都解決了面試的部分問題

• 面試前我查閱了其他朋友寫的位元組跳動的面經以及面試題目，尋找題目解答，把它們總結了下來，用了一天一夜的時間，並把它們放到了我的這個部落格上面。
• 我做了一份詳細的自我介紹，通過三段開發經歷來總結出了我的一些優點和開發經驗，用講故事的形式說明情況，最後點明故事中表現了自己具有哪些素質，點明自己為什麼可以做前端的工作。位元組跳動的宗旨“和優秀的人一起做有挑戰的事情”也被我用到了自我介紹中，“我認為我是優秀的人，也喜歡做有挑戰的事情，更喜歡與優秀的人為伍”“我希望搭上位元組跳動這架火箭”等等。

快要面試時做出的準備

快要面試了，第一次面試，有些緊張，但還是像平常考試一樣，將總結下來的面試題目總結、前端遇到問題的總結又看了一遍，把自己做好的自我介紹熟悉的幾遍，給自己親近的朋友發條訊息獲得她的祝福，又站在電腦桌前活動了一下身子，頭腦頓時清醒利索了許多。

面試前奏

由於緊張怕錯過面試，早早的便坐在了電腦桌前。面試官遲到了一會，就給我發起了面試視訊邀請，終於開始了。
迎面是一個挺帥氣的哥哥，簡單的打了一下招呼，就進入了自我介紹的環節。由於自我介紹我已經熟悉過幾遍了，自我介紹的效果看起來效果還是不錯的。
開始問我專案經歷的細節以及自我介紹中的細節，由於專案經歷確實是自己親身經歷過的事情，並且我一般專案完成時都會做一下總結，所以也能夠答個頭頭是道。個人感覺上的，至於面試官怎麼想的，我就不清楚了， 說不定是那種我就靜靜的看著你裝逼的情況。

面試高潮

來了來了，開始問技術的問題了。

• 你對Vue的理解有多少
  因為我在簡歷的專案經歷中寫了一個Vue專案，於是他問的時候就把我在專案中對Vue的理解和麵試前準備的Vue總結結合起來回答。
• 用css2和css3分別寫一下垂直居中和水平居中
  這道題我不會，並不知道css2和css3有什麼區別以及寫法，只會css3，我腦袋裡有面試前總結的垂直居中和水平居中其中的兩種方式，我就給他講了一講，倒是他沒有再問下去，可能看出來我不會了吧。這也體現出了面試前知識點總結複習的重要性，不然你不會的東西你連說都不會說。

css3新增了一些屬性，像flex，這是css3中很重要的改變，所以除了flex以外的垂直水平居中的技巧都是屬於css2的。
- css2的水平居中技巧
將元素display為行內元素，再text-align:center;即可
或者
將塊級元素定義一個寬度，再margin: 0 auto;即可
- css3的水平居中技巧
將元素display設為flex，再通過justify-content: center; 實現居中。
- css2的垂直居中技巧
單行內容的垂直居中可以通過設定相同height值和line-height值來實現。
多行內容的垂直居中且高度可變可以通過設定上下相同的padding值來實現。
- css3的垂直居中技巧
將元素display設為flex，再通過align-items:center;來實現。

• 你對計算機網路的認識怎麼樣
  又是一道探底的題，判斷能否從這裡給你出題考察你
• 講述一下計算機網路的七層
  應用層、表示層、會話層、傳輸層、網路層、資料鏈路層、物理層
• TCP和UDP的區別是什麼

TCP：面向連線、傳輸可靠(保證資料正確性,保證資料順序)、用於傳輸大量資料(流模式)、速度慢，建立連線需要開銷較多(時間，系統資源)
UDP：面向非連線、傳輸不可靠、用於傳輸少量資料(資料包模式)、速度快
TCP和UDP協議的一些應用例子：
TCP一般用於檔案傳輸（FTP HTTP 對資料準確性要求高，速度可以相對慢），傳送或接收郵件（POP IMAP SMTP 對資料準確性要求高，非緊急應用），遠端登入（TELNET SSH 對資料準確性有一定要求，有連線的概念）等等；UDP一般用於即時通訊（QQ聊天 對資料準確性和丟包要求比較低，但速度必須快），線上視訊（RTSP 速度一定要快，保證視訊連續，但是偶爾花了一個影象幀，人們還是能接受的），網路語音電話（VoIP 語音資料包一般比較小，需要高速傳送，偶爾斷音或串音也沒有問題）等等。

原文：https://blog.csdn.net/buster2014/article/details/40082109 

• TCP和UDP屬於計算機網路中的哪一層

網際層協議：IP協議、ICMP協議、ARP協議、RARP協議
傳輸層協議：TCP協議、UDP協議
應用層協議：FTP、Telnet、SMTP、HTTP、RIP、NFS、DNS

• HTTPS是什麼

HTTPS即加密的HTTP，HTTPS並不是一個新協議，而是HTTP+SSL（TLS）。原本HTTP先和TCP（假定傳輸層是TCP協議）直接通訊，而加了SSL後，就變成HTTP先和SSL通訊，再由SSL和TCP通訊，相當於SSL被嵌在了HTTP和TCP之間

• 介紹幾種常見的狀態碼

2XX系列：代表請求已成功被伺服器接收、理解、並接受。
200狀態碼：表示請求已成功，請求所希望的響應頭或資料體將隨此響應返回
201狀態碼：表示請求成功並且伺服器建立了新的資源，且其 URI 已經隨Location 頭資訊返回。
3XX系列：代表需要客戶端採取進一步的操作才能完成請求，這些狀態碼用來重定向，後續的請求地址（重定向目標）在本次響應的 Location 域中指明。
301狀態碼：被請求的資源已永久移動到新位置。伺服器返回此響應（對 GET 或 HEAD 請求的響應）時，會自動將請求者轉到新位置。
302狀態碼：請求的資源臨時從不同的URI響應請求，但請求者應繼續使用原有位置來進行以後的請求。
304狀態碼：自從上次請求後，請求的網頁未修改過。伺服器返回此響應時，不會返回網頁內容。
4XX系列：表示請求錯誤。代表了客戶端看起來可能發生了錯誤，妨礙了伺服器的處理。
401狀態碼：請求要求身份驗證。 對於需要登入的網頁，伺服器可能返回此響應。
403狀態碼：伺服器已經理解請求，但是拒絕執行它。與401響應不同的是，身份驗證並不能提供任何幫助，而且這個請求也不應該被重複提交。
404狀態碼：請求失敗，請求所希望得到的資源未被在伺服器上發現。
5xx系列：代表了伺服器在處理請求的過程中有錯誤或者異常狀態發生，也有可能是伺服器意識到以當前的軟硬體資源無法完成對請求的處理。
500狀態碼：伺服器遇到了一個未曾預料的狀況，導致了它無法完成對請求的處理。
503狀態碼：由於臨時的伺服器維護或者過載，伺服器當前無法處理請求。

• 閉包是什麼
  閉包就是能夠讀取其他函式內部變數的函式。
  閉包的用途：可以讀取函式內部的變數，並且讓這些變數的值始終保持在記憶體中。

// 輸出全為10
for(var i=0;i<10;i++){
   setTimeout(function(){
       console.log(i);
   },50);
}

// 輸出相應的輸出
for(var i=0;i<10;i++){
    (function(i){
        setTimeout(function(){
        console.log(i);
        },50);
    })(i);
}

• NaN是什麼，用typeof會輸出什麼
  Not a Number
  會輸出 Number
• js的隱性轉換和顯性轉換

隱性轉換為： 1 + '1' = '11'
顯性轉換
Number("24 cccc");//結果：NaN
ParseInt("24 cccc");//結果：24
備註：Number的顯性轉換比較嚴格，若無法強轉則直接報錯

面試官後引伸了兩個問題
1 + -'1' + 1 等於什麼
等於 0 ，'1'前面的負號把其數字化，變為-1，則後值為1
'A' - 'B' 等於什麼
NaN

• 跨域問題如何解決
  同源策略：瀏覽器安全策略，同協議、ip、埠的指令碼才會執行。
  只要協議、域名、埠有任何一個不同，都被當作是不同的域
  js跨域是指通過js在不同的域之間進行資料傳輸或通訊

1. 通過jsonp跨域
jsonp在頁面上引入不同域上的js指令碼檔案實現請求不同域上的資料
(1) 通過script標籤引入一個js檔案
(2) js檔案載入成功後會執行我們在url引數中指定的函式，並且會把我們需要的json資料作為引數傳入
注：需要伺服器端的頁面進行相應的配合
2. 通過修改document.domain來跨子域
3. 使用window.name來進行跨域
window物件有個name屬性，該屬性有個特徵：即在一個視窗(window)的生命週期內,視窗載入的所有的頁面都是共享一個window.name的，每個頁面對window.name都有讀寫的許可權，window.name是持久存在一個視窗載入過的所有頁面中的，並不會因新頁面的載入而進行重置。

• 知道babel麼
  可以實現將ES6編譯為ES5程式碼
• 用js實現判斷一個變數是否為整數的函式

實現思路：先判斷該變數是否為Number型別，以此來縮小範圍，再判斷該變數除以1後是否與原值全等，若全等則返回true，若不全等則返回false

• 程序和執行緒是什麼
  執行緒是最小的執行單元，而程序由至少一個執行緒組成。如何排程程序和執行緒，完全由作業系統決定，程式自己不能決定什麼時候執行，執行多長時間。
  程序指計算機中已執行的程式。
  執行緒指作業系統能夠進行運算排程的最小單位。
• 死鎖是什麼
  當兩個以上的運算單元，雙方都在等待對方停止執行，以獲取系統資源，但是沒有一方提前退出時，就稱為死鎖。
• Left Join、Right Join、Inner Join 指的是什麼

LEFT JOIN 關鍵字會從左表那裡返回所有的行，即使在右表中沒有匹配的行
RIGHT JOIN 關鍵字會右表那裡返回所有的行，即使在左表中沒有匹配的行
在表中存在至少一個匹配時，INNER JOIN 關鍵字返回行

• 快速排序用js怎麼寫

function quickSort(arr) {
  if(arr.length<=1) {
  	return arr;
  }
  var s = Math.floor(arr.length/2);
 
  var temp = arr.splice(s,1);
  
  var left=[];
  var right=[];
  for(var i=0;i<arr.length;i++) {
    if(arr[i]<temp) {
      left.push(arr[i]);
    }
    if(arr[i]>=temp) {
      right.push(arr[i]);
    }
  }
  
  return quickSort(left).concat(temp,quickSort(right));  
  
}

面試尾聲

面試官的突然一聲“我這邊沒有什麼問題了”，嚇了我一跳，懸了懸了，我還想著跟他嘮嗑兩小時呢，嘮嗑的感覺真好。
“我這邊沒有什麼問題了，請等待hr的通知吧”

小技巧

• 做專案小技巧
  每次專案完成後，都需要做一下專案的總結，這是做一兩個專案並做總結的人比做很多的專案不做總結的人看起來更有經驗的原因。古人說的好，“總結反思才能成長”。
• 做簡歷小技巧
  套模板，注意寫下什麼時間畢業，儘可能的填充專案經驗，專案經驗寫的詳細些，重點是從專案中學到了什麼。
• 面試寫程式碼小技巧
  寫的程式碼記得加註釋，考慮程式碼的時間複雜度問題，不會寫程式碼一定要給面試官說一下你的思路，腦袋中想到什麼說什麼，部分解決方法也比說一聲我不會強太多。

總結

• 實習的面試多進行基礎知識的儲備