酷狗一面

1. 如何實現三欄佈局（左右兩邊固定寬度，中間自適應）？

1. 使用flex佈局： 父元素設定 display: flex，左右兩邊設定固定寬度，中間設定 flex-grow: 1；

2. 使用浮動佈局：左右兩邊設定固定寬度，而且分別設定 float:left和right，這個方法有一個需要注意的是在HTML中，中間欄需要和右邊欄進行對調；

3. 使用絕對定位佈局：左右兩邊設定固定寬度和 position:absolute,而且分別設定 left: 0和 right: 0

   ，中間欄只要設定左右margin為左右欄的寬度就可以了（需要注意的是左右兩邊需要設定 top: 0，不然右邊會被訂下來）

補充

其實還有表格佈局，網格佈局和聖盃佈局，詳細請看三欄佈局的5種解決方案及優缺點

2. 如何實現彈窗水平垂直居中？

3. ==和 === 的區別

===為恆等符：當等號兩邊的值為相同型別的時候，直接比較等號兩邊的值，值相同則返回true，若等號兩邊的值型別不同時直接返回false。

==為等值符： 當等號兩邊的值為相同型別時比較值是否相同，型別不同時會發生型別的自動轉換，轉換為相同的型別後再作比較。
a、如果一個是null、一個是undefined，那麼[相等]。
b、如果一個是字串，一個是數值，把字串轉換成數值再進行比較。
c、如果任一值是 true，把它轉換成 1 再比較；如果任一值是 false，把它轉換成 0 再比較。
d、如果一個是物件，另一個是數值或字串，把物件轉換成基礎型別的值再比較。物件轉換成基礎型別，利用它的toString或者valueOf方法。 js核心內建類，會嘗試valueOf先於toString；例外的是Date，Date利用的是toString轉換。非js核心的物件，令說（比較麻 煩，我也不大懂）
e、任何其他組合，都[不相等]。

4. 30 == '30' 的過程是怎樣的？

1. 30為數值型別，而'30'未字串型別，因此等號兩邊的資料型別不相等，需要進行轉換型別；

2. 由於一個是數值，另一個字串，所以需要將字串轉換成數值再進行比較，即 '30' => 30;

3. 這時等號兩邊同樣為數值型資料，即 30 == 30，所以返回 true

5. 以下程式碼輸出的是什麼？為什麼呢？

1. for (var i=0; i<5; i++) {

2. setTimeout( function timer() {

3. console.log(i);

4. }, 0 );

5. }

6. 你有使用過閉包嗎？

7. 模組化的非同步載入怎樣做？

8. window.onload執行時間？

9.圖片載入完的時候會執行嗎？

10. 瞭解JS繼承嗎？

11. 利用原型鏈的繼承有什麼缺點嗎？

12. 知道如何修改this的指向嗎？

修改this指向的辦法有三種： apply、 call和 bind
apply、 call：通過傳入需要指向的物件，從而改變 this的指向，指向傳入的第一個引數;
bind：它會建立一個函式的例項，其this值會被繫結到傳給bind()函式的值。

1. window.color = 'red';

2. var o = { color:'blue' };

3. function sayColor(){

4.    console.log(this.color);

5. }

6. var globalSaycolor = sayColor;

7. var objectSaycolor = sayColor.bind(o);

8. globalSaycolor();  // red

9. objectSaycolor();  // blue

補充

其實還有一種：new關鍵字改變this指向
因為在 new的過程中，其中有一個步驟為將建構函式內部的 this指向例項物件，所以通過 new關鍵字也可以改變 this的指向。

13. apply和 call的區別？

相同點：可以用來代替另一個物件呼叫一個方法，將一個函式的物件上下文從初始的上下文改變為由thisObj指定的新物件。

不同點：實際上， apply和 call的功能是一樣的，只是傳入的引數列表形式不同。
apply：最多隻能有兩個引數——新 this物件和一個數組 argArray。如果給該方法傳遞多個引數，則把引數都寫進這個數組裡面，當然，即使只有一個引數，也要寫進數組裡。如果 argArray不是一個有效的陣列或 arguments物件，那麼將導致一個 TypeError。如果沒有提供 argArray和 thisObj任何一個引數，那麼Global物件將被用作 thisObj，並且無法被傳遞任何引數。

call：它可以接受多個引數，第一個引數與 apply一樣，後面則是一串引數列表。這個方法主要用在js物件各方法相互呼叫的時候，使當前this例項指標保持一致，或者在特殊情況下需要改變this指標。如果沒有提供 thisObj引數，那麼 Global 物件被用作 thisObj。

14. 有一個按鈕是非同步生成的，怎樣對它進行事件繫結？

由於按鈕是非同步生成的，所以我選擇將事件繫結在按鈕生成的父元素上，通過事件委託的機制，利用事件冒泡，把事件繫結在父元素上，可以通過判斷 event.target按鈕是否已經生成，從而實現相應的事件。

科普補充：
事件冒泡可以形象地比喻為把一顆石頭投入水中，泡泡會一直從水底冒出水面。也就是說，事件會從最內層的元素開始發生，一直向上傳播，直到 document物件；
事件捕獲則跟事件冒泡相反，事件會從 document物件開始發生，直到最具體的元素；

15. 跨域有處理過嗎？

我處理過的跨域有兩種情況：

1. 一種是在頁面中嵌入了一個iframe，因此父子iframe間產生了跨域，要解決這個問題，只需要把 document.domain設定成相同的值就可以在兩個頁面裡進行相應的操作了；

2. 另外一種情況是用Vue開發涉及到的跨域問題，這個問題只需要修改config資料夾下的index.js中的dev:{}部分中修改proxyTable引數即可，相當於對跨域的url進行了代理，從而可以順利訪問。

另外說了一下自己比較熟悉的一種跨域解決方案：JSONP
JSONP解決跨域問題的本質其實就是 <script> 標籤可以請求不同域名下的資源，即 <script> 請求不受瀏覽器同源策略影響。

面試官聽到JSONP立刻提出了一個問題：JSONP是否可以支援 POST方法？為什麼？

JSONP只支援 GET的請求方法，上面也提到了JSONP原理其實就是利用 <script> 標籤傳送了一個 URL給伺服器，其實與 ajax XMLHttpRequest協議無關了，相當於輸入了一個 url而已，所以必然只能為 GET請求方法。

16. 既然提到 POST和 GET，說說兩者的區別？

1. 大小： GET提交的資料最大為2k（原則上url長度無限制，可是瀏覽器通常限制url長度在2k左右）； POST理論上沒有限制大小（實際上IIS4中最大量為80KB，IIS5中為100KB）。

2. 傳送方式： GET請求資料放在url上，即HTTP協議頭中，其格式為： url?key=value&key2=value; POST把資料放在HTTP的包體中（Request Body）。

3. 安全性： GET請求可被快取，請求儲存在瀏覽器歷史記錄中； POST則不能被快取。與 POST相比， GET的安全性較差，因為傳送的資料是URL的一部分。

4. 傳送TCP包：對 GET請求只產生一個TCP包，瀏覽器會把 http header和 data一併傳送出去，伺服器響應 200（返回資料）；對於 POST請求產生兩個TCP資料包，瀏覽器先發送 http header，伺服器確認許可權正確響應 100(continue)返回瀏覽器，瀏覽器收到 100確認繼續請求，再次傳送 data，伺服器響應 200（返回資料）。

17. 聽到你提到瀏覽器，你瞭解瀏覽器快取的方式嗎？

18. 看你有用過Promise，知道Promise有幾種狀態？

19. 你知道 pending狀態可以停止嗎？

20. 那XMLHttpRequest 的 pending狀態可以停止嗎？

21. 知道Promise和setTimeout的執行順序嗎？

22. vue中生命週期中的鉤子函式用過哪些？

23. 為什麼不把資料放在created函式中？

24. 對Vue的資料雙向繫結有了解嗎？

25. 瞭解重繪和迴流嗎？頁面的載入順序？

26. 如何減少迴流、重繪？怎樣控制只有一部分迴流？

27. 瞭解什麼演算法？快排？

28. 還了解什麼排序演算法？

29. 瞭解二叉查詢樹嗎？

30. 有了解什麼後端語言嗎？知道面向物件的特性嗎？

31. 知道資料庫連線池嗎？

32. 未來前端的規劃？

酷狗二面

在面完第一面之後，本來以為終於結束了，沒想到迎來的是第二技術面，後面面試官介紹說其實本來是應該兩個人同時面我的，因為有一個面試官沒空，所以就錯開了，就有了"二面"了，其實本質上還是一面而已。

1. 自我介紹

2. 問了一下筆試的時候不應該錯的題

3. 理解的HTTP狀態碼有哪些？

4. 正則的題目，對比 /^[a-z0-9][a-z]+$/和 /^[a-z0-9][a-z]*$/的區別？

5. display:none 和 visibility:hidden的區別？

6. CSS選擇器的理解，你知道多少選擇器？

7. CSS3佈局，移動端有用過rem嗎？佈局的話一般怎樣佈局？

8. Flex佈局和傳統的其他佈局有什麼優點？

9. Flex的居中方式有哪些？其他方式有哪些？

10. display設定inline-block的話，多個之間有間隔應該怎樣處理？ (父節點font-size: 0)

11. 更熟悉那方面的技術棧？

12. 對自己專案是怎樣設計和選型的？

13. 有用到vuex嗎？

14. 元件之間的通訊怎樣做到？

15. 真的學習前端是什麼時候開始？

16. 方向是選擇全棧還是隻做前端？

17. 有沒有在nodeJS上做過什麼？

18. 有沒有在npm上面做過開源的學習？

19. 對畢業之後的學習規劃？

END

作者：BlueYuFisher 
https://segmentfault.com/a/1190000016828125