那些年，碰上過的面試題

記錄一下最近碰上的面試題

js篇

1. 介紹一下Array的API/方法，具體到返回值和參數
   join / slice / splice / sort / push一類 / reverse
   經驗總結：要講出來可以拓展的API，拓展話題；要可以牢記不一樣API的返回值，例如reverse是否返回數組？pop返回值是什麼？
2. Array的map與forEach的區別？可用代碼實現輔助解釋
   區別在於map返回一個新的數組，而forEach則時在原數組的基礎上進行修改（容許對原數組進行修改）。
   forEach適合你不須要改變數據的時候，如打印、存入數據庫，而map適合於你須要對數據進行修改等操做，還能夠結合filter、reduce進行操做
3. 介紹一下事件綁定
   事件綁定是指將子元素上的事件綁定到父元素上，利用事件冒泡將子元素事件冒泡到父元素進行處理，當有多個子元素同時綁定時，能夠利用e.target進行區分

4. 如何檢測對象中是否存在某個屬性

   1. 使用in關鍵字，該方法會拿到原型鏈上的屬性
   2. 使用對象的hasOwnProperty方法，該方法只能斷定自有屬性
   3. 用undefined判斷

5. 頁面性能優化

   1. 減小Http請求數
   2. 異步加載js文件（動態建立script標籤、async、defer），主意async和defer區別
   3. 瀏覽器緩存（強緩存、協商緩存）
   4. 使用CDN

   5. DNS預解析

      預解析相關標籤
      ```
      <!--第一個標籤是強制開啓全部a標籤的預解析（包含https）-->
      <meta http-equiv="x-dns-prefetch-control" content="on">
      <!--開啓DNS預解析-->
      <link rel="dns-prefetch" href="//somewhere.com">
      ```

6. 寫出如下程序輸出內容

   var n = 1;
   var a = {
       n: 10,
       fn: function () {
           var n = 100;
           return n + this.n;
       }
   }
   var fn = a.fn;
   
   console.log(a.fn()); // 110
   console.log(fn()); // 101
   console.log(a.fn.call(this)); // 101
   console.log(a.fn.call(a)); // 110

7. 寫出程序輸出內容

   var a = {n: 10, m: 20};
   var b = a;
   var c = b;
   var d = {...b};
   
   b.n = 30;
   c = {n: 40};
   
   console.log(a.n); // 30
   console.log(b); // {n: 30, m: 20}
   console.log(c); // {n: 40}
   console.log(d); // {n: 10, m: 20}
   console.log(a === b); // true
   console.log(a === d); // false
   console.log(b === c); // false
   console.log(a === c); // false

8. 如何獲取一個頁面上的全部元素
9. 圖片懶加載/預加載，同時有10000張圖片怎麼辦？

   目前思路：利用onscroll+scrollTop

   追問：onscroll在什麼狀況下觸發？

   相關連接

10. ES5和ES6的繼承有什麼區別
11. Web動畫的幾種常見方式？
12. POST提交數據的幾種常見Content-Type
13. 如何定義一個方法，經過調用把視頻的一幀生成預覽圖？（能夠考慮Canvas相關）
14. 什麼是重放攻擊，列舉幾種常見的防護手段？

CSS篇

1. 介紹一下position: sticky和fixed的區別
   定位類型：相對定位（relative）、絕對定位（absolute、fixed）、粘性定位（sticky）
   該屬性還在實驗階段
   position: sticky（此段引用MDN）

   MDN中position相關內容

   粘性定位能夠被認爲是相對定位和固定定位的混合。元素在跨越特定閾值前爲相對定位，以後爲固定定位。

2. 介紹一下Flex佈局

   Flex佈局即Flexible Box，彈性佈局，目前主要應用場景在移動端，也有部分PC端場景應用，Flex可以很好解決佈局的問題，有效解決了以往垂直居中難的問題，能夠簡便、完整、響應式的實現各類佈局。

   任何一個容器均可以設置爲flex佈局，設置了以後，子元素的float、clear和vertical-align屬性將會失效。

3. Reflow和Repaint
   簡單介紹Reflow和Repaint，哪一個會觸發哪一個？（觸發順序），哪一個可以避免，哪一個時儘可能減小而不可能避免，css哪些操做會觸發Reflow/Repaint

   Flex by 阮一峯

4. CSS3動畫/CSS動畫與js動畫區別？（性能區別？）/CSS性能優化/CSS動畫性能優化/js動畫介紹

後續還會繼續進行面試題的積累~