2020春季中高階前端面試記 | 漸進增強題目甄選(上篇)-react&http基礎

西南_張家輝發表於2020-03-13
前端面試ReactHTTP

寫在最前面

  • 作為一個練習時長兩年半的前端練習生，在這個陽春三月開始了漫漫的面試之路，這裡分享一下自己的面試經驗和遇到的覺得比較一些值得深入討論和出現 頻率極高 的題目，其中有筆誤或者不當的地方歡迎朋友指出。

  • 自己的技術棧是：react（16.8+ hooks） + mbox + typescript。 從主要是面的中高階前端的崗位，base: 北京。

面經

  • 基礎的前端面試題大家應該耳熟能詳了，今天來介紹一些面試中遇到能深入探討和詢問的問題問題都是開放性的，考官一般根據你的回答來問下一步問題。下面提供 keywords 中有一些解決方案。其中的題目這種套路「你剛剛回答提到了XXX 能深入講一下XXX嗎,為什麼使用XXXX？」，我們儘量去提到自己熟悉的關鍵詞。

http和網路相關

  • 1、輸入一個 url 發生了什麼？
    • 剛剛提到 TCP 的三次握手，其中 https（s是什麼？在 tcp 層的起了什麼作用）
    • http2 和 https 對比，增加了什麼有什麼區別？
    • 有哪些安全策略，保護使用者資訊 (cookie 安全性，token 驗證使用者登入資訊) ?
    • xss, crsf 是什麼？怎麼預防？
    • 最後瀏覽器渲染的頁面，你能具體說一下前端渲染的流程嗎？
    • html/css/js 頁面渲染流程
    • 引入 JavaScript 指令碼檔案的使用使用到 script 標籤，其中 defer/async 有什麼區別

keywords: http&https&http2 && xss&crsf

知識補充：

  1. 輸入地址，瀏覽器解析網址。
  2. DNS解析，查詢到IP，返回對應的IP。
  3. TCP連線(TCP 三次握手 80 埠)。[https 在 TCP 連線之前 SSL/TLS 做了加密，防劫持，需要證照，埠不同 443]
  4. 傳送http請求。
  5. 返回http響應。
  6. 瀏覽器解析渲染頁面。
  7. 斷開連線(四次揮手)。
  • 2、什麼是同源策略?
    • -> 解決跨域的幾個方法(jsonp, cors, nginx)
    • -> 什麼場景下有跨域?(iframe, 介面請求，不同域名)
    • -> sso 單點登入問題怎麼解決的，同域怎麼解決的？不同域，cookie session 共享問題怎麼解決的？
    • -> cookie 使用的安全問題
    • -> session 使用 nginx 配置的效能問題

kewords: 跨域解決方案 && 單點登入原理

  • 3、頁面渲染的時候時常會遇到白屏的時候，我們怎麼優化這種情況？
    • 使用快取？（講講瀏覽器快取吧，強快取和協商快取，每個欄位詳情和具體的使用情況）
    • 剛剛提到了重定向 304，你能說說 300相關的其他狀態碼，隨便說幾個都可以。
    • 剛剛提到瀏覽器快取，瞭解 service work 嗎？說說 service 的工作的生命週期和 sw 的好處
    • 除了 service work 還有什麼其他的優化方案？（服務端渲染 ssr ，開啟 http2 ,按需載入，路由分割 等等）

keywords: service work 和前端快取 && http 請求頭和響應頭，狀態碼 && 白屏優化方案

React

  • 1、瞭解 MVC 嗎？也說說什麼是 MVVM ？

    • react 是什麼設計模式 ？(這裡就有埋坑了)
    • 講講react 的通訊方式？(props render, context, ，全域性 store 我這邊提到了使用 mbox)
    • 能給我解釋一下 mbox 具體的使用場景嗎？
    • 剛剛提到了 @observer , 你可以實現一個 JavaScript 的觀察者模式嗎？。
    • 我們都知道 react 是單向資料流，我這裡想實現一個雙向繫結可以怎麼實現？(瞭解 Object.defineProperty())

  • keywords： 觀察者模式 && Object.defineProperty() && MVVM&MVC

  • 2、hooks？函式式元件和普通的類元件有什麼優劣比較？
    • --> react 生命週期的變化
    • --> 其中 useEffect 和 生命週期對比有什麼關係？
    • --> 一般 16+ 我們在哪裡優化 render 流程
    • --> 優化方案一： PureComponent(memo)
    • --> 優化方案二：shouldComponentUpdate 中進行深層對比
    • --> hooks 中我們使用 useMemo 優化（www.cnblogs.com/crazycode2/…

keywords: hooks 和 react 生命週期（老） && useMemo

  • 3、react 看一道題
state = {
    a: 0;
}

componentDidMount(){
    
    this.setState({
        a: 1
    })
    
    console.log(this.state.a)
}

複製程式碼
  • 結果是怎樣的？
    • setState 是同步還是非同步的？
    • 如果我想達成 同步/非同步該怎麼做？
    • 講講 render 的渲染流程？(React 的渲染機制——Reconciliation 過程)
    • 瞭解 fiber 說說你對 fiber 的理解？

keywords: setState 非同步?同步 && fiber &&

後續

  • 下篇會記錄一下一些 js 基礎題，手寫相關的題目，比如promise 和 演算法， js 基礎運用的相關的題目。

相關文章