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

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

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

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

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

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

很多人在google上搜索“前端面試 + https詳解”，把答案倒背如流，但是問到如何劫持https請求的時候就一臉懵逼，是因為還是停留在https理論性階段。

想告訴大家的是，就算是https，也不是絕對的安全，以下提供一個本地劫持https請求的簡單思路。

模擬中間人攻擊，以百度為例

先用OpenSSL查看下證書，直接調(diào)用openssl庫識別目標(biāo)服務(wù)器支持的SSL/TLS cipher suite

    openssl s_client -connect www.baidu.com:443

用sslcan識別ssl配置錯誤，過期協(xié)議，過時cipher suite和hash算法

    sslscan -tlsall www.baidu.com:443

分析證書詳細數(shù)據(jù)

    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

寫轉(zhuǎn)發(fā)規(guī)則，將80、443端口進行轉(zhuǎn)發(fā)給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欺騙

如果你有更好的想法或疑問，歡迎在這題目對應(yīng)的github下留言：https://github.com/airuikun/W...

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

語義化的HTML代碼，符合W3C規(guī)范：語義化代碼讓搜索引擎容易理解網(wǎng)頁

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

重要內(nèi)容不要用js輸出：爬蟲不會執(zhí)行js獲取內(nèi)容

少用iframe：搜索引擎不會抓取iframe中的內(nèi)容

非裝飾性圖片必須加alt

提高網(wǎng)站速度：網(wǎng)站速度是搜索引擎排序的一個重要指標(biāo)

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

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

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

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

async 函數(shù)的實現(xiàn)原理，就是將 Generator 函數(shù)和自動執(zhí)行器，包裝在一個函數(shù)里

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);
        });
    });
}

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

一次性插入1000個div，如何優(yōu)化插入的性能

使用Fragment

    var fragment = document.createDocumentFragment();
    fragment.appendChild(elem);

向1000個并排的div元素中，插入一個平級的div元素，如何優(yōu)化插入的性能

先display:none 然后插入 再display:block

賦予key，然后使用virtual-dom，先render，然后diff，最后patch

脫離文檔流，用GPU去渲染，開啟硬件加速

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

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

這題目考察你如何在瀏覽器端中進行大數(shù)據(jù)的存儲優(yōu)化和檢索優(yōu)化。

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

這題要往深一點走，用特殊的數(shù)據(jù)結(jié)構(gòu)和算法進行存儲和索引。

然后進行存儲和速度的一個權(quán)衡和對比，最終給出你認(rèn)為的最優(yōu)解。

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

用ArrayBuffer實現(xiàn)極致存儲

哈夫曼編碼 + 字典查詢樹實現(xiàn)更優(yōu)索引

用bit-map實現(xiàn)大數(shù)據(jù)篩查

用hash索引實現(xiàn)簡單快捷的檢索

用IndexedDB實現(xiàn)動態(tài)存儲擴充瀏覽器端虛擬容量

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

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

這題考察對大數(shù)據(jù)的動畫顯示優(yōu)化，當(dāng)然方法有很多種。

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

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

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

提供幾個思路：

使用GPU硬件加速

使用webGL

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

用web worker實現(xiàn)javascript多線程，分塊處理小球

用單鏈表樹算法和攜程機制，實現(xiàn)任務(wù)動態(tài)分割和任務(wù)暫停、恢復(fù)、回滾，動態(tài)渲染和處理小球

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

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

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

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

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

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

已經(jīng)是涉及到框架實現(xiàn)和極致優(yōu)化層面了

那時你就已經(jīng)到了另外一個前端高階境界了

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

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

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

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

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

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

對應(yīng)的github地址為：https://github.com/airuikun/W...

現(xiàn)在大廠，已經(jīng)全部都是用git了，基本沒人使用svn了

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

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

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

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

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

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