最近在忙著準(zhǔn)備找實(shí)習(xí),所以沒有更新之前的文章.

不過(guò)所幸功夫不負(fù)有心人,我拿到了騰訊的offer.

這里分享一下面試的經(jīng)驗(yàn).

簡(jiǎn)介

本人雙非本科,普通學(xué)生一枚.

面的是騰訊的Web前端開發(fā).

整個(gè)面試一共有四輪,分為:一面(筆試\初試) 二面(技術(shù)\復(fù)試) 三面(項(xiàng)目\復(fù)試) 四面(HR\終面)

一面

我是在五月份的時(shí)候收到的初試的消息

第一面的形式是遠(yuǎn)程視頻面試,在?？途W(wǎng)上進(jìn)行.

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

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

第一個(gè)問(wèn)題:

怎么判斷一個(gè)對(duì)象是不是數(shù)組?

首先可以用 ES5 提供的 isArray 方法進(jìn)行判斷,這個(gè)方法應(yīng)該是最官方的
可以使用 instanceof Array 來(lái)判斷,不過(guò)這種方式存在問(wèn)題,比如當(dāng)存在多個(gè)全局對(duì)象(如使用ifream),那么這個(gè)窗口的Array對(duì)象對(duì)另一個(gè)窗口使用 instanceof 就會(huì)判斷失敗
這里是我當(dāng)時(shí)給的答案(在JS高級(jí)編程一書中有),通過(guò) toString 來(lái)進(jìn)行判斷

function isArray(value){
    return Object.prototype.toString.call(value) === "[object Array]";
}

第二個(gè)問(wèn)題:

了解深拷貝與淺拷貝嗎?你能實(shí)現(xiàn)一下深拷貝嗎?

這個(gè)問(wèn)題首先我們要知道深拷貝淺拷貝的區(qū)別,我們知道JS的值分為基礎(chǔ)類型和引用類型,也就是說(shuō)在進(jìn)行賦值操作時(shí)引用類型賦值的實(shí)際上只是將地址進(jìn)行賦值

也就是兩個(gè)變量指向了同一個(gè)地址,淺拷貝呢就是正常的賦值操作,而深拷貝則希望是一個(gè)新的獨(dú)立的值,而不是僅僅拷貝地址

由此我們可以給出以下拷貝函數(shù)(這里給的代碼只是一個(gè)示意,并不是最佳實(shí)踐)

function deepClone(obj){
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判斷ojb子元素是否為對(duì)象，如果是，遞歸復(fù)制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是，簡(jiǎn)單復(fù)制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}

第三個(gè)問(wèn)題:

知道繼承嗎?實(shí)現(xiàn)一下?

這里的話我問(wèn)了一下面試官,使用ES6的class實(shí)現(xiàn),還是使用原生JS實(shí)現(xiàn)?

面試官說(shuō)都可以,我就用的原生JS寫的,用的組合繼承的方式

function SuperType(){
    this.property = true;
}

SuperType.prototype.getSuperValue = function(){
    return this.property;
};

// 創(chuàng)建一個(gè)新的構(gòu)造函數(shù)
function SubType(){
    // 調(diào)用父類的構(gòu)造函數(shù)
    SuperType.applay(this,arguments);
    this.subprototype = false;
}

// 重寫這個(gè)構(gòu)造函數(shù)的原型對(duì)象讓其指向SuperType的實(shí)例
SubType.prototype = new SuperType();
// 修改 constructor 讓其指向正確地構(gòu)造函數(shù)
SubType.prototype.constructor = SubType;

// 添加這個(gè)新構(gòu)造函數(shù)的自身的方法
SubtType.prototype.getSubValue = funtion(){
    return this.subproperty;
}

var instance = new SubType();
alert(instance.getSuperValue()); // true 可以訪問(wèn)到原型對(duì)象上的方法和屬性

到這里視頻面試在線打代碼的部分就完成了,后面就問(wèn)了一些前端方面的問(wèn)題

第四個(gè)問(wèn)題:

你了解XSS和CSRF嗎?

回答了解,之后就會(huì)詳細(xì)問(wèn)了.

首先XSS分為以下三種

