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

第一名的小蝌蚪發表於2019-04-15
前端面試題

前言

在大廠工作了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…

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

交流

歡迎關注我的微信公眾號，微信掃下面二維碼或搜尋“前端屌絲”，講述了一個前端屌絲逆襲的心路歷程，共勉。

image

相關文章