阿里校招前端面經

阿里一面是電話面，問得很少，可是挺有深度。面試官一開始就說，看了你的項目，以爲你基礎挺好的，那我就不問基礎了。而後全程就真的沒有問一個基礎問題。。

1.說說你作的那個網頁版手機QQ項目的難點。

我首先想到了滾動條位置沒法還原的問題，也就是點擊列表項跳到詳情頁後再返回時，滾動條位置沒法還原的bug。個人解決辦法是經過vuex來保存每一個組件裏的滾動條的位置，而後返回時再滾動到這個位置便可，不過得設置滾動時間爲0，否則會有明顯的滾動過程，用戶體驗會不好。
而後又想到了作IP定位時遇到的後臺express服務端沒法獲取用戶真實ip地址的問題。其實express是能夠獲取用戶真實ip地址的，只是個人nginx沒有寫好配置，致使express獲取到的始終是127.0.0.1本地ip地址。不管怎麼獲取，都是這個地址。
解決辦法是修改nginx的配置文件：

location / {
   proxy_pass http://localhost:8080;   # 項目真實地址
　 proxy_set_header Host $host;
   proxy_set_header X-Real-IP $remote_addr;
   proxy_set_header REMOTE-HOST $remote_addr;
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

重啓nginx： ./nginx -s reload 便可。
而後在express服務端裏，經過 req.headers[‘x-real-ip’]便可拿到真實ip地址。而後就能夠根據這個ip地址，經過淘寶ip地址庫，定位到用戶的地理位置了。
QQ項目地址：https://github.com/lensh/vue-qq （支持實時羣聊、實時私聊、特別關心、屏蔽聊天、IP地位、實時氣溫顯示等QQ核心功能）

2.Angular和Vue的雙向數據綁定實現的原理？ 若是要你來實現，你會怎樣實現？

還好以前對底層仍是有所瞭解，看過源碼以及一些博客，因此基本答了出來。
Angular的實現： AngularJS 採用「髒值檢測」的方式，數據發生變動後，對於全部的數據和視圖的綁定關係進行一次檢測，識別是否有數據發生了改變，有變化進行處理，可能進一步引起其餘數據的改變，因此這個過程可能會循環幾回，一直到再也不有數據變化發生後，將變動的數據發送到視圖，更新頁面展示。
只有當改變$scope的值、使用內置的$interval、$timeout的時候，纔會進行「髒檢測」。
若是是手動對 ViewModel 的數據進行變動，爲確保變動同步到視圖，須要手動觸發一次「髒值檢測」。
Vue的實現：核心就是數據劫持+發佈/訂閱模式，VueJS 使用 ES5 提供的 Object.defineProperty() 方法，監控對數據的操做，從而能夠自動觸發數據同步。而且，因爲是在不一樣的數據上觸發同步，能夠精確的將變動發送給綁定的視圖，而不是對全部的數據都執行一次檢測。
具體實現可參考 https://github.com/lensh/mvvm 。

3.webpack打包後文件體積過大怎麼辦？

不少方法：異步加載模塊（代碼分割）；提取第三方庫（使用cdn或者vender）；代碼壓縮；去除沒必要要的插件；去除devtool選項等等。

4.看你還寫了一個爬蟲項目，那若是在爬取數據的時候遇到環路了怎麼辦，怎樣避免？

避免方法也不少：簡單限定爬蟲的最大循環次數，對於某web站點訪問超過必定閾值就跳出，避免無限循環。保存一個已訪問url列表，記錄頁面是否被訪問過的技術。廣度優先的爬行，避免深度優先陷入某個站點的環路中，沒法訪問其餘站點。

5.React組件性能優化？immutable.js實現原理？

使用PureRenderMixin、shouldComponentUpdate來避免沒必要要的虛擬DOM diff，在render內部優化虛擬DOM的diff速度，以及讓diff結果最小化。使用immutable.js解決複雜數據diff、clone等問題。
immutable.js實現原理：持久化數據結構，也就是使用舊數據建立新數據時，要保證舊數據同時可用且不變。同時爲了不 deepCopy 把全部節點都複製一遍帶來的性能損耗，Immutable 使用告終構共享，即若是對象樹中一個節點發生變化，只修改這個節點和受它影響的父節點，其它節點則進行共享。

6.有沒有用過Redux，Redux-promise和Redux-trunk是用來幹嗎的，區別是什麼？

明顯是處理異步操做的啊，前者是讓Redux的dispatch方法的參數支持promise，後者是支持函數，並且仍是一個異步函數。異步函數裏面要dispatch兩次，分別表示異步請求開始和異步請求完成。

7.瞭解ES8嗎？說說getOwnPropertyDescriptors函數，對象自身屬性描述符有哪些？

configurable和enumerable的做用？configurable設置爲true後還能刪除該屬性嗎？
以前研究過這個，因此就很容易地回答了出來。該函數返回指定對象（參數）的全部自身屬性描述符。所謂自身屬性描述符就是在對象自身內定義，不是經過原型鏈繼承來的屬性。
屬性描述符：configurable、enumerable、value、writable、get、set。
configurable：當該值爲true時，該屬性描述符纔可以被改變，同時該屬性也能從對應的對象上被刪除。默認爲 false。
enumerable：當且僅當該屬性的 enumerable 爲 true時，該屬性纔可以出如今對象的枚舉屬性中。默認爲 false。

8.Promise.all和Promise.race的區別？

Promise.all 把多個promise實例當成一個promise實例,當這些實例的狀態都發生改變時纔會返回一個新的promise實例，纔會執行then方法。
Promise.race 只要該數組中的 Promise 對象的狀態發生變化（不管是resolve仍是reject）該方法都會返回。

9.只用CSS怎樣實現標籤頁的切換效果？

利用錨點結合CSS的target僞類就能夠了。

10.mod_gzip 和mod_deflate的主要區別是什麼？使用哪一個更好呢？

首先一個區別是安裝它們的Apache Web服務器版本的差別。Apache 1.x系列沒有內建網頁壓縮技術，因此纔去用額外的第三方mod_gzip 模塊來執行壓縮。而Apache 2.x官方在開發的時候，就把網頁壓縮考慮進去，內建了mod_deflate 這個模塊，用以取代mod_gzip。雖然二者都是使用的Gzip壓縮算法，它們的運做原理是相似的。
第二個區別是壓縮質量。mod_deflate 壓縮速度略快而mod_gzip 的壓縮比略高。通常默認狀況下，mod_gzip 會比mod_deflate 多出4%~6％的壓縮量。
第三個區別是對服務器資源的佔用。 通常來講mod_gzip 對服務器CPU的佔用要高一些。mod_deflate 是專門爲確保服務器的性能而使用的一個壓縮模塊，mod_deflate 須要較少的資源來壓縮文件。這意味着在高流量的服務器，使用mod_deflate 可能會比mod_gzip 加載速度更快。

11.nodejs子進程 spawn，exec，execFile和fork的用法和區別？

spawn函數用給定的命令發佈一個子進程，只能運行指定的程序，參數須要在列表中給出。
exec也是一個建立子進程的函數，與spawn函數不一樣它能夠直接接受一個回調函數做爲參數，回調函數有三個參數，分別是err, stdout , stderr。
execFile函數與exec函數相似，但execFile函數更顯得精簡，由於它能夠直接執行所指定的文件。
fork函數可直接運行Node.js模塊，咱們能夠直接經過指定模塊路徑而直接進行操做。

12.nodejs中定時器process.nextTick和setImmediate的區別，優先級。

process.nextTick()的回調函數執行的優先級要高於setImmediate()，process.nextTick()屬於idle觀察者。
setImmediate()屬check觀察者.在每一輪循環檢查中,idle觀察者先於I/O觀察者,I/O觀察者先於check觀察者。
process.nextTick()的回調函數保存在一個數組中，會將異步回調放到當前幀的末尾、io回調以前，若是nextTick過多，會致使io回調不斷延後,最後callback堆積太多。
setImmediate()的結果則是保存在鏈表中，會將異步回調放到下一幀,不影響io回調,不會形成callback 堆積。
process.nextTick()在每輪循環中會將數組中的回調函數所有執行完，而setImmediate()在每輪循環中執行鏈表中的一個回調函數。
process.nextTick()，效率最高，消費資源小，但會阻塞CPU的後續調用；
setTimeout()，精確度不高，可能有延遲執行的狀況發生，且由於動用了紅黑樹，因此消耗資源大；
setImmediate()，消耗的資源小，也不會形成阻塞，但效率也是最低的。

13.Koa2和Koa1的區別，和express的區別？

（1）異步流程控制
Express 採用 callback 來處理異步，Koa v1 採用 generator，Koa v2 採用 async/await。
generator 和 async/await 使用同步的寫法來處理異步，明顯好於 callback 和 promise，async/await 在語義化上又要比 generator 更強。
（2）錯誤處理
Express 使用 callback 捕獲異常，對於深層次的異常捕獲不了，Koa 使用 try catch，能更好地解決異常捕獲。

14.一行代碼實現數組去重？

[…new Set([1,2,3,1,’a’,1,’a’])]

15.http2.0的優點？

當時大概地講了一下意思，不過沒答徹底。後了又複習了下：
（1）採用二進制格式傳輸數據，而非 http1.1 的文本格式，二進制格式在協議的解析和優化擴展上帶來更多的優點和可能
（2）對消息頭採用 HPACK 進行壓縮傳輸，可以節省消息頭佔用的網絡的流量，而 http1.1 每次請求，都會攜帶大量冗餘頭信息，浪費了不少帶寬資源，頭壓縮可以很好的解決該問題
（3）多路複用，就是多個請求都是經過一個 TCP 鏈接併發完成，http1.1 雖然經過pipeline也能併發請求，可是多個請求之間的響應會被阻塞的，因此 pipeline 至今也沒有被普及應用，而 http2.0作到了真正的併發請求，同時，流還支持優先級和流量控制
（4）Server Push，服務端可以更快的把資源推送給客戶端，例如服務端能夠主動把 JS 和 CSS 文件推送給客戶端，而不須要客戶端解析 HTML再發送這些請求，當客戶端須要的時候，它已經在客戶端了。

16.什麼是BFC，做用有哪些？哪些狀況下會觸發BFC？

當時觸發條件只答出了一、二、四、5，並且4只說了inline-block。這種不少狀況的一時半會確實很難答徹底。。
完整答案：
BFC（塊級格式化上下文），是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面元素，反之亦然。它與普通的塊框相似，但不一樣之處在於:
（1）能夠阻止元素被浮動元素覆蓋。
（2）能夠包含浮動元素。
（3）能夠阻止margin重疊。
知足下列條件之一就可觸發BFC：
【1】根元素，即HTML元素
【2】float的值不爲none
【3】overflow的值不爲visible
【4】display的值爲inline-block、table-cell、table-caption
【5】position的值爲absolute或fixed

17.304緩存，有了Last-Modified，爲何還要用ETag？有了Etag，爲何還要用Last-Modified？Etag通常怎麼生成？

有了Last-Modified，爲何還要用ETag？
（1）由於若是在一秒鐘以內對一個文件進行兩次更改，Last-Modified就會不正確。
（2）某些服務器不能精確的獲得文件的最後修改時間。
（3）一些文件也許會週期性的更改，可是他的內容並不改變(僅僅改變的修改時間)，這個時候咱們並不但願客戶端認爲這個文件被修改了，而從新GET。

有了Etag，爲何還要用Last-Modified？
由於有些時候 ETag 能夠彌補 Last-Modified 判斷的缺陷，可是也有時候 Last-Modified 能夠彌補 ETag 判斷的缺陷，好比一些圖片等靜態文件的修改，若是每次掃描內容生成 ETag 來比較，顯然要比直接比較修改時間慢不少。全部說這兩種判斷是相輔相成的。

ETag的值服務端是對文件的索引節，大小和最後修改時間進行Hash後獲得的。

18.你有什麼要問的嗎？

大概就只記得問了這些，大部分都回答了出來。固然回答時還扯了一些其它的，就不說了。整體來講仍是挺有深度的，往後還得繼續努力。
最後，個人github:https://github.com/lensh