2019騰訊暑期實習面試(offer)前端

最近在忙着准備找實習,所以沒有更新之前的文章.

不過所幸功夫不負有心人,我拿到了騰訊的offer.

這里分享一下面試的經驗.

 

簡介

本人雙非本科,普通學生一枚.

面的是騰訊的Web前端開發.

整個面試一共有四輪,分為:一面(筆試\初試)  二面(技術\復試) 三面(項目\復試) 四面(HR\終面)

 

一面

我是在五月份的時候收到的初試的消息

第一面的形式是遠程視頻面試,在牛客網上進行.

 

面試首先肯定是一個自我介紹,這里我就不贅述了

聊了一下我的大概情況過后,然后就開始面試了

 

第一個問題:

怎么判斷一個對象是不是數組?

1. 首先可以用 ES5 提供的 isArray 方法進行判斷,這個方法應該是最官方的
2. 可以使用 instanceof Array 來判斷,不過這種方式存在問題,比如當存在多個全局對象(如使用ifream),那么這個窗口的Array對象對另一個窗口使用 instanceof 就會判斷失敗
3. 這里是我當時給的答案(在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分為以下三種

1. 反射型XSS: 在url上拼接攻擊代碼,訪問get請求的接口,來注入XSS代碼
2. MXSS:DomXSS 在 dom 元素的 title , name 等屬性注入
3. 存儲型XSS: 通過表單(一般是評論區等地方)提交XSS數據,等后台從數據庫中讀取返給前端頁面時生效

CSRF的攻擊方式則是,當用戶登錄過A網站通過A網站的合法性身份校驗過后,B網站通過釣魚鏈接等形式獲取用戶在A網站的合法身份來進行攻擊

 

兩者的區別:

最大的區別在於 CSRF 需要用戶完成合法性驗證后才能進行,而XSS則不需要

 

防御:

XSS的主要防御手段是通過前后端的數據過濾來實現,對一些HTML的特殊字符進行轉義

CSRF的主要防御手段則是通過使用token驗證來驗證用戶身份的合法性

 

一面的主要內容就是上述幾個問題,整個過程45分鍾,我在打代碼的時候當時有個邏輯寫反了,找了很久都沒有找到問題,最后是被面試官指出了,所以在面試官那落了個馬虎大意的不良印象.

不過最后還是順利通過了初試.在第二天的晚上面試狀態就變為了復試.

 

二面

在面試狀態變更后的一個禮拜后預約了復試的時間(因為中間過了個端午)

同樣的首先是自我介紹,然后就進入正題.

 

第一個問題:

瀏覽器輸入網址后到頁面顯示的整個過程?

1. DNS解析
2. TCP連接建立(三次握手,四次揮手)
3. 加載文件(HTML,JS,CSS)
4. 渲染頁面(生成DOMtree,CSSrule,結合成render tree ,頁面布局,元素繪制)

 

第二個問題:

HTTPS和HTTP的區別?采用的加密算法?

 

http使用明文傳輸,https采用加密方式傳輸

具體加密過程如下:

1. 客戶端向服務器發起HTTPS請求，連接到服務器的443端口(默認)
2. 服務器端有一個密鑰對，即公鑰和私鑰，是用來進行非對稱加密使用的，服務器端保存着私鑰，不能將其泄露，公鑰可以發送給任何人
3. 服務器將自己的公鑰發送給客戶端,客戶端收到服務器端的公鑰之后，會對公鑰進行檢查，驗證其合法性，如果發現發現公鑰有問題，那么HTTPS傳輸就無法繼續。嚴格的說，這里應該是驗證服務器發送的數字證書的合法性，關於客戶端如何驗證數字證書的合法性。如果公鑰合格，那么客戶端會生成一個隨機值，這個隨機值就是用於進行對稱加密的密鑰，我們將該密鑰稱之為client key，即客戶端密鑰，這樣在概念上和服務器端的密鑰容易進行區分。然后用服務器的公鑰對客戶端密鑰進行非對稱加密，這樣客戶端密鑰就變成密文了，至此，HTTPS中的第一次HTTP請求結束
4. 客戶端會發起HTTPS中的第二個HTTP請求，將加密之后的客戶端密鑰發送給服務器
5. 服務器接收到客戶端發來的密文之后，會用自己的私鑰對其進行非對稱解密，解密之后的明文就是客戶端密鑰，然后用客戶端密鑰對數據進行對稱加密，這樣數據就變成了密文
6. 然后服務器將加密后的密文發送給客戶端
7. 客戶端收到服務器發送來的密文，用客戶端密鑰對其進行對稱解密，得到服務器發送的數據。這樣HTTPS中的第二個HTTP請求結束，整個HTTPS傳輸完成

 

對稱加密：DES

非對稱加密：RSA

 

第三個問題:

cookie的作用?cookie的安全?cookie與webstorage的區別?

 

cookie的作用:

cookie可以跟蹤會話，彌補HTTP無狀態協議的不足

• 判斷用戶是否登陸過網站，以便下次登錄時能夠實現自動登錄（或者記住密碼）。如果我們刪除cookie，則每次登錄必須從新填寫登錄的相關信息

• 保存上次登錄的時間等信息

這里面試官就問我,使用Cookie來做狀態保持是否安全?怎么解決?

 

首先Cookie是不安全的,可以通過腳本獲取,也能被中間人截取

解決方案:

1. Cookie內容加密
2. 設置HttpOnly頭(無法使用JS獲取Cookie)
3. Secure:true (只有在HTTPS時才發送Cookie)
4. 設置過期時間

 

Cookie與Webstorage (H5提出的用於替代Cookie的解決方案)的區別:

• • 生命周期：localStorage:localStorage的生命周期是永久的，關閉頁面或瀏覽器之后localStorage中的數據也不會消失。localStorage除非主動刪除數據，否則數據永遠不會消失。 sessionStorage的生命周期是在僅在當前會話下有效。sessionStorage引入了一個“瀏覽器窗口”的概念，sessionStorage是在同源的窗口中始終存在的數據。只要這個瀏覽器窗口沒有關閉，即使刷新頁面或者進入同源另一個頁面，數據依然存在。但是sessionStorage在關閉了瀏覽器窗口后就會被銷毀。同時獨立的打開同一個窗口同一個頁面，sessionStorage也是不一樣的

1. • 存儲大小：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分鍾.

這里到三面有一個小插曲,我看見我官網上的面試流程變灰了,我以為掛掉了,還郁悶了幾天

不過三天后告訴我約了下一場面試.

 

三面

首先仍是萬年不變的自我介紹:

然后面試官問了:

1. 你覺得簡歷的哪個項目對你來說最有挑戰性?
2. 中間遇到什么困難?
3. 你是怎么解決的?
4. 如果讓你繼續開發你覺得有什么改進的?
5. 你覺得你的項目市場前景如何?
6. 你在項目中負責的工作?
7. 你是怎么做的?
8. 你的職業規划?
9. 你的目標?
10. 你最近在看什么書?
11. 你看過的書中哪一本對你影響最大?為什么?

 

這一面主要就是問你簡歷的項目了,回答項目的時候從 

1. 背景
2. 目標
3. 行動
4. 結果

的順序來答就好,至於其它的問題就只能看你自己的臨場發揮了

 

在兩天的焦急等待后,收到了HR面的通知

 

終面

終面的HR是個女HR,我之前一度以為我去的部門只有漢子

簡單的自我介紹過后就開始聊人生

 

問題:

1. 你為什么要來實習?
2. 你大學參加的這么多比賽里面哪一個讓你印象深刻?為什么?
3. 你是怎么改進的?
4. 你有沒有面試其他的互聯網公司?
5. 你為什么選擇要來面騰訊?

 

HR面的話,問題就和技術沒啥關系了,感覺主要考察的就是你的意願強不強烈

你的為人處世,性格等方面

我當時對於這些問題,就一直表示十分希望能夠進入騰訊

如果看過我早期的文章的同學,應該知道我在去年就投過騰訊的實習,然后在一面就光榮的掛掉了

所以在HR問我最后問題的時候我的原話是這樣的:

"我十分希望能夠進入騰訊,您那邊可能也知道我在去年就投過咱們公司,當時確實是因為自己的能力達不到咱們公司的要求,不過這一年我一直都在努力提升自己,這次面試才走到了現在,就算這次我或許沒有達到要求,沒有機會到咱們公司實習,但是我認為只要我一直努力早晚能夠達到咱們公司的要求."

 

到這里HR就笑了,說她沒有什么問題要問我的了,offer的話后面有人會聯系你.

 

我當時都驚了,我看其它大佬的面經的時候都是回去等通知,沒有直接說offer的事情的.

我也不知道,在面試中我哪一點吸引了面試官,不過最終還是如願以償地拿到了offer

 

結語

這里的話我想說,面試的話很多時候最后我們都可能拿不到我們心儀的offer,面試確實是一個比較看運氣的事情

就算面試結果不太理想,但這確實是一個發現自己不足的很好的機會.

我從今年的3月開始准備面試,期間面了 阿里,京東,字節跳動,美團,騰訊(offer之前面的一次騰訊三面被刷)

就通過這些面試找到自己知識點的不足,然后面完過后就去查,彌補這些不足,最后終於如願.

 

感謝昨天的自己的努力,不忘初心,方得始終.

希望大家都能拿到自己心儀公司的offer.