• 反射型XSS: 在url上拼接攻擊代碼,訪問(wèn)get請(qǐng)求的接口,來(lái)注入XSS代碼
• MXSS:DomXSS 在 dom 元素的 title , name 等屬性注入
• 存儲(chǔ)型XSS: 通過(guò)表單(一般是評(píng)論區(qū)等地方)提交XSS數(shù)據(jù),等后臺(tái)從數(shù)據(jù)庫(kù)中讀取返給前端頁(yè)面時(shí)生效

CSRF的攻擊方式則是,當(dāng)用戶登錄過(guò)A網(wǎng)站通過(guò)A網(wǎng)站的合法性身份校驗(yàn)過(guò)后,B網(wǎng)站通過(guò)釣魚鏈接等形式獲取用戶在A網(wǎng)站的合法身份來(lái)進(jìn)行攻擊

兩者的區(qū)別:

最大的區(qū)別在于 CSRF 需要用戶完成合法性驗(yàn)證后才能進(jìn)行,而XSS則不需要

防御:

XSS的主要防御手段是通過(guò)前后端的數(shù)據(jù)過(guò)濾來(lái)實(shí)現(xiàn),對(duì)一些HTML的特殊字符進(jìn)行轉(zhuǎn)義

CSRF的主要防御手段則是通過(guò)使用token驗(yàn)證來(lái)驗(yàn)證用戶身份的合法性

一面的主要內(nèi)容就是上述幾個(gè)問(wèn)題,整個(gè)過(guò)程45分鐘,我在打代碼的時(shí)候當(dāng)時(shí)有個(gè)邏輯寫反了,找了很久都沒有找到問(wèn)題,最后是被面試官指出了,所以在面試官那落了個(gè)馬虎大意的不良印象.

不過(guò)最后還是順利通過(guò)了初試.在第二天的晚上面試狀態(tài)就變?yōu)榱藦?fù)試.

二面

在面試狀態(tài)變更后的一個(gè)禮拜后預(yù)約了復(fù)試的時(shí)間(因?yàn)橹虚g過(guò)了個(gè)端午)

同樣的首先是自我介紹,然后就進(jìn)入正題.

第一個(gè)問(wèn)題:

瀏覽器輸入網(wǎng)址后到頁(yè)面顯示的整個(gè)過(guò)程?

DNS解析

TCP連接建立(三次握手,四次揮手)

加載文件(HTML,JS,CSS)渲染頁(yè)面(生成DOMtree,CSSrule,結(jié)合成render tree ,頁(yè)面布局,元素繪制)

第二個(gè)問(wèn)題:

HTTPS和HTTP的區(qū)別?采用的加密算法?

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

具體加密過(guò)程如下:

• 客戶端向服務(wù)器發(fā)起HTTPS請(qǐng)求，連接到服務(wù)器的443端口(默認(rèn))
• 服務(wù)器端有一個(gè)密鑰對(duì)，即公鑰和私鑰，是用來(lái)進(jìn)行非對(duì)稱加密使用的，服務(wù)器端保存著私鑰，不能將其泄露，公鑰可以發(fā)送給任何人
• 服務(wù)器將自己的公鑰發(fā)送給客戶端,客戶端收到服務(wù)器端的公鑰之后，會(huì)對(duì)公鑰進(jìn)行檢查，驗(yàn)證其合法性，如果發(fā)現(xiàn)發(fā)現(xiàn)公鑰有問(wèn)題，那么HTTPS傳輸就無(wú)法繼續(xù)。嚴(yán)格的說(shuō)，這里應(yīng)該是驗(yàn)證服務(wù)器發(fā)送的數(shù)字證書的合法性，關(guān)于客戶端如何驗(yàn)證數(shù)字證書的合法性。如果公鑰合格，那么客戶端會(huì)生成一個(gè)隨機(jī)值，這個(gè)隨機(jī)值就是用于進(jìn)行對(duì)稱加密的密鑰，我們將該密鑰稱之為client key，即客戶端密鑰，這樣在概念上和服務(wù)器端的密鑰容易進(jìn)行區(qū)分。然后用服務(wù)器的公鑰對(duì)客戶端密鑰進(jìn)行非對(duì)稱加密，這樣客戶端密鑰就變成密文了，至此，HTTPS中的第一次HTTP請(qǐng)求結(jié)束
• 客戶端會(huì)發(fā)起HTTPS中的第二個(gè)HTTP請(qǐng)求，將加密之后的客戶端密鑰發(fā)送給服務(wù)器
• 服務(wù)器接收到客戶端發(fā)來(lái)的密文之后，會(huì)用自己的私鑰對(duì)其進(jìn)行非對(duì)稱解密，解密之后的明文就是客戶端密鑰，然后用客戶端密鑰對(duì)數(shù)據(jù)進(jìn)行對(duì)稱加密，這樣數(shù)據(jù)就變成了密文
• 然后服務(wù)器將加密后的密文發(fā)送給客戶端
• 客戶端收到服務(wù)器發(fā)送來(lái)的密文，用客戶端密鑰對(duì)其進(jìn)行對(duì)稱解密，得到服務(wù)器發(fā)送的數(shù)據(jù)。這樣HTTPS中的第二個(gè)HTTP請(qǐng)求結(jié)束，整個(gè)HTTPS傳輸完成

