寫在最前面
面經
- 基礎的前端面試題你們應該耳熟能詳了,今天來介紹一些面試中遇到能深刻探討和詢問的問題問題都是開放性的,考官通常根據你的回答來問下一步問題。下面提供 keywords 中有一些解決方案。其中的題目這種套路「你剛剛回答提到了XXX 能深刻講一下XXX嗎,爲何使用XXXX?」,咱們儘可能去提到本身熟悉的關鍵詞。
http和網絡相關
- 一、輸入一個 url 發生了什麼?
- 剛剛提到 TCP 的三次握手,其中 https(s是什麼?在 tcp 層的起了什麼做用)
- http2 和 https 對比,增長了什麼有什麼區別?
- 有哪些安全策略,保護用戶信息 (cookie 安全性,token 驗證用戶登陸信息) ?
- xss, crsf 是什麼?怎麼預防?
- 最後瀏覽器渲染的頁面,你能具體說一下前端渲染的流程嗎?
- html/css/js 頁面渲染流程
- 引入 JavaScript 腳本文件的使用使用到 script 標籤,其中 defer/async 有什麼區別
keywords: http&https&http2 && xss&crsfhtml
知識補充:前端
輸入地址
,瀏覽器解析網址。
DNS解析
,查詢到IP,返回對應的IP。
TCP鏈接
(TCP 三次握手 80 端口)。[https 在 TCP 鏈接以前 SSL/TLS 作了加密,防劫持,須要證書,端口不一樣 443]
發送http請求
。
返回http響應
。
瀏覽器解析渲染頁面
。
斷開鏈接
(四次揮手)。
- 二、什麼是同源策略?
- -> 解決跨域的幾個方法(jsonp, cors, nginx)
- -> 什麼場景下有跨域?(iframe, 接口請求,不一樣域名)
- -> sso 單點登陸問題怎麼解決的,同域怎麼解決的?不一樣域,cookie session 共享問題怎麼解決的?
- -> cookie 使用的安全問題
- -> session 使用 nginx 配置的性能問題
kewords: 跨域解決方案 && 單點登陸原理java
- 三、頁面渲染的時候時常會遇到白屏的時候,咱們怎麼優化這種狀況?
- 使用緩存?(講講瀏覽器緩存吧,強緩存和協商緩存,每一個字段詳情和具體的使用狀況)
- 剛剛提到了重定向 304,你能說說 300相關的其餘狀態碼,隨便說幾個均可以。
- 剛剛提到瀏覽器緩存,瞭解 service work 嗎?說說 service 的工做的生命週期和 sw 的好處
- 除了 service work 還有什麼其餘的優化方案?(服務端渲染 ssr ,開啓 http2 ,按需加載,路由分割 等等)
keywords: service work 和前端緩存 && http 請求頭和響應頭,狀態碼 && 白屏優化方案react
React
- 二、hooks?函數式組件和普通的類組件有什麼優劣比較?
- --> react 生命週期的變化
- --> 其中 useEffect 和 生命週期對比有什麼關係?
- --> 通常 16+ 咱們在哪裏優化 render 流程
- --> 優化方案一: PureComponent(memo)
- --> 優化方案二:shouldComponentUpdate 中進行深層對比
- --> hooks 中咱們使用 useMemo 優化(www.cnblogs.com/crazycode2/…
keywords: hooks 和 react 生命週期(老) && useMemogithub
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 基礎運用的相關的題目。