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

時間 2019-12-07

標籤騰訊暑期實習面試 offer 前端欄目騰訊简体版

原文原文鏈接

最近在忙着準備找實習,因此沒有更新以前的文章.前端

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

這裏分享一下面試的經驗.github

簡介

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

面的是騰訊的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的優勢：

第四個問題:

前端性能優化的手段?

網絡加載
- 減小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濾鏡