【週刊-2】三年大廠面試官-前端面試題（偏難）

前言

在大廠工做了6年，當了3年的前端面試官，把大廠常問的面試題與答案彙總在個人Github中。但願對你們有所幫助，助力你們進入本身理想的企業。

項目地址是：github.com/airuikun/We…

若是你在大廠面試的時候遇到了什麼不懂的問題，歡迎給我提issue，我會把答案和考點都列出來，公佈在下一期的面試週刊裏。

面試題精選

你們若是去大廠面試過，就會發現，在網上刷了不少的前端面試題，可是去大廠面試的時候仍是一頭霧水，那是由於那些在網上一搜就能搜出來的題，大廠的面試官基本看不上，他們都會問一些開放題，在回答開放題的過程當中，就能摸清你知識技能的廣度和深度，因此本期會加入幾道我在面試候選人經常使用的開放題，供你們學習和思考。

我把下面每道題的難度高低，和對標了大廠的多少職級，都寫上去了，你們能夠參考一下本身是什麼職級。

第 1 題：如何劫持https的請求，提供思路

難度：阿里p6+ ~ p七、騰訊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優化

難度：阿里p五、騰訊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 ~ p六、騰訊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萬條小球信息進行最優檢索和存儲

難度：阿里p七、騰訊t31

你面試阿里和騰訊，可否上p7和t31，就看你對開放題能答有多深和多廣。

這題目考察你如何在瀏覽器端中進行大數據的存儲優化和檢索優化。

若是你僅僅只是答用數組對象存儲了2萬個小球信息，而後用for循環去遍歷進行索引，那是遠遠不夠的。

這題要往深一點走，用特殊的數據結構和算法進行存儲和索引。

而後進行存儲和速度的一個權衡和對比，最終給出你認爲的最優解。

我提供幾個能觸及阿里p7和騰訊t31級別的思路：

• 用ArrayBuffer實現極致存儲
• 哈夫曼編碼 + 字典查詢樹實現更優索引
• 用bit-map實現大數據篩查
• 用hash索引實現簡單快捷的檢索
• 用IndexedDB實現動態存儲擴充瀏覽器端虛擬容量
• 用iframe的漏洞實現瀏覽器端localStorage無限存儲，實現2千萬小球信息存儲

這種開放題答案不惟一，也不會要你現場手敲代碼去實現，可是思路必定要行得通，而且是能打動面試官的思路，若是你們有更好的idea，歡迎你們到個人github裏補充：github.com/airuikun/We…

第 7 題：（開放題）接上一題如何儘量流暢的實現這2萬小球在瀏覽器中，以直線運動的動效顯示出來

難度：阿里p6+ ~ p七、騰訊t23 ~ t31

這題考察對大數據的動畫顯示優化，固然方法有不少種。

可是你有沒有用到瀏覽器的高級api？

你還有沒有用到瀏覽器的專門針對動畫的引擎？

或者你對3D的實踐和優化，均可以給面試官展現出來。

提供幾個思路：

• 使用GPU硬件加速
• 使用webGL
• 使用assembly輔助計算，而後在瀏覽器端控制動畫幀頻
• 用web worker實現javascript多線程，分塊處理小球
• 用單鏈表樹算法和攜程機制，實現任務動態分割和任務暫停、恢復、回滾，動態渲染和處理小球

若是你們有更好的idea，歡迎你們到個人github裏補充：github.com/airuikun/We…

第 8 題：（開放題）100億排序問題：內存不足，一次只容許你裝載和操做1億條數據，如何對100億條數據進行排序。

難度：阿里p6+ ~ p七、騰訊t23 ~ t31

這題是考察算法和實際問題結合的一個問題

衆所周知，騰訊玩的是社交，用戶量極大。不少場景的數據量都是百億甚至千億級別。

那麼如何對這些數據進行高效的操做呢，能夠經過這題考察出來。

之前老據說不少人問，前端學算法沒有用，考算法都是垃圾，面不出候選人的能力

其實。。。老哥實話告訴你，當你在作前端須要用到crc3二、並查集、字典樹、哈夫曼編碼、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…

我是小蝌蚪，高級前端工程師，跟着我一塊兒每週攻克幾個前端技術難點。但願在小夥伴前端進階的路上有所幫助，助力你們進入本身理想的企業。