摘要：前言在大廠工作了年，當了年的前端面試官，把大廠常問的面試題與答案匯總在我的中。第題如何劫持的請求，提供思路難度阿里騰訊很多人在上搜索前端面試詳解，把答案倒背如流，但是問到如何劫持請求的時候就一臉懵逼，是因為還是停留在理論性階段。

在大廠工作了6年，當了3年的前端面試官，把大廠常問的面試題與答案匯總在我的Github中。希望對大家有所幫助，助力大家進入自己理想的企業。

項目地址是：https://github.com/airuikun/W...

如果你在大廠面試的時候遇到了什么不懂的問題，歡迎給我提issue，我會把答案和考點都列出來，公布在下一期的面試周刊里。

大家如果去大廠面試過，就會發現，在網上刷了很多的前端面試題，但是去大廠面試的時候還是一頭霧水，那是因為那些在網上一搜就能搜出來的題，大廠的面試官基本看不上，他們都會問一些開放題，在回答開放題的過程中，就能摸清你知識技能的廣度和深度，所以本期會加入幾道我在面試候選人常用的開放題，供大家學習和思考。

我把下面每道題的難度高低，和對標了大廠的多少職級，都寫上去了，大家可以參考一下自己是什么職級。

很多人在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下留言：https://github.com/airuikun/W...

合理的title、description、keywords：搜索對著三項的權重逐個減小，title值強調重點即可；description把頁面內容高度概括，不可過分堆砌關鍵詞；keywords列舉出重要關鍵詞。

語義化的HTML代碼，符合W3C規范：語義化代碼讓搜索引擎容易理解網頁

重要內容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，保證重要內容一定會被抓取

重要內容不要用js輸出：爬蟲不會執行js獲取內容

少用iframe：搜索引擎不會抓取iframe中的內容

非裝飾性圖片必須加alt

提高網站速度：網站速度是搜索引擎排序的一個重要指標

如果你有更好的答案或想法，歡迎在這題目對應的github下留言：https://github.com/airuikun/W...

使用prerender。但是回答prerender，面試官肯定會問你，如果不用prerender，讓你直接去實現，好的，請看下面的第二個答案。

先去 https://www.baidu.com/robots.txt 找出常見的爬蟲，然后在nginx上判斷來訪問頁面用戶的User-Agent是否是爬蟲，如果是爬蟲，就用nginx方向代理到我們自己用nodejs + puppeteer實現的爬蟲服務器上，然后用你的爬蟲服務器爬自己的前后端分離的前端項目頁面，增加扒頁面的接收延時，保證異步渲染的接口數據返回，最后得到了頁面的數據，返還給來訪問的爬蟲即可。

如果你有更好的答案或想法，歡迎在這題目對應的github下留言：https://github.com/airuikun/W...

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下留言：https://github.com/airuikun/W...

一次性插入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下留言：https://github.com/airuikun/W...

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

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

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

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

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

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

用ArrayBuffer實現極致存儲

哈夫曼編碼 + 字典查詢樹實現更優索引

用bit-map實現大數據篩查

用hash索引實現簡單快捷的檢索

用IndexedDB實現動態存儲擴充瀏覽器端虛擬容量

用iframe的漏洞實現瀏覽器端localStorage無限存儲，實現2千萬小球信息存儲

這種開放題答案不唯一，也不會要你現場手敲代碼去實現，但是思路一定要行得通，并且是能打動面試官的思路，如果大家有更好的idea，歡迎大家到我的github里補充：https://github.com/airuikun/W...

這題考察對大數據的動畫顯示優化，當然方法有很多種。

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

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

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

提供幾個思路：

使用GPU硬件加速

使用webGL

使用assembly輔助計算，然后在瀏覽器端控制動畫幀頻

用web worker實現javascript多線程，分塊處理小球

用單鏈表樹算法和攜程機制，實現任務動態分割和任務暫停、恢復、回滾，動態渲染和處理小球

如果大家有更好的idea，歡迎大家到我的github里補充：https://github.com/airuikun/W...

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

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

那么如何對這些數據進行高效的操作呢，可以通過這題考察出來。

以前老聽說很多人問，前端學算法沒有用，考算法都是垃圾，面不出候選人的能力

其實。。。老哥實話告訴你，當你在做前端需要用到crc32、并查集、字典樹、哈夫曼編碼、LZ77之類東西的時候

已經是涉及到框架實現和極致優化層面了

那時你就已經到了另外一個前端高階境界了

所以不要抵觸算法，可能只是我們目前的眼界和能力，還沒觸及到那個層級

我前面已經公布了兩道開放題的答案了，相信大家已經有所參悟。我覺得在思考開放題的過程中，會有很多意想不到的成長，所以我建議這道題大家可以嘗試自己思考一下。本題答案會在周五公布到我的github上。
對應的github地址為：https://github.com/airuikun/W...

別看這題，題目上每個字都能看懂，但是里面涉及到的知識，暗藏殺雞

這題要往深處走，會涉及ast抽象語法樹、編譯原理、v8內核對原生js實現問題

直接對標阿里p7 ~ p7+和騰訊t31 ~ t32職級，我覺得這個題是這篇文章里最難的一道題，所以我放在了開放題中的最后一題

大家多多思考，本題答案會在周五公布到我的github上

對應的github地址為：https://github.com/airuikun/W...

現在大廠，已經全部都是用git了，基本沒人使用svn了

很多面試候選人對git只會commit、pull、push

但是有沒有使用過reflog、cherry-pick等等，這些都很能體現出來你對代碼管理的靈活程度和代碼質量管理。

針對git時光機經典問題，我專門寫了一個文章，輕松搞笑通俗易懂，大家可以看一下，放松放松，同時也能學到對git的時光機操作《git時光機》

本人還寫了一些前端進階知識的文章，如果覺得不錯可以點個star。

blog項目地址是：https://github.com/airuikun/blog

我是小蝌蚪，高級前端工程師，跟著我一起每周攻克幾個前端技術難點。希望在小伙伴前端進階的路上有所幫助，助力大家進入自己理想的企業。