初級前端的面試之路（二）

如下若有不對或錯誤的地方，歡迎各位大佬指點，謝謝！

HTML/CSS 相關

迴流和重繪

什麼是迴流？什麼是重繪？

迴流

當 Render Tree 中的一部分節點由於元素的尺寸大小、佈局、隱藏/顯示的切換等改變時，須要對 DOM Tree 進行從新的構建的，這就是迴流。

重繪

當 Render Tree 中的一些元素須要更新部分屬性，而且這些屬性只是影響元素的外觀顯示，不影響佈局的時候，就是重繪。

爲何要用 Sass/Less/Stylus ？

這些 CSS 預處理語言可讓 CSS 具備必定的編程風格，在我實際的開發體驗中給我帶來了許多便捷的地方，而且使用他們更有利於項目的後期維護。

• 能夠定義變量，這對於設置不少重複性顏色來講真的太方便了
• 能夠嵌套式的書寫（仁者見仁智者見智吧），我更喜歡 Stylus 的書寫方式
• 提升了樣式的複用性，避免重複書寫許多公共樣式
• 能夠定義一些函數，這在移動端開發方面能夠作媒體查詢、適配等工做

HTML5/CSS3 新特性

簡單回答了幾個，不是太全面

HTML5

• 更多的語義化標籤（header/nav/footer/section...）
• 音頻、視頻 API
• Canvas
• webSocket
• localStorage/sessionStorage

CSS3

• 新的選擇器（屬性、僞類、僞元素）
• 顏色新增 RGBA/HSLA 模式
• 過渡效果：transition，可實現動畫效果
• 自定義動畫
• 媒體查詢
• 盒子模型

JavaScript 相關

談一談原型和原型鏈

首先，解釋一下什麼是原型：

每個 JS 對象在被建立的時候，就會與之關聯另外一個對象，這個對象就是咱們所說的原型，每個對象都會從原型上繼承屬性

每個 JS 對象在被建立的時候，都具備一個屬性：__proto__,這個屬性會指向該對象的原型。要知道，原型也是一個對象，既然這樣，那麼他的__proto__ 指向 Object 的Object的原型

那麼，Obeject 的原型的原型是什麼？

答案應是：null

沒法再往上層進行查找...這樣經過__proto__向上一直查找所造成的鏈式結構，就是原型鏈。

淺克隆和深克隆

什麼是淺克隆？什麼是深克隆？

淺克隆中原始類型爲值傳遞，對象類型仍未引用傳遞；深克隆中全部元素或者屬性均可以進行徹底的複製，生成一個與原對象徹底不相干的對象，也就是新對象中的全部修改都不會在原對象中有所表現。

如何實現淺克隆？

• JS 內部實現了淺拷貝 Object.assign() ，第一個參數是最終複製的目標對象，後面的全部參數是咱們即將複製的原對象。（該方法適用於數組或者對象）

var newObj = Object.assign({},obj)
複製代碼

• 原生 JS 實現

function shallowCopy(source) {
  let newSource = {};
  for(item in source) {
    if(source.hasOwnProperty(key)) {
      newSource[key] = source[key];
    }
  }
  return newSource;
}
複製代碼

如何實現深克隆？

• 使用 JSON 序列化

newSource = JSON.parse(JSON.stringfy(source))
複製代碼

可是該方法有一點的缺陷：

1. 會忽略 undefined
2. 會忽略 symbol
3. 不能序列化函數
4. 不能解決循環引用的對象

• 三方類庫，相似 lodash 的 _.cloneDeep()
• 本身手動實現（簡易版）

function deepClone(source) {
  if(typeof source !== 'object') {
    return '不是對象'；
  }
  let isArray = Array.isArray(source)
  let newSource = isArray ? [] : {}
  for(let key in source) {
    if(typeof source[key] !== 'object') {
      newSource[key] = source[key]
    }else{
      newSource[key] = deepClone(source[key])
    }
  }
  return newSource
}
複製代碼

Vue 相關

Vue 中 created 和 mounted 有什麼區別

creacted 沒法獲取 DOM 節點，可是 mounted 能夠。二者均可以獲取到 data 和 methods

React 相關

React 有哪些生命週期？

舊的生命週期：

加載階段

• constructor()

加載的時候調用一次，能夠初始化state

• getDefaultProps()

設置默認的props，也能夠用dufaultProps設置組件的默認屬性。

• getInitialState()

初始化state，能夠直接在constructor中定義this.state

• componentWillMount()

組件加載時只調用，之後組件更新不調用，整個生命週期只調用一次，此時能夠修改state

• render()

react最重要的步驟，建立虛擬dom，進行diff算法，更新dom樹都在此進行

• componentDidMount()

組件渲染以後調用，只調用一次

更新階段

• componentWillReceiveProps(nextProps)

組件加載時不調用，組建接受到新的 props 時調用

• shouldComponentUpdate(nextProps,nextState)

當組件接收到新的 props 或者 state 的時候，會調用，若是最終這個函數返回true，那麼組件將會更新，不然不更新

• componentWillUpdate(nextProps,nextState)

只有在組件更新的時候調用，能夠在此修改 state

• render()

建立虛擬 DOM，進行 diff 算法，渲染真實 DOM，更新 DOM 樹都在此函數中進行

• componentDidUpdate()

僅在組件更新完成以後調用

卸載階段

• componentWillUnmount()

組件渲染以後調用，只調用一次

新的生命週期

加載階段

• constructor()

加載的時候調用一次，能夠初始化 state，給事件綁定 this

• static getDerivedStateFromProps(props,state)

組件每次從新 render 的時候，能夠在此函數中檢查是否須要更新

• render()

建立虛擬 DOM，進行 diff 算法，渲染真實 DOM，更新 DOM 樹都在此函數中進行

• componentDidMount()

組件渲染以後調用，只調用一次

更新階段

• static getDerivedStateFromProps(props,state)

組件每次從新 render 的時候，能夠在此函數中檢查是否須要更新

• shouldComponentUpdate(nextProps,nextState)

當組件接收到新的 props 或者 state 的時候，會調用，若是最終這個函數返回true，那麼組件將會更新，不然不更新

• render()

建立虛擬 DOM，進行 diff 算法，渲染真實 DOM，更新 DOM 樹都在此函數中進行

• getSnapshotBeforeUpdate(prevProps,prevState)

觸發時間: update發生的時候，在render以後，在組件dom渲染以前；返回一個值，做爲componentDidUpdate的第三個參數；配合componentDidUpdate, 能夠覆蓋componentWillUpdate的全部用法

• componentDidUpdate()

組件加載時不調用，組件更新完成後調用

卸載階段

• componentWillUnmount()

組件渲染以後調用，只調用一次

網絡相關（HTTP）

HTTP2.0 作了哪些升級？

• 瀏覽器對於同一個域名下的請求數量是有限制的，HTTP2.0 引入了多路複用的技術，解決了此問題。
• 引入了新的編碼機制，全部傳輸的數據都會被分割，並採用二進制格式編碼
• Header 的壓縮，減小了 header 的大小，而且還會在兩端創建並維護索引表，用於記錄出現過的 header，在之後的傳輸過程當中就能夠快速尋找到對應的值
• 服務端 push，服務端能夠在客戶端某個請求後，主動向客戶端推送其餘資源

今天的兩場面試體驗都很好，UPUPUP~明天繼續加油