對(duì)稱加密：DES

非對(duì)稱加密：RSA

第三個(gè)問(wèn)題:

cookie的作用?cookie的安全?cookie與webstorage的區(qū)別?

cookie的作用:

cookie可以跟蹤會(huì)話，彌補(bǔ)HTTP無(wú)狀態(tài)協(xié)議的不足

• 判斷用戶是否登陸過(guò)網(wǎng)站，以便下次登錄時(shí)能夠?qū)崿F(xiàn)自動(dòng)登錄（或者記住密碼）。如果我們刪除cookie，則每次登錄必須從新填寫登錄的相關(guān)信息
• 保存上次登錄的時(shí)間等信息

這里面試官就問(wèn)我,使用Cookie來(lái)做狀態(tài)保持是否安全?怎么解決?

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

解決方案:

• Cookie內(nèi)容加密
• 設(shè)置HttpOnly頭(無(wú)法使用JS獲取Cookie)
• Secure:true (只有在HTTPS時(shí)才發(fā)送Cookie)
• 設(shè)置過(guò)期時(shí)間

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

生命周期：localStorage:localStorage的生命周期是永久的，關(guān)閉頁(yè)面或?yàn)g覽器之后localStorage中的數(shù)據(jù)也不會(huì)消失。localStorage除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)永遠(yuǎn)不會(huì)消失。 sessionStorage的生命周期是在僅在當(dāng)前會(huì)話下有效。sessionStorage引入了一個(gè)“瀏覽器窗口”的概念，sessionStorage是在同源的窗口中始終存在的數(shù)據(jù)。只要這個(gè)瀏覽器窗口沒有關(guān)閉，即使刷新頁(yè)面或者進(jìn)入同源另一個(gè)頁(yè)面，數(shù)據(jù)依然存在。但是sessionStorage在關(guān)閉了瀏覽器窗口后就會(huì)被銷毀。同時(shí)獨(dú)立的打開同一個(gè)窗口同一個(gè)頁(yè)面，sessionStorage也是不一樣的

存儲(chǔ)大?。簂ocalStorage和sessionStorage的存儲(chǔ)數(shù)據(jù)大小一般都是：5MB

存儲(chǔ)位置：localStorage和sessionStorage都保存在客戶端，不與服務(wù)器進(jìn)行交互通信

存儲(chǔ)內(nèi)容類型：localStorage和sessionStorage只能存儲(chǔ)字符串類型，對(duì)于復(fù)雜的對(duì)象可以使用ECMAScript提供的JSON對(duì)象的stringify和parse來(lái)處理

應(yīng)用場(chǎng)景：localStoragese：常用于長(zhǎng)期登錄（+判斷用戶是否已登錄），適合長(zhǎng)期保存在本地的數(shù)據(jù)。sessionStorage：敏感賬號(hào)一次性登錄

相比Cookie的優(yōu)點(diǎn)：

• 存儲(chǔ)空間更大：cookie為4KB，而WebStorage是5MB
• 節(jié)省網(wǎng)絡(luò)流量：WebStorage不會(huì)傳送到服務(wù)器，存儲(chǔ)在本地的數(shù)據(jù)可以直接獲取，也不會(huì)像cookie一樣每次請(qǐng)求都會(huì)傳送到服務(wù)器，所以減少了客戶端和服務(wù)器端的交互，節(jié)省了網(wǎng)絡(luò)流量
• 快速顯示：有的數(shù)據(jù)存儲(chǔ)在WebStorage上，再加上瀏覽器本身的緩存。獲取數(shù)據(jù)時(shí)可以從本地獲取會(huì)比從服務(wù)器端獲取快得多，所以速度更快
• 安全性：WebStorage不會(huì)隨著HTTP header發(fā)送到服務(wù)器端，所以安全性相對(duì)于cookie來(lái)說(shuō)比較高一些，不會(huì)擔(dān)心截獲，但是仍然存在偽造問(wèn)題
• WebStorage提供了一些方法，數(shù)據(jù)操作比cookie方便

