前端面試總結

NO IMAGE

參考鏈接

  • https://juejin.im/post/5b44a485e51d4519945fb6b7

ajax

  • 手寫ajax
  • 如何關閉 ajax? 實現一個timeout 超時?
  • ajax和fetch區別是什麼?

  • 手寫ajax:
var xhr = new XMLHttpRequest()
// 參數3 true 代表是異步執行, 默認為true
xhr.withCredentials = true; // 默認為false
xhr.open("get", 'https://cnodejs.org/api/v1/topics', true)
// xhr.setRequestHeader("Content-type", "application/json");  如果是post請求 則需要設置請求頭
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
console.log('請求成功', xhr.responseText)
}
}
xhr.timeout = 2000
// xhr.abort() abort方法可以立即阻斷請求
xhr.onload = function() {
console.log(this.responseText)
}
xhr.ontimeout = function() {
console.log(this)
}
xhr.send(null)
// post 發送json
// xhr.send(JSON.stringify({
//     form: 'data'
// }))
  • 如何關閉 ajax? 實現一個timeout 超時?

可以直接設置超時時間: xhr.timeout = 200這樣;
發送過程中可以 xhr.abort() 來終止掉這個xhr。

  • ajax和fetch區別是什麼?

他們的共同點是默認都不會攜帶cookie,如果想攜帶則fetch需要設置:credentials: ‘include’
ajax本質是XMLHttpRequest, 可以設置timeout和abort請求而fetch不行,用onreadystatechange來監聽響應;
fetch是window全局對象上的方法,基於Promise的方式來實現,更簡潔,而ajax用法比較麻煩,而且還得寫回調。

跨域問題

  • https域能請求http的資源和api嗎?
  • https加載http資源不出來的解決辦法?
  • https的優缺點?原理?如何改造成https?

  • https域能請求http的資源和api嗎?
    既不能請求http的api也不能請求js css資源,但是http的 圖片可以請求成功;主要是瀏覽器安全策略的原因。

加載http圖片會報警告 但圖片會正常顯示

前端面試總結

  • https的優缺點?原理?如何改造成https?
    優點: 更安全;
    缺點:改造會比較麻煩,需要購買SSL證書; HTTPS相比於HTTP,雖然提供了安全保證,但是勢必會帶來一些時間上的損耗,如握手和加密等過程。
    如何改造成https: 需要購買SSL證書;
  • https加載http資源不出來的解決辦法?
    方案1: 資源放在本地;
    方案2: 資源以 “//cdn.test.com”開頭,以自動匹配;
    方案3: 使用CSP , html加上meta 標籤:<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" csp是解決xss攻擊的一種手段,為當前網站指定加載的js、css、圖片資源設置白名單

jQuery 源碼

  • extentds 實現?
  • $fn ?

json

  • xml和json的區別是什麼?

兼容性問題

  • 你遇到過哪些ie7+的兼容性問題?

ES6+

  • 說說都有哪些新特性和語法?

瀏覽器渲染網頁的過程

  • 從輸入網址開始?從加載頁面開始說?

  • 從輸入URL到頁面加載發生了什麼?
    https://segmentfault.com/a/1190000006879700#articleHeader6

性能優化相關

  • 如何提高網頁加載速度?

  • 如何提高網頁加載速度?
    相關鏈接: https://mp.weixin.qq.com/s/X4Yodla_hi26J_7VOi8sFQ
    1.使用webp格式代替原有圖像格式,但webp在IE和safari不支持,有兼容性問題。
    2….

異步

  • Promise 和 setTimeout 區別 以及執行順序?
  • setTimeout和setInterval區別?setInterval會阻塞嗎?
  • 講講event loop?
  • React的setState是異步嗎? 與redux的action有何區別?

  • Promise 和 setTimeout 區別 以及執行順序:
    setTimeout是異步宏(macro)任務隊列,Promise是異步微(micro)任務隊列,他們倆會交替執行,具體看這篇博客: https://juejin.im/post/5b7057b251882561381e69bf

  • 講講event loop:
    http://blog.codingplayboy.com/2017/04/25/js_async/#Event_Loop

  • setTimeout和setInterval區別?setInterval會阻塞嗎:
    setInterval會阻塞。比如每1秒打印一次,但有很耗性能的同步任務佔用了10s,那麼就會在10s時 突然打印10次。

HTTP請求

  • 請求頭和響應頭有哪些?
  • http2?
  • Http1.x、http2.0、http3區別是什麼?

請求頭:
* Accept
* Accept-Encoding: gzip, deflate, br
* user-agent;
* Referer (比如點擊a鏈接過來會帶上referer)
* cookie (xhr和fetch默認是不攜帶的)
* host 請求的主機名(域名)
* Cache-Control
響應頭:
* Content-type:application/json;
* access-control-allow-origin: 
* Content-Encoding: gzip
* server: Express
  • Http1.x、http2.0、http3區別是什麼?
    相關鏈接:https://mp.weixin.qq.com/s/hjxU-rjr-ISk0rzeQHAIeA
    Http1.x鏈接無法複用,明文傳輸不安全,隊頭阻塞;
    HTTP/1.1雖然加入keep-alive可以複用一部分連接,但域名分片等情況下仍然需要建立多個connection,耗費資源,給服務器帶來性能壓力。
    HTTP/2 通過多路複用(同域名下所有通信都在單個tcp連接上完成)、二進制流(最小單位為幀,多個幀之間可以亂序發送,根據幀首部的流標識可以重新組裝。)、Header 壓縮等等技術,單個連接可以承載任意數量的雙向數據流。極大地提高了性能,但是還是存在著問題的
    HTTP/3: QUIC 基於 UDP 實現,是 HTTP/3 中的底層支撐協議,該協議基於 UDP,又取了 TCP 中的精華,實現了即快又可靠的協議

HTTP狀態碼

  • 301: 永久性重定向
  • 302: 暫時性重定向
  • 304: not modified

Vue

  • vue 雙向綁定實現原理?

  • vue 雙向綁定實現原理:

https://segmentfault.com/a/1190000006599500#articleHeader0
https://juejin.im/post/5acc17cb51882555745a03f8
https://juejin.im/post/5acd0c8a6fb9a028da7cdfaf
observer (監聽器 遞歸監聽屬性 通過Object.defineProperty)
watcher (訂閱者)
compiler(模板解釋器)
dep 消息訂閱器 (observer 向 watcher傳輸消息)
最終利用Watcher搭起Observer和Compile之間的通信橋樑,達到數據變化 -> 視圖更新;視圖交互變化(input) -> 數據model變更的雙向綁定效果。

mvvm 使用 Object.defineProperty 屬性代理,實現 vm.xxx -> vm._data.xxx

React

  • react生命週期
  • React hooks

相關文章

對於元素是非基本類型的數組去重

UC面試總結

iOS動態化熱修復方案

GoPlay原理詳解