web前端 面試問題總結2020

本文轉自： https://www.jianshu.com/p/ca16020114cd

1. var let const 的區別，以及變數提升，函式提升

• var

1.不存在塊作用域
2.可以多次宣告（覆蓋）
3.存在變數提升：當var a = 1;時候，會先在作用域的最頂端，var a;然後在var a = 1;的位置給a賦值

• let const

1.存在塊作用域
經典例題：
for迴圈給多個dom新增時間，輸出for迴圈的角標i,如果用var宣告，因為沒有塊作用域，var會變數提升到外層作用域最頂端，而多次i賦值，最後只儲存了最後一次的值，改成let可以解決這個問題（這就是強行解釋，具體為什麼let可以解決還需要好好看看let)

2.不可以多次宣告
包括function a() {};存在後不能let const a
變數提升和函式提升排序的問題需要理解

2.async/await 原理

3.主程序，巨集任務，微任務

巨集任務：macrotask 包括：setTimeout、setInterval、postMessage等。
微任務：microtask 包括：Promise.then、await後面的程式碼。
事件執行順序：
1.先執行主程序中同步的程式碼，promise中的程式碼為同步程式碼
2.主程序程式碼執行完畢後執行微任務中的程式碼，從上到下一個一個放到主程序中執行。
3.微任務執行完畢之後從上到下把巨集任務中的程式碼放到主程序中執行，如果這期間產生微任務，則執行完當前巨集任務後重新執行微任務佇列，然後繼續回到執行巨集任務佇列

3.iframe通訊的方法和優缺點，父子通訊，父子跨域通訊

方法一 postMessage

// top 是目標iframe，可以使iframe的name屬性；target是目標iframe的域名
top.postMessage('資料', target);
// e.currentTarget.parent是他的父iframe
window.addEventListener('message', (e) => {
// 傳送回去一條訊息
e.currentTarget.parent.postMessage('訊息', '*')
});

postMessage優點

1.可以跨域傳送訊息

postMessage缺點

1.低版本瀏覽器不支援

方法二 通過呼叫目標iframe的方法

  // 父傳子
  target.window.fun()
 // 子傳父
 window.parent.window.fun()

優點

缺點

1.不能跨域
2.必須等頁面載入完畢才能呼叫

HTTP常用的Method

簡單的請求

HEAD，GET, POST
GET:
1.引數可見
2.可以快取
3.會生成歷史記錄
4.長度有限制
POST：
1.引數不可見
2.不可以快取
3.不會生成歷史記錄
4.不限制長度
5.資料型別不限制
6.會先提交HEAD請求，得到100響應後才能繼續提交
HEAD：
和GET類似，但是不會返回響應主體

特點
1.沒有自定義的報文頭
2.MIME Type in text/plain、multipart/form-data、application/x-www-form-urlencoded

預檢請求

OPTIONS： 主要目的是獲取伺服器允許的請求方式

特點
1.自定義請求頭資訊
2.MIME Type Not in text/plain、multipart/form-data、application/x-www-form-urlencoded

其他請求

PUT和PATCH
DELETE：刪除資源

TCP和UDP（OICQ，NDS）區別

1.TCP面向連線，必須先建立連線；UDP傳送資料之前不需要連線
2.TCP是可靠的連結，不會丟失重複，按順序到達；UDP不保證可靠
3.UDP效率更高，可以實現實時傳輸和廣播通訊
4.TCP是點對點，UDP都可以
5.TCP對系統資源有要求，UDP要求相對較小

TCP過程

1.建立socket socket();
2.設定socket屬性，setsocketopt() 可選
3.繫結 ip地址，埠號
4.開啟監聽 listen()
5.接收客戶端的連結， accept()
6.收發資料 send()
7.關閉連線
8.關閉監聽

UDP過程

1.建立socket
2.設定socket屬性
3.繫結ip，埠到socket上 可選
4.迴圈的接收資料
5.關閉連線

WebSocket和socket

socket其實是控制傳輸的介面，底層是操作TCP或者UDP
websocket是應用層的協議，保持連線不斷開

node伺服器優缺點

優點：事件驅動，是的輸入輸出效能很高
缺點：cpu計算差，比如做很多計算操作，程式碼執行效率要求高，所以用底層的語言來做，比如C
io密集型：需要處理比較多的任務

解釋型語言和編譯型語言

編譯型語言:
1.編譯時候會判斷錯誤，無法繼續編輯
2.效率高，一次編譯多次執行
解釋型語言：
1.執行時候才會判斷錯誤
2.逐句翻譯，執行效率低

require和import

require是commonjs規範，執行時候載入
import是es6規範，是編譯時候載入

hash和history

監聽hash window.onhashchange
監聽history window.onreplaceState