第四個(gè)問(wèn)題:

前端性能優(yōu)化的手段?

• 網(wǎng)絡(luò)加載
• 減少HTTP資源請(qǐng)求數(shù): 合并靜態(tài)資源,構(gòu)建工具合并雪碧圖\避免重復(fù)資源
• 減少HTTP請(qǐng)求大小: 對(duì)文件進(jìn)行壓縮優(yōu)化,使用gzip傳輸壓縮內(nèi)容\移除代碼注釋壓縮代碼
• 將CSS,JS放到外部文件:HTML引用外部資源可以有效利用瀏覽器靜態(tài)資源緩存
• 避免空的 href 和 src
• 指定Cache-Control 或 Expires
• 合理設(shè)置 Etag 和 Last-Modified
• 減少頁(yè)面重定向
• 靜態(tài)資源分域存放增加下載并行數(shù)
• 靜態(tài)資源CDN來(lái)存儲(chǔ)文件
• CDN Combo 下載傳輸內(nèi)容
• 緩存Ajax cache屬性設(shè)置為 true
• 使用Get Ajax的速度比POST請(qǐng)求快
• 減少Cookie大小進(jìn)行Cookie隔離(分域存放靜態(tài)資源)
• 異步JS
• 避免CSS import 加載CSS

頁(yè)面渲染

• CSS資源放到頁(yè)面頂部
• JS放到頁(yè)面底部
• 不在HTML中縮放圖片
• 減少DOM元素?cái)?shù)量和深度
• 避免使用<table><ifream>等慢元素,這些元素會(huì)整個(gè)渲染完成后再繪制到頁(yè)面上
• 避免使用CSS表達(dá)式或CSS濾鏡

第五個(gè)問(wèn)題:

前端性能檢測(cè)?

Performance Timing API\ 瀏覽器Profile工具\(yùn) 頁(yè)面埋點(diǎn)\ 資源加載時(shí)序圖 用于獲取頁(yè)面加載的性能

如果是遠(yuǎn)程監(jiān)控用戶的頁(yè)面性能則需要將相關(guān)數(shù)據(jù)上傳到服務(wù)器存儲(chǔ)

第六個(gè)問(wèn)題:

你了解算法嗎?

我:了解一點(diǎn)

你知道堆排序和快排的區(qū)別嗎?

我:數(shù)據(jù)結(jié)構(gòu)不同,堆排是一種樹狀結(jié)構(gòu),時(shí)間復(fù)雜度都是(nlogn最好)

他們的時(shí)間復(fù)雜度一樣,為什么平常更多使用快排,而不是堆排?

堆排的時(shí)間常量要大于快排,也就是執(zhí)行交換操作的性能不同,在性能上快排的性能略優(yōu)于堆排,并且使用場(chǎng)景中快排效率最壞的情況的概率比較小

快排：數(shù)組中交換數(shù)據(jù)，在數(shù)據(jù)量不是特別大，而且離散程度較高的情況下效率很高

堆排序：創(chuàng)建堆，數(shù)據(jù)交換，調(diào)整堆的時(shí)間均很多

所以在實(shí)際應(yīng)用中，我們用快排會(huì)更多一點(diǎn)

平時(shí)學(xué)習(xí)的方式?

我:前端掘金社區(qū), github , infoq, 博客, 書籍

大概多長(zhǎng)時(shí)間看完一本書?

我:第一遍通看一個(gè)星期,完全掌握差不多要一個(gè)多月.

有沒有對(duì)書上的內(nèi)容進(jìn)行實(shí)踐?

我:能夠?qū)嵺`的部分會(huì)做一些demo,不好實(shí)踐的部分則會(huì)分享一些自己的學(xué)習(xí)筆記在博客上

你的博客在外網(wǎng)能夠訪問(wèn)嗎?

我:可以,然后給了鏈接

然后二面的內(nèi)容就差不多了,期間問(wèn)了一些簡(jiǎn)歷上的項(xiàng)目,這里因人而異所以我就不再多說(shuō)了,整個(gè)過(guò)程大概65分鐘.

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

不過(guò)三天后告訴我約了下一場(chǎng)面試.

三面

首先仍是萬(wàn)年不變的自我介紹:

然后面試官問(wèn)了:

• 你覺得簡(jiǎn)歷的哪個(gè)項(xiàng)目對(duì)你來(lái)說(shuō)最有挑戰(zhàn)性?
• 中間遇到什么困難?
• 你是怎么解決的?
• 如果讓你繼續(xù)開發(fā)你覺得有什么改進(jìn)的?
• 你覺得你的項(xiàng)目市場(chǎng)前景如何?
• 你在項(xiàng)目中負(fù)責(zé)的工作?
• 你是怎么做的?
• 你的職業(yè)規(guī)劃?
• 你的目標(biāo)?
• 你最近在看什么書?
• 你看過(guò)的書中哪一本對(duì)你影響最大?為什么?

這一面主要就是問(wèn)你簡(jiǎn)歷的項(xiàng)目了,回答項(xiàng)目的時(shí)候從

• 背景
• 目標(biāo)
• 行動(dòng)
• 結(jié)果

的順序來(lái)答就好,至于其它的問(wèn)題就只能看你自己的臨場(chǎng)發(fā)揮了

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

終面

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

簡(jiǎn)單的自我介紹過(guò)后就開始聊人生

問(wèn)題:

• 你為什么要來(lái)實(shí)習(xí)?
• 你大學(xué)參加的這么多比賽里面哪一個(gè)讓你印象深刻?為什么?
• 你是怎么改進(jìn)的?
• 你有沒有面試其他的互聯(lián)網(wǎng)公司?
• 你為什么選擇要來(lái)面騰訊?

HR面的話,問(wèn)題就和技術(shù)沒啥關(guān)系了,感覺主要考察的就是你的意愿強(qiáng)不強(qiáng)烈

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

我當(dāng)時(shí)對(duì)于這些問(wèn)題,就一直表示十分希望能夠進(jìn)入騰訊

如果看過(guò)我早期的文章的同學(xué),應(yīng)該知道我在去年就投過(guò)騰訊的實(shí)習(xí),然后在一面就光榮的掛掉了

所以在HR問(wèn)我最后問(wèn)題的時(shí)候我的原話是這樣的:

"我十分希望能夠進(jìn)入騰訊,您那邊可能也知道我在去年就投過(guò)咱們公司,當(dāng)時(shí)確實(shí)是因?yàn)樽约旱哪芰_(dá)不到咱們公司的要求,不過(guò)這一年我一直都在努力提升自己,這次面試才走到了現(xiàn)在,就算這次我或許沒有達(dá)到要求,沒有機(jī)會(huì)到咱們公司實(shí)習(xí),但是我認(rèn)為只要我一直努力早晚能夠達(dá)到咱們公司的要求."

到這里HR就笑了,說(shuō)她沒有什么問(wèn)題要問(wèn)我的了,offer的話后面有人會(huì)聯(lián)系你.

我當(dāng)時(shí)都驚了,我看其它大佬的面經(jīng)的時(shí)候都是回去等通知,沒有直接說(shuō)offer的事情的.

我也不知道,在面試中我哪一點(diǎn)吸引了面試官,不過(guò)最終還是如愿以償?shù)啬玫搅薿ffer

結(jié)語(yǔ)

這里的話我想說(shuō),面試的話很多時(shí)候最后我們都可能拿不到我們心儀的offer,面試確實(shí)是一個(gè)比較看運(yùn)氣的事情

就算面試結(jié)果不太理想,但這確實(shí)是一個(gè)發(fā)現(xiàn)自己不足的很好的機(jī)會(huì).

我從今年的3月開始準(zhǔn)備面試,期間面了 阿里,京東,字節(jié)跳動(dòng),美團(tuán),騰訊(offer之前面的一次騰訊三面被刷)

就通過(guò)這些面試找到自己知識(shí)點(diǎn)的不足,然后面完過(guò)后就去查,彌補(bǔ)這些不足,最后終于如愿.

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

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

最新評(píng)論