[[316271]]

 面試題精選

大廠的一面面試題，大家基本上都能在google上刷到，見過就會(huì)，沒見過就死。通過刷題，基本上能做出來85%以上。

但是到了二面，你會(huì)發(fā)現(xiàn)難度徒然上升，一道題內(nèi)，涉及到的技術(shù)點(diǎn)很多，很少能在網(wǎng)上查到原題目，因?yàn)槎娴念}目大部分都是從工作中提煉出來的技術(shù)點(diǎn)，需要候選人通過自己的想象力和技術(shù)實(shí)力去設(shè)計(jì)解決方案。非?？简?yàn)候選人前端能力。

第 1 題：在nodejs開發(fā)的時(shí)候 處理過什么windows和mac的平臺(tái)兼容性問題

難度：阿里p5 ~ p6

很多候選人一上來就說自己精通nodejs開發(fā)，但是經(jīng)過面試以后，發(fā)現(xiàn)其實(shí)都只是停留在demo的水平，都只是在官網(wǎng)上把例子下載下來隨便運(yùn)行一下，覺得nodejs其實(shí)也就這醬紫。

其實(shí)通過nodejs真正開發(fā)過大型工程化工具cli，你就會(huì)發(fā)現(xiàn)存在很多的windows和mac等系統(tǒng)的兼容性問題，甚至是連nodejs官網(wǎng)上的API都是有問題并且是不可信的。

我隨意列幾個(gè)點(diǎn)，歡迎大家補(bǔ)充：

•  兼容環(huán)境變量設(shè)置，用cross-env，因?yàn)閑xport和set有系統(tǒng)差異性
•  windows不支持 & ,并行執(zhí)行npm-script用npm-run-all或者concurrently
•  異步同步化:util.promisify + async/await
•  不要直接用官網(wǎng)的fs.readFileSync，用fs-extra去代替
•  拼接路徑要用path.join，Unix系是/，Windows是\

還有好多，懶得寫了

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

第 2 題：設(shè)計(jì)一個(gè)方案，在瀏覽器中點(diǎn)擊一個(gè)button，然后能在你的前端項(xiàng)目源碼文件中增加一個(gè)index.js文件，如何實(shí)現(xiàn)？提供思路

難度：阿里p6 ~ p7

這題就是典型的大廠二面題，題目簡(jiǎn)單一看就明白，但是真要實(shí)現(xiàn)能寫一條龍出來。

大家都知道，因?yàn)榘踩拗疲瑸g覽器是不能直接操作你電腦里的文件系統(tǒng)的，但是這題卻讓你點(diǎn)擊一個(gè)button，能在你的前端項(xiàng)目代碼文件里生成一個(gè)文件，那怎么實(shí)現(xiàn)呢？

其實(shí)你如果看了很多的跨平臺(tái)包的核心core文件，你就會(huì)發(fā)現(xiàn)他們實(shí)現(xiàn)原理都類似，都是約定好一個(gè)規(guī)范，然后實(shí)現(xiàn)一個(gè)bridge橋接去進(jìn)行權(quán)限穿透。要寫出來就太多了，大家可以自行去研究一下。

還有一個(gè)思路，涉及到npm + cli + node server去實(shí)現(xiàn)。首先實(shí)現(xiàn)一個(gè)npm插件，在bin里注冊(cè)一個(gè)命令，當(dāng)你在前端項(xiàng)目中npm run start后，調(diào)用這個(gè)命令，通過這個(gè)命令起一個(gè)node-dev-server，然后通過http請(qǐng)求去讓這個(gè)node-dev-server去創(chuàng)建index.js文件。

這題其實(shí)也有很簡(jiǎn)單的方法可以去實(shí)現(xiàn)，有簡(jiǎn)單有難，很靈活，當(dāng)然你的回答越難越有深度，就越能體現(xiàn)你的創(chuàng)造力和實(shí)力。

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

第 3 題：如果一個(gè)實(shí)習(xí)生，他本地git的A分支被誤刪了， A分支代碼沒有被push到遠(yuǎn)程，如何找到之前A的提交記錄和代碼

難度：阿里p6 ~ p6+

這個(gè)誤刪分支導(dǎo)致代碼丟失的錯(cuò)誤，經(jīng)常會(huì)出現(xiàn)在實(shí)習(xí)生和新招的校招生當(dāng)中，如果你是一個(gè)前端團(tuán)隊(duì)的main coder或者項(xiàng)目負(fù)責(zé)人，對(duì)git必須要非常熟悉，要不然會(huì)經(jīng)常出現(xiàn)代碼誤刪，代碼丟失等問題。這個(gè)問題你如何解決呢？

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

第 4 題：如果你用nodejs實(shí)現(xiàn)的爬蟲服務(wù)器的IP被指定網(wǎng)站封了，如何解封？

難度：阿里p6 ~ p7

如果你用nodejs實(shí)現(xiàn)爬蟲去扒取網(wǎng)站內(nèi)容，就很有可能會(huì)被別人反爬蟲機(jī)制給封殺掉。當(dāng)然，解決方法多種多樣，我沒做過大型完善的爬蟲服務(wù)，但是做過小型的，遇到這種情況我實(shí)現(xiàn)方案是做幾層ip池，當(dāng)抓取失敗后，通過自動(dòng)隨機(jī)切換ip代理池去繞過封鎖，我簡(jiǎn)單寫一下ip代理的實(shí)現(xiàn)原理的偽代碼吧，其實(shí)就是用nodejs實(shí)現(xiàn)一個(gè)代理，很簡(jiǎn)單   

http.createServer((req, res)=>{  
     request(  
       `http://xxx/${req.url}`,  
       { proxy: "xxx.xxx.xxx:xxx" },  
       function(error, response, body) {  
         if (!error && response.statusCode == 200) {  
           res.end(body);  
         } else {  
           console.log(error);  
         }  
       }  
     );  
   }).listen(8888,()=>{  
       console.log('run')  
   }); 

第 5 題：用nodejs，將base64轉(zhuǎn)化成png文件

難度：阿里p5 ~ p6 

const fs = require('fs');  
const path = 'xxx/'+ Date.now() +'.png';  
const base64 = data.replace(/^data:image\/\w+;base64,/, "");//去掉圖片base64碼前面部分data:image/png;base64  
const dataBuffer = new Buffer(base64, 'base64'); //把base64碼轉(zhuǎn)成buffer對(duì)象，  
fs.writeFile(path, dataBuffer, function(err){//用fs寫入文件  
    if(err){  
        console.log(err);  
    }else{  
        console.log('寫入成功！');  
    }  
}) 

一般你要是做出來了將base64轉(zhuǎn)化成png文件，面試官又會(huì)壞壞的讓你舉一反三一下，會(huì)問你：實(shí)現(xiàn)一下將png文件，轉(zhuǎn)化成base64，來少年，實(shí)現(xiàn)一下   

const fs = require("fs");  
    const util = require("util");  
    const imageData = await util.promisify(fs.readFileSync(fileUrl)); // 例：xxx/xx/xx.png  
    const imageBase64 = imageData.toString("base64");  
    const imagePrefix = "data:image/png;base64,";  
    console.log(imagePrefix + imageBase64); 

第 6 題：請(qǐng)?jiān)O(shè)計(jì)一個(gè)方案：有a、b、c三個(gè)npm插件，它們會(huì)經(jīng)常更新，在前端項(xiàng)目npm run start啟動(dòng)后，要求a、b、c三個(gè)npm插件自動(dòng)更新到最新版本

難度：阿里p5+ ~ p6+ 實(shí)現(xiàn)方案很多，提供一個(gè)思路：

自行實(shí)現(xiàn)一個(gè)x插件，注冊(cè)一個(gè)全局命令叫xxx，npm run start的時(shí)候，并行執(zhí)行這個(gè)xxx命令，xxx命令會(huì)通過npm info調(diào)取a、b、c三個(gè)插件的最新信息，分別截取version，然后與本地三個(gè)插件的version進(jìn)行對(duì)比，發(fā)現(xiàn)不同的，就去update。

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

第 7 題：大文件轉(zhuǎn)存問題：服務(wù)器A有一個(gè)1000G的文件， 需要通過服務(wù)端B轉(zhuǎn)發(fā)到服務(wù)端C，但是服務(wù)器B內(nèi)存只有1個(gè)g， 怎么去實(shí)現(xiàn)這個(gè)大文件轉(zhuǎn)存

難度：阿里p6+ ~ p7+ 這題首先要實(shí)現(xiàn)在內(nèi)存不足的情況下進(jìn)行轉(zhuǎn)發(fā)文件流，

當(dāng)你答出來以后，面試官肯定會(huì)問你，當(dāng)不小心斷網(wǎng)了，如何繼續(xù)斷點(diǎn)續(xù)傳？

你還能想出這整個(gè)流程中存在的其他什么問題？

死亡三連問，就問你怕不怕

代碼太長(zhǎng)我就不貼了，小伙伴自己想一下，歡迎說出你的實(shí)現(xiàn)思路

第 8 題：如何實(shí)現(xiàn)內(nèi)網(wǎng)穿透，端口轉(zhuǎn)發(fā)了解一下？

難度：阿里p5+ ~ p6+

針對(duì)端口轉(zhuǎn)發(fā)經(jīng)典問題，我專門寫了一個(gè)文章，輕松搞笑通俗易懂，大家可以看一下，放松放松《小蝌蚪傳記：端口轉(zhuǎn)發(fā)——夜店傳說》 地址：https://github.com/airuikun/blog/issues/6