前言
在大廠工作了6年，當了3年的前端面試官，把大廠常問的面試題與答案彙總在我的Github中。希望對大家有所幫助，助力大家進入自己理想的企業。
專案地址是：github.com/airuikun/We…
如果你在大廠面試的時候遇到了什麼不懂的問題，歡迎給我提issue，我會把答案和考點都列出來，公佈在下一期的面試週刊裡。
面試題精選
大家如果去大廠面試過，就會發現，在網上刷了很多的前端面試題，但是去大廠面試的時候還是一頭霧水，那是因為那些在網上一搜就能搜出來的題，大廠的面試官基本看不上，他們都會問一些開放題，在回答開放題的過程中，就能摸清你知識技能的廣度和深度，所以本期會加入幾道我在面試候選人常用的開放題，供大家學習和思考。
我把下面每道題的難度高低，和對標了大廠的多少職級，都寫上去了，大家可以參考一下自己是什麼職級。
第 1 題：如何劫持https的請求，提供思路
難度：阿里p6+ ~ p7、騰訊t23 ~ t31
很多人在google上搜尋“前端面試 + https詳解”，把答案倒背如流，但是問到如何劫持https請求的時候就一臉懵逼，是因為還是停留在https理論性階段。
想告訴大家的是，就算是https，也不是絕對的安全，以下提供一個本地劫持https請求的簡單思路。
模擬中間人攻擊，以百度為例
- 先用OpenSSL檢視下證照，直接呼叫openssl庫識別目標伺服器支援的SSL/TLS cipher suite
openssl s_client -connect www.baidu.com:443
複製程式碼- 用sslcan識別ssl配置錯誤，過期協議，過時cipher suite和hash演算法
sslscan -tlsall www.baidu.com:443
複製程式碼- 分析證照詳細資料
sslscan -show-certificate --no-ciphersuites www.baidu.com:443
複製程式碼- 生成一個證照
openssl req -new -x509 -days 1096 -key ca.key -out ca.crt
複製程式碼- 開啟路由功能
sysctl -w net.ipv4.ip_forward=1
複製程式碼- 寫轉發規則，將80、443埠進行轉發給8080和8443埠
iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT --to-ports 8080
iptables -t nat -A PREROUTING -p tcp --dport 443 -j REDIRECT --to-ports 8443
複製程式碼- 最後使用arpspoof進行arp欺騙
如果你有更好的想法或疑問，歡迎在這題目對應的github下留言：github.com/airuikun/We…
第 2 題：前端如何進行seo優化
難度：阿里p5、騰訊t21
- 合理的title、description、keywords：搜尋對著三項的權重逐個減小，title值強調重點即可；description把頁面內容高度概括，不可過分堆砌關鍵詞；keywords列舉出重要關鍵詞。
- 語義化的HTML程式碼，符合W3C規範：語義化程式碼讓搜尋引擎容易理解網頁
- 重要內容HTML程式碼放在最前：搜尋引擎抓取HTML順序是從上到下，保證重要內容一定會被抓取
- 重要內容不要用js輸出：爬蟲不會執行js獲取內容
- 少用iframe：搜尋引擎不會抓取iframe中的內容
- 非裝飾性圖片必須加alt
- 提高網站速度：網站速度是搜尋引擎排序的一個重要指標
如果你有更好的答案或想法，歡迎在這題目對應的github下留言：github.com/airuikun/We…
第 3 題：前後端分離的專案如何seo
難度：阿里p6 ~ p6+、騰訊t22 ~ t23
- 使用prerender。但是回答prerender，面試官肯定會問你，如果不用prerender，讓你直接去實現，好的，請看下面的第二個答案。
- 先去 www.baidu.com/robots.txt 找出常見的爬蟲，然後在nginx上判斷來訪問頁面使用者的User-Agent是否是爬蟲，如果是爬蟲，就用nginx方向代理到我們自己用nodejs + puppeteer實現的爬蟲伺服器上，然後用你的爬蟲伺服器爬自己的前後端分離的前端專案頁面，增加扒頁面的接收延時，保證非同步渲染的介面資料返回，最後得到了頁面的資料，返還給來訪問的爬蟲即可。
如果你有更好的答案或想法，歡迎在這題目對應的github下留言：github.com/airuikun/We…
第 4 題：簡單實現async/await中的async函式
難度：阿里p6 ~ p6+、騰訊t22 ~ t23
async 函式的實現原理，就是將 Generator 函式和自動執行器，包裝在一個函式裡
function spawn(genF) {
return new Promise(function(resolve, reject) {
const gen = genF();
function step(nextF) {
let next;
try {
next = nextF();
} catch (e) {
return reject(e);
}
if (next.done) {
return resolve(next.value);
}
Promise.resolve(next.value).then(
function(v) {
step(function() {
return gen.next(v);
});
},
function(e) {
step(function() {
return gen.throw(e);
});
}
);
}
step(function() {
return gen.next(undefined);
});
});
}
複製程式碼如果你有更好的答案或想法，歡迎在這題目對應的github下留言：github.com/airuikun/We…
第 5 題：1000-div問題
難度：阿里p5 ~ p6、騰訊t21 ~ t22
- 一次性插入1000個div，如何優化插入的效能
- 使用Fragment
var fragment = document.createDocumentFragment();
fragment.appendChild(elem);
複製程式碼- 向1000個並排的div元素中，插入一個平級的div元素，如何優化插入的效能
- 先display:none 然後插入 再display:block
- 賦予key，然後使用virtual-dom，先render，然後diff，最後patch
- 脫離文件流，用GPU去渲染，開啟硬體加速
如果你有更好的答案或想法，歡迎在這題目對應的github下留言：github.com/airuikun/We…
第 6 題：（開放題）2萬小球問題：在瀏覽器端，用js儲存2萬個小球的資訊，包含小球的大小，位置，顏色等，如何做到對這2萬條小球資訊進行最優檢索和儲存
難度：阿里p7、騰訊t31
你面試阿里和騰訊，能否上p7和t31，就看你對開放題能答有多深和多廣。
這題目考察你如何在瀏覽器端中進行大資料的儲存優化和檢索優化。
如果你僅僅只是答用陣列物件儲存了2萬個小球資訊，然後用for迴圈去遍歷進行索引，那是遠遠不夠的。
這題要往深一點走，用特殊的資料結構和演算法進行儲存和索引。
然後進行儲存和速度的一個權衡和對比，最終給出你認為的最優解。
我提供幾個能觸及阿里p7和騰訊t31級別的思路：
- 用ArrayBuffer實現極致儲存
- 哈夫曼編碼 + 字典查詢樹實現更優索引
- 用bit-map實現大資料篩查
- 用hash索引實現簡單快捷的檢索
- 用IndexedDB實現動態儲存擴充瀏覽器端虛擬容量
- 用iframe的漏洞實現瀏覽器端localStorage無限儲存，實現2千萬小球資訊儲存
這種開放題答案不唯一，也不會要你現場手敲程式碼去實現，但是思路一定要行得通，並且是能打動面試官的思路，如果大家有更好的idea，歡迎大家到我的github裡補充：github.com/airuikun/We…
第 7 題：（開放題）接上一題如何儘可能流暢的實現這2萬小球在瀏覽器中，以直線運動的動效顯示出來
難度：阿里p6+ ~ p7、騰訊t23 ~ t31
這題考察對大資料的動畫顯示優化，當然方法有很多種。
但是你有沒有用到瀏覽器的高階api？
你還有沒有用到瀏覽器的專門針對動畫的引擎？
或者你對3D的實踐和優化，都可以給面試官展示出來。
提供幾個思路：
- 使用GPU硬體加速
- 使用webGL
- 使用assembly輔助計算，然後在瀏覽器端控制動畫幀頻
- 用web worker實現javascript多執行緒，分塊處理小球
- 用單連結串列樹演算法和攜程機制，實現任務動態分割和任務暫停、恢復、回滾，動態渲染和處理小球
如果大家有更好的idea，歡迎大家到我的github裡補充：github.com/airuikun/We…
第 8 題：（開放題）100億排序問題：記憶體不足，一次只允許你裝載和操作1億條資料，如何對100億條資料進行排序。
難度：阿里p6+ ~ p7、騰訊t23 ~ t31
這題是考察演算法和實際問題結合的一個問題
眾所周知，騰訊玩的是社交，使用者量極大。很多場景的資料量都是百億甚至千億級別。
那麼如何對這些資料進行高效的操作呢，可以通過這題考察出來。
以前老聽說很多人問，前端學演算法沒有用，考演算法都是垃圾，面不出候選人的能力
其實。。。老哥實話告訴你，當你在做前端需要用到crc32、並查集、字典樹、哈夫曼編碼、LZ77之類東西的時候
已經是涉及到框架實現和極致優化層面了
那時你就已經到了另外一個前端高階境界了
所以不要牴觸演算法，可能只是我們目前的眼界和能力，還沒觸及到那個層級
我前面已經公佈了兩道開放題的答案了，相信大家已經有所參悟。我覺得在思考開放題的過程中，會有很多意想不到的成長，所以我建議這道題大家可以嘗試自己思考一下。本題答案會在週五公佈到我的github上。 對應的github地址為：github.com/airuikun/We…
第 9 題：（開放題）a.b.c.d和a['b']['c']['d']，哪個效能更高
難度：阿里p7 ~ p7+、騰訊t31 ~ t32
別看這題，題目上每個字都能看懂，但是裡面涉及到的知識，暗藏殺雞
這題要往深處走，會涉及ast抽象語法樹、編譯原理、v8核心對原生js實現問題
直接對標阿里p7 ~ p7+和騰訊t31 ~ t32職級，我覺得這個題是這篇文章裡最難的一道題，所以我放在了開放題中的最後一題
大家多多思考，本題答案會在週五公佈到我的github上
對應的github地址為：github.com/airuikun/We…
第 10 題：git時光機問題
難度：阿里p5 ~ p6+、騰訊t21 ~ t23
現在大廠，已經全部都是用git了，基本沒人使用svn了
很多面試候選人對git只會commit、pull、push
但是有沒有使用過reflog、cherry-pick等等，這些都很能體現出來你對程式碼管理的靈活程度和程式碼質量管理。
針對git時光機經典問題，我專門寫了一個文章，輕鬆搞笑通俗易懂，大家可以看一下，放鬆放鬆，同時也能學到對git的時光機操作《git時光機》
結語
本人還寫了一些前端進階知識的文章，如果覺得不錯可以點個star。
blog專案地址是：github.com/airuikun/bl…
我是小蝌蚪，騰訊高階前端工程師，跟著我一起每週攻克幾個前端技術難點。希望在小夥伴前端進階的路上有所幫助，助力大家進入自己理想的企業。
交流
歡迎關注我的微信公眾號，微信掃下面二維碼或搜尋“前端屌絲”，講述了一個前端屌絲逆襲的心路歷程，共勉。