那些年，碰上過的面試題

小樂發表於2018-08-15
面試題

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

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動畫介紹

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

相關文章