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

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

項(xiàng)目地址是：github.com/airuikun/We…

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

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

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

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

很多人在google上搜索“前端面試 + https詳解”，把答案倒背如流，但是問到如何劫持https請(qǐng)求的時(shí)候就一臉懵逼，是因?yàn)檫€是停留在https理論性階段。

想告訴大家的是，就算是https，也不是絕對(duì)的安全，以下提供一個(gè)本地劫持https請(qǐng)求的簡單思路。

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

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

    openssl s_client -connect www.baidu.com:443

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

    sslscan -tlsall www.baidu.com:443

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

    sslscan -show-certificate --no-ciphersuites www.baidu.com:443

生成一個(gè)證書

    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端口進(jìn)行轉(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進(jìn)行arp欺騙

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

難度：阿里p5、騰訊t21

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

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

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

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

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

非裝飾性圖片必須加alt

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

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

難度：阿里p6 ~ p6+、騰訊t22 ~ t23

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

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

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

難度：阿里p6 ~ p6+、騰訊t22 ~ t23

async 函數(shù)的實(shí)現(xiàn)原理，就是將 Generator 函數(shù)和自動(dòng)執(zhí)行器，包裝在一個(gè)函數(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);
        });
    });
}

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

難度：阿里p5 ~ p6、騰訊t21 ~ t22

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

使用Fragment

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

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

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

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

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

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

難度：阿里p7、騰訊t31

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

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

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

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

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

我提供幾個(gè)能觸及阿里p7和騰訊t31級(jí)別的思路：

用ArrayBuffer實(shí)現(xiàn)極致存儲(chǔ)

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

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

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

用IndexedDB實(shí)現(xiàn)動(dòng)態(tài)存儲(chǔ)擴(kuò)充瀏覽器端虛擬容量

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

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

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

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

但是你有沒有用到瀏覽器的高級(jí)api？

你還有沒有用到瀏覽器的專門針對(duì)動(dòng)畫的引擎？

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

提供幾個(gè)思路：

使用GPU硬件加速

使用webGL

使用assembly輔助計(jì)算，然后在瀏覽器端控制動(dòng)畫幀頻

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

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

如果大家有更好的idea，歡迎大家到我的github里補(bǔ)充：github.com/airuikun/We…

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

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

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

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

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

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

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

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

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

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

難度：阿里p7 ~ p7+、騰訊t31 ~ t32

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

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

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

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

對(duì)應(yīng)的github地址為：github.com/airuikun/We…

難度：阿里p5 ~ p6+、騰訊t21 ~ t23

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

很多面試候選人對(duì)git只會(huì)commit、pull、push

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

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

本人還寫了一些前端進(jìn)階知識(shí)的文章，如果覺得不錯(cuò)可以點(diǎn)個(gè)star。

blog項(xiàng)目地址是：github.com/airuikun/bl…

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