2019騰訊暑期實習面試(offer)前端
最近在忙著準備找實習,所以沒有更新之前的文章.
不過所幸功夫不負有心人,我拿到了騰訊的offer.
這裡分享一下面試的經驗.
簡介
本人雙非本科,普通學生一枚.
面的是騰訊的Web前端開發.
整個面試一共有四輪,分為:一面(筆試\初試) 二面(技術\複試) 三面(專案\複試) 四面(HR\終面)
一面
我是在五月份的時候收到的初試的訊息
第一面的形式是遠端視訊面試,在牛客網上進行.
面試首先肯定是一個自我介紹,這裡我就不贅述了
聊了一下我的大概情況過後,然後就開始面試了
第一個問題:
怎麼判斷一個物件是不是陣列?
- 首先可以用 ES5 提供的 isArray 方法進行判斷,這個方法應該是最官方的
- 可以使用 instanceof Array 來判斷,不過這種方式存在問題,比如當存在多個全域性物件(如使用ifream),那麼這個視窗的Array物件對另一個視窗使用 instanceof 就會判斷失敗
- 這裡是我當時給的答案(在JS高階程式設計一書中有),通過 toString 來進行判斷
function isArray(value){ return Object.prototype.toString.call(value) === "[object Array]"; }
第二個問題:
瞭解深拷貝與淺拷貝嗎?你能實現一下深拷貝嗎?
這個問題首先我們要知道深拷貝淺拷貝的區別,我們知道JS的值分為基礎型別和引用型別,也就是說在進行賦值操作時引用型別賦值的實際上只是將地址進行賦值
也就是兩個變數指向了同一個地址,淺拷貝呢就是正常的賦值操作,而深拷貝則希望是一個新的獨立的值,而不是僅僅拷貝地址
由此我們可以給出以下拷貝函式(這裡給的程式碼只是一個示意,並不是最佳實踐)
function deepClone(obj){
let objClone = Array.isArray(obj)?[]:{};
if(obj && typeof obj==="object"){
for(key in obj){
if(obj.hasOwnProperty(key)){
//判斷ojb子元素是否為物件，如果是，遞迴複製
if(obj[key]&&typeof obj[key] ==="object"){
objClone[key] = deepClone(obj[key]);
}else{
//如果不是，簡單複製
objClone[key] = obj[key];
}
}
}
}
return objClone;
}
第三個問題:
知道繼承嗎?實現一下?
這裡的話我問了一下面試官,使用ES6的class實現,還是使用原生JS實現?
面試官說都可以,我就用的原生JS寫的,用的組合繼承的方式
function SuperType(){
this.property = true;
}
SuperType.prototype.getSuperValue = function(){
return this.property;
};
// 建立一個新的建構函式
function SubType(){
// 呼叫父類的建構函式
SuperType.applay(this,arguments);
this.subprototype = false;
}
// 重寫這個建構函式的原型物件讓其指向SuperType的例項
SubType.prototype = new SuperType();
// 修改 constructor 讓其指向正確地建構函式
SubType.prototype.constructor = SubType;
// 新增這個新建構函式的自身的方法
SubtType.prototype.getSubValue = funtion(){
return this.subproperty;
}
var instance = new SubType();
alert(instance.getSuperValue()); // true 可以訪問到原型物件上的方法和屬性
到這裡視訊面試線上打程式碼的部分就完成了,後面就問了一些前端方面的問題
第四個問題:
你瞭解XSS和CSRF嗎?
回答瞭解,之後就會詳細問了.
首先XSS分為以下三種
- 反射型XSS: 在url上拼接攻擊程式碼,訪問get請求的介面,來注入XSS程式碼
- MXSS:DomXSS 在 dom 元素的 title , name 等屬性注入
- 儲存型XSS: 通過表單(一般是評論區等地方)提交XSS資料,等後臺從資料庫中讀取返給前端頁面時生效
CSRF的攻擊方式則是,當用戶登入過A網站通過A網站的合法性身份校驗過後,B網站通過釣魚連結等形式獲取使用者在A網站的合法身份來進行攻擊
兩者的區別:
最大的區別在於 CSRF 需要使用者完成合法性驗證後才能進行,而XSS則不需要
防禦:
XSS的主要防禦手段是通過前後端的資料過濾來實現,對一些HTML的特殊字元進行轉義
CSRF的主要防禦手段則是通過使用token驗證來驗證使用者身份的合法性
一面的主要內容就是上述幾個問題,整個過程45分鐘,我在打程式碼的時候當時有個邏輯寫反了,找了很久都沒有找到問題,最後是被面試官指出了,所以在面試官那落了個馬虎大意的不良印象.
不過最後還是順利通過了初試.在第二天的晚上面試狀態就變為了複試.
二面
在面試狀態變更後的一個禮拜後預約了複試的時間(因為中間過了個端午)
同樣的首先是自我介紹,然後就進入正題.
第一個問題:
瀏覽器輸入網址後到頁面顯示的整個過程?
- DNS解析
- TCP連線建立(三次握手,四次揮手)
- 載入檔案(HTML,JS,CSS)
- 渲染頁面(生成DOMtree,CSSrule,結合成render tree ,頁面佈局,元素繪製)
第二個問題:
HTTPS和HTTP的區別?採用的加密演算法?
http使用明文傳輸,https採用加密方式傳輸
具體加密過程如下:
- 客戶端向伺服器發起HTTPS請求，連線到伺服器的443埠(預設)
- 伺服器端有一個金鑰對，即公鑰和私鑰，是用來進行非對稱加密使用的，伺服器端儲存著私鑰，不能將其洩露，公鑰可以傳送給任何人
- 伺服器將自己的公鑰傳送給客戶端,客戶端收到伺服器端的公鑰之後，會對公鑰進行檢查，驗證其合法性，如果發現發現公鑰有問題，那麼HTTPS傳輸就無法繼續。嚴格的說，這裡應該是驗證伺服器傳送的數字證書的合法性，關於客戶端如何驗證數字證書的合法性。如果公鑰合格，那麼客戶端會生成一個隨機值，這個隨機值就是用於進行對稱加密的金鑰，我們將該金鑰稱之為client key，即客戶端金鑰，這樣在概念上和伺服器端的金鑰容易進行區分。然後用伺服器的公鑰對客戶端金鑰進行非對稱加密，這樣客戶端金鑰就變成密文了，至此，HTTPS中的第一次HTTP請求結束
- 客戶端會發起HTTPS中的第二個HTTP請求，將加密之後的客戶端金鑰傳送給伺服器
- 伺服器接收到客戶端發來的密文之後，會用自己的私鑰對其進行非對稱解密，解密之後的明文就是客戶端金鑰，然後用客戶端金鑰對資料進行對稱加密，這樣資料就變成了密文
- 然後伺服器將加密後的密文傳送給客戶端
- 客戶端收到伺服器傳送來的密文，用客戶端金鑰對其進行對稱解密，得到伺服器傳送的資料。這樣HTTPS中的第二個HTTP請求結束，整個HTTPS傳輸完成
對稱加密：DES
非對稱加密：RSA
第三個問題:
cookie的作用?cookie的安全?cookie與webstorage的區別?
cookie的作用:
cookie可以跟蹤會話，彌補HTTP無狀態協議的不足
-
判斷使用者是否登陸過網站，以便下次登入時能夠實現自動登入（或者記住密碼）。如果我們刪除cookie，則每次登入必須從新填寫登入的相關資訊
-
儲存上次登入的時間等資訊
這裡面試官就問我,使用Cookie來做狀態保持是否安全?怎麼解決?
首先Cookie是不安全的,可以通過指令碼獲取,也能被中間人擷取
解決方案:
- Cookie內容加密
- 設定HttpOnly頭(無法使用JS獲取Cookie)
- Secure:true (只有在HTTPS時才傳送Cookie)
- 設定過期時間
Cookie與Webstorage (H5提出的用於替代Cookie的解決方案)的區別:
-
- 生命週期：localStorage:localStorage的生命週期是永久的，關閉頁面或瀏覽器之後localStorage中的資料也不會消失。localStorage除非主動刪除資料，否則資料永遠不會消失。 sessionStorage的生命週期是在僅在當前會話下有效。sessionStorage引入了一個“瀏覽器視窗”的概念，sessionStorage是在同源的視窗中始終存在的資料。只要這個瀏覽器視窗沒有關閉，即使重新整理頁面或者進入同源另一個頁面，資料依然存在。但是sessionStorage在關閉了瀏覽器視窗後就會被銷燬。同時獨立的開啟同一個視窗同一個頁面，sessionStorage也是不一樣的
-
-
儲存大小：localStorage和sessionStorage的儲存資料大小一般都是：5MB
-
儲存位置：localStorage和sessionStorage都儲存在客戶端，不與伺服器進行互動通訊
-
儲存內容型別：localStorage和sessionStorage只能儲存字串型別，對於複雜的物件可以使用ECMAScript提供的JSON物件的stringify和parse來處理
-
應用場景：localStoragese：常用於長期登入（+判斷使用者是否已登入），適合長期儲存在本地的資料。sessionStorage：敏感賬號一次性登入
-
相比Cookie的優點：
-
儲存空間更大：cookie為4KB，而WebStorage是5MB
-
節省網路流量：WebStorage不會傳送到伺服器，儲存在本地的資料可以直接獲取，也不會像cookie一樣每次請求都會傳送到伺服器，所以減少了客戶端和伺服器端的互動，節省了網路流量
-
快速顯示：有的資料儲存在WebStorage上，再加上瀏覽器本身的快取。獲取資料時可以從本地獲取會比從伺服器端獲取快得多，所以速度更快
-
安全性：WebStorage不會隨著HTTP header傳送到伺服器端，所以安全性相對於cookie來說比較高一些，不會擔心截獲，但是仍然存在偽造問題
-
WebStorage提供了一些方法，資料操作比cookie方便
-
第四個問題:
前端效能優化的手段?
-
網路載入
-
減少HTTP資源請求數: 合併靜態資源,構建工具合併雪碧圖\避免重複資源
-
減少HTTP請求大小: 對檔案進行壓縮優化,使用gzip傳輸壓縮內容\移除程式碼註釋壓縮程式碼
-
將CSS,JS放到外部檔案:HTML引用外部資源可以有效利用瀏覽器靜態資源快取
-
避免空的 href 和 src
-
指定Cache-Control 或 Expires
-
合理設定 Etag 和 Last-Modified
-
減少頁面重定向
-
靜態資源分域存放增加下載並行數
-
靜態資源CDN來儲存檔案
-
CDN Combo 下載傳輸內容
-
快取Ajax cache屬性設定為 true
-
使用Get Ajax的速度比POST請求快
-
減少Cookie大小進行Cookie隔離(分域存放靜態資源)
-
非同步JS
-
避免CSS import 載入CSS
-
-
頁面渲染
-
CSS資源放到頁面頂部
-
JS放到頁面底部
-
不在HTML中縮放圖片
-
減少DOM元素數量和深度
-
避免使用
<table><ifream>等慢元素,這些元素會整個渲染完成後再繪製到頁面上 -
避免使用CSS表示式或CSS濾鏡
-
第五個問題:
前端效能檢測?
Performance Timing API\ 瀏覽器Profile工具\ 頁面埋點\ 資源載入時序圖 用於獲取頁面載入的效能
如果是遠端監控使用者的頁面效能則需要將相關資料上傳到伺服器儲存
第六個問題:
你瞭解演算法嗎?
我:瞭解一點
你知道堆排序和快排的區別嗎?
我:資料結構不同,堆排是一種樹狀結構,時間複雜度都是(nlogn最好)
他們的時間複雜度一樣,為什麼平常更多使用快排,而不是堆排?
堆排的時間常量要大於快排,也就是執行交換操作的效能不同,在效能上快排的效能略優於堆排,並且使用場景中快排效率最壞的情況的概率比較小
快排：陣列中交換資料，在資料量不是特別大，而且離散程度較高的情況下效率很高
堆排序：建立堆，資料交換，調整堆的時間均很多
所以在實際應用中，我們用快排會更多一點
平時學習的方式?
我:前端掘金社群, github , infoq, 部落格, 書籍
大概多長時間看完一本書?
我:第一遍通看一個星期,完全掌握差不多要一個多月.
有沒有對書上的內容進行實踐?
我:能夠實踐的部分會做一些demo,不好實踐的部分則會分享一些自己的學習筆記在部落格上
你的部落格在外網能夠訪問嗎?
我:可以,然後給了連結
然後二面的內容就差不多了,期間問了一些簡歷上的專案,這裡因人而異所以我就不再多說了,整個過程大概65分鐘.
這裡到三面有一個小插曲,我看見我官網上的面試流程變灰了,我以為掛掉了,還鬱悶了幾天
不過三天後告訴我約了下一場面試.
三面
首先仍是萬年不變的自我介紹:
然後面試官問了:
- 你覺得簡歷的哪個專案對你來說最有挑戰性?
- 中間遇到什麼困難?
- 你是怎麼解決的?
- 如果讓你繼續開發你覺得有什麼改進的?
- 你覺得你的專案市場前景如何?
- 你在專案中負責的工作?
- 你是怎麼做的?
- 你的職業規劃?
- 你的目標?
- 你最近在看什麼書?
- 你看過的書中哪一本對你影響最大?為什麼?
這一面主要就是問你簡歷的專案了,回答專案的時候從
- 背景
- 目標
- 行動
- 結果
的順序來答就好,至於其它的問題就只能看你自己的臨場發揮了
在兩天的焦急等待後,收到了HR面的通知
終面
終面的HR是個女HR,我之前一度以為我去的部門只有漢子
簡單的自我介紹過後就開始聊人生
問題:
- 你為什麼要來實習?
- 你大學參加的這麼多比賽裡面哪一個讓你印象深刻?為什麼?
- 你是怎麼改進的?
- 你有沒有面試其他的網際網路公司?
- 你為什麼選擇要來面騰訊?
HR面的話,問題就和技術沒啥關係了,感覺主要考察的就是你的意願強不強烈
你的為人處世,性格等方面
我當時對於這些問題,就一直表示十分希望能夠進入騰訊
如果看過我早期的文章的同學,應該知道我在去年就投過騰訊的實習,然後在一面就光榮的掛掉了
所以在HR問我最後問題的時候我的原話是這樣的:
"我十分希望能夠進入騰訊,您那邊可能也知道我在去年就投過咱們公司,當時確實是因為自己的能力達不到咱們公司的要求,不過這一年我一直都在努力提升自己,這次面試才走到了現在,就算這次我或許沒有達到要求,沒有機會到咱們公司實習,但是我認為只要我一直努力早晚能夠達到咱們公司的要求."
到這裡HR就笑了,說她沒有什麼問題要問我的了,offer的話後面有人會聯絡你.
我當時都驚了,我看其它大佬的面經的時候都是回去等通知,沒有直接說offer的事情的.
我也不知道,在面試中我哪一點吸引了面試官,不過最終還是如願以償地拿到了offer
結語
這裡的話我想說,面試的話很多時候最後我們都可能拿不到我們心儀的offer,面試確實是一個比較看運氣的事情
但是面試就算結果不太理想,但是確實是一個發現自己不足的很好的機會.
我從今年的3月開始準備面試,期間面了 阿里,京東,位元組跳動,美團,騰訊(offer之前面的一次騰訊三面被刷)
就通過這些面試找到自己知識點的不足,然後面完過後就去查,彌補這些不足,最後終於如願.
感謝昨天的自己的努力,不忘初心,方得始終.
希望大家都能拿到自己心儀公司的offer.