初級前端的面試之路(二)

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

HTML/CSS 相關

迴流和重繪

什麼是迴流?什麼是重繪?

迴流java

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

重繪web

當 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__ 指向 ObjectObject的原型

那麼,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~明天繼續加油

相關文章
相關標籤/搜索