vue雙向綁定
vue.js是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，
在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)來渲染視圖。

閉包
閉包是指有權(quán)訪問另外一個函數(shù)作用域中的變量的函數(shù)。
閉包就是函數(shù)的局部變量集合，只是這些局部變量在函數(shù)返回后會繼續(xù)存在。閉包就是就是函數(shù)的“堆?！痹诤瘮?shù)返回后并不釋放，
我們也可以理解為這些函數(shù)堆棧并不在棧上分配而是在堆上分配。當(dāng)在一個函數(shù)內(nèi)定義另外一個函數(shù)就會產(chǎn)生閉包。

異步
異步執(zhí)行的運行機制如下。
1、所有同步任務(wù)都在主線程上執(zhí)行，形成一個執(zhí)行棧（execution context stack）。
2、主線程之外，還存在一個"任務(wù)隊列"（task queue）。只要異步任務(wù)有了運行結(jié)果，就在"任務(wù)隊列"之中放置一個事件。
3、一旦"執(zhí)行棧"中的所有同步任務(wù)執(zhí)行完畢，系統(tǒng)就會讀取"任務(wù)隊列"，看看里面有哪些事件。那些對應(yīng)的異步任務(wù)，
于是結(jié)束等待狀態(tài)，進入執(zhí)行棧，開始執(zhí)行。
4、主線程不斷重復(fù)上面的第三步。

CDN
CDN就是根據(jù)用戶位置分配最近的資源

防抖節(jié)流區(qū)別
節(jié)流: n 秒內(nèi)只運行一次，若在 n 秒內(nèi)重復(fù)觸發(fā)，只有一次生效
防抖: n 秒后在執(zhí)行該事件，若在 n 秒內(nèi)被重復(fù)觸發(fā)，則重新計時

跨域
如何解決跨域問題?
JSONP：通過動態(tài)創(chuàng)建script，再請求一個帶參網(wǎng)址實現(xiàn)跨域通信。
document.domain + iframe跨域：兩個頁面都通過js強制設(shè)置document.domain為基礎(chǔ)主域，就實現(xiàn)了同域。
location.hash + iframe跨域：a欲與b跨域相互通信，通過中間頁c來實現(xiàn)。
三個頁面，不同域之間利用iframe的location.hash傳值，相同域之間直接js訪問來通信。
window.name + iframe跨域：通過iframe的src屬性由外域轉(zhuǎn)向本地域，
跨域數(shù)據(jù)即由iframe的window.name從外域傳遞到本地域。
postMessage跨域：可以跨域操作的window屬性之一。
CORS：服務(wù)端設(shè)置Access-Control-Allow-Origin即可，前端無須設(shè)置，若要帶cookie請求，前后端都需要設(shè)置。

1、JSONP，全稱為json with padding，解決老版本瀏覽器跨域數(shù)據(jù)訪問問題，
原理是web頁面調(diào)用JS文件不受瀏覽器同源策略限制，
所以通過script標(biāo)簽可以進行跨域請求，流程如下：
首先前端設(shè)置好回調(diào)參數(shù)，并將其作為URL的參數(shù)
服務(wù)器端收到請求后，通過該參數(shù)獲取到回調(diào)函數(shù)名，并將數(shù)據(jù)放在參數(shù)中返回
收到結(jié)果后因為是script標(biāo)簽，所以瀏覽器當(dāng)做腳本運行，

2、cors，全稱是跨域資源共享，允許瀏覽器向跨源服務(wù)器發(fā)出XMLHTTP Request請求，從而克服了ajax只能同源使用的策略，
實現(xiàn)cors的關(guān)鍵是服務(wù)器，只要服務(wù)器實現(xiàn)了cros接口，就可以跨域通信
前端邏輯很簡單，正常發(fā)起ajax請求即可，成功的關(guān)鍵在于服務(wù)器 Access-Control-Allow-Origin 是否包含請求頁面的域名，
如果不包含的話，瀏覽器將認為這是一次失敗的異步請求，將會調(diào)用 xhr.onerror 中的函數(shù)。
Cros使用簡單，支持POST方式，但是存在兼容問題
瀏覽器將cors請求分為兩類，簡單請求和非簡單請求，對于簡單請求，瀏覽器直接發(fā)出cors請求，就是在頭信息之中增加一個origin字段，
用于說明本次請求來自哪個協(xié)議+域名+端口，服務(wù)器根據(jù)這個值，決定是否同意本次請求，
如果服務(wù)器同意本次請求，返回的響應(yīng)中會多出幾個頭信息字段：
Access-Control-Allow-Orign：返回origin的字段或者*
Access-Control-Allow-Credentials,該字段可選，是一個bool值，表示是否允許發(fā)送cookie，
Access-Control-Expose-Headers

vue3與vue2區(qū)別
defineproperty api缺點
檢測不到對象屬性的添加和刪除
數(shù)組API方法無法監(jiān)聽到
需要對每個屬性進行遍歷監(jiān)聽，如果嵌套對象，需要深層監(jiān)聽，造成性能問題

Proxy直接可以劫持整個對象，并返回一個新對象，我們可以只操作新的對象達到響應(yīng)式目的
Proxy可以直接監(jiān)聽數(shù)組的變化（push、shift、splice）

強緩存：瀏覽器不會像服務(wù)器發(fā)送任何請求，直接從本地緩存中讀取文件并返回Status Code: 200 OK
協(xié)商緩存: 向服務(wù)器發(fā)送請求，服務(wù)器會根據(jù)這個請求的request header的一些參數(shù)來判斷是否命中協(xié)商緩存，
如果命中，則返回304狀態(tài)碼并帶上新的response header通知瀏覽器從緩存中讀取資源；

箭頭函數(shù)可以作為構(gòu)造函數(shù)來使用嗎？
構(gòu)造函數(shù)是通過new關(guān)鍵字來生成對象實例，生成對象實例的過程也是通過構(gòu)造函數(shù)給實例綁定this的過程，
而箭頭函數(shù)沒有自己的this。創(chuàng)建對象過程，new 首先會創(chuàng)建一個空對象，
并將這個空對象的proto指向構(gòu)造函數(shù)的prototype，
從而繼承原型上的方法，但是箭頭函數(shù)沒有prototype。因此不能使用箭頭作為構(gòu)造函數(shù)，也就不能通過new操作符來調(diào)用箭頭函數(shù)。

箭頭函數(shù)和普通函數(shù)有什么區(qū)別
1：寫法不一樣
2：普通函數(shù)存在變量提升的現(xiàn)象
3：箭頭函數(shù)不能作為構(gòu)造函數(shù)使用
4：兩者this的指向不同
5：箭頭函數(shù)的arguments指向它的父級函數(shù)所在作用域的arguments
6：箭頭函數(shù)沒有new.target

new一個對象背后做了些什么？
創(chuàng)建一個空對象
將所創(chuàng)建對象的proto屬性值設(shè)為構(gòu)造函數(shù)的prototype的屬性值
執(zhí)行構(gòu)造函數(shù)中的代碼，構(gòu)造函數(shù)中的this指向該對象
返回對象

---------JSONP的缺點：
1.首先，它沒有關(guān)于JSONP調(diào)用的錯誤處理，一旦回調(diào)函數(shù)調(diào)用失敗，瀏覽器會以靜默失敗的方式處理。
2.其次，它只支持GET請求，這是由于該技術(shù)本身的特性所決定的。因此，對于一些需要對安全性有要求的跨域請求，
JSONP的使用需要謹慎一點了。
3.JSONP不支持用async:false的方法設(shè)置同步

從 URL 輸入到頁面展現(xiàn)到底發(fā)生什么？
DNS 解析:將域名解析成 IP 地址
TCP 連接：TCP 三次握手
發(fā)送 HTTP 請求
服務(wù)器處理請求并返回 HTTP 報文
瀏覽器解析渲染頁面
根據(jù) HTML 解析出 DOM 樹
根據(jù) CSS 解析生成 CSS 規(guī)則樹
結(jié)合 DOM 樹和 CSS 規(guī)則樹，生成渲染樹
根據(jù)渲染樹計算每一個節(jié)點的信息
根據(jù)計算好的信息繪制頁面
斷開連接：TCP 四次揮手

三次握手
第一次握手：客戶端給服務(wù)端發(fā)一個 SYN 報文，并指明客戶端的初始化序列號 ISN(c)，此時客戶端處于 SYN_SENT 狀態(tài)
第二次握手：服務(wù)器收到客戶端的 SYN 報文之后，會以自己的 SYN 報文作為應(yīng)答，
為了確認客戶端的 SYN，將客戶端的 ISN+1作為ACK的值，此時服務(wù)器處于 SYN_RCVD 的狀態(tài)
第三次握手：客戶端收到 SYN 報文之后，會發(fā)送一個 ACK 報文，值為服務(wù)器的ISN+1。
此時客戶端處于 ESTABLISHED 狀態(tài)。服務(wù)器收到 ACK 報文之后，也處于 ESTABLISHED 狀態(tài)，此時，雙方已建立起了連接

為什么不是兩次握手?
如果是兩次握手，發(fā)送端可以確定自己發(fā)送的信息能對方能收到，
也能確定對方發(fā)的包自己能收到，但接收端只能確定對方發(fā)的包自己能收到 無法確定自己發(fā)的包對方能收到

四次揮手
第一次揮手：客戶端發(fā)送一個 FIN 報文，報文中會指定一個序列號。此時客戶端處于 FIN_WAIT1 狀態(tài)，
停止發(fā)送數(shù)據(jù)，等待服務(wù)端的確認
第二次揮手：服務(wù)端收到 FIN 之后，會發(fā)送 ACK 報文，且把客戶端的序列號值 +1
作為 ACK 報文的序列號值，表明已經(jīng)收到客戶端的報文了，此時服務(wù)端處于 CLOSE_WAIT狀態(tài)
第三次揮手：如果服務(wù)端也想斷開連接了，和客戶端的第一次揮手一樣，
發(fā)給 FIN 報文，且指定一個序列號。此時服務(wù)端處于 LAST_ACK 的狀態(tài)
第四次揮手：客戶端收到 FIN 之后，一樣發(fā)送一個 ACK 報文作為應(yīng)答，
且把服務(wù)端的序列號值 +1 作為自己 ACK 報文的序列號值，
此時客戶端處于 TIME_WAIT狀態(tài)。需要過一陣子以確保服務(wù)端收到自己的 ACK 報文之后才會進入 CLOSED 狀態(tài)，
服務(wù)端收到 ACK 報文之后，就處于關(guān)閉連接了，處于 CLOSED 狀態(tài)

四次揮手原因
服務(wù)端在收到客戶端斷開連接Fin報文后，并不會立即關(guān)閉連接，而是先發(fā)送一個ACK包先告訴客戶端收到關(guān)閉連接的請求，
只有當(dāng)服務(wù)器的所有報文發(fā)送完畢之后，才發(fā)送FIN報文斷開連接，因此需要四次揮手

CDN
資源上傳cdn之后，當(dāng)用戶訪問cdn的資源地址之后會經(jīng)歷下面的步驟：

首先經(jīng)過本地的dns解析，請求cname指向的那臺cdn專用的dns服務(wù)器。
dns服務(wù)器返回全局負載均衡的服務(wù)器ip給用戶
用戶請求全局負載均衡服務(wù)器，服務(wù)器根據(jù)ip返回所在區(qū)域的負載均衡服務(wù)器ip給用戶
用戶請求區(qū)域負載均衡服務(wù)器，負載均衡服務(wù)器根據(jù)用戶ip選擇距離近的，并且存在用戶所需內(nèi)容的，
負載比較合適的一臺緩存服務(wù)器ip給用戶。當(dāng)沒有對應(yīng)內(nèi)容的時候，會去上一級緩存服務(wù)器去找，
直到找到資源所在的源站服務(wù)器，并且緩存在緩存服務(wù)器中。用戶下一次在請求該資源，就可以就近拿緩存了

GET POST區(qū)別

GET

GET方法請求一個指定資源的表示形式，使用GET的請求應(yīng)該只被用于獲取數(shù)據(jù)

POST

POST方法用于將實體提交到指定的資源，通常導(dǎo)致在服務(wù)器上的狀態(tài)變化或副作用
本質(zhì)上都是TCP鏈接，并無差別
但是由于HTTP的規(guī)定和瀏覽器/服務(wù)器的限制，導(dǎo)致他們在應(yīng)用過程中會體現(xiàn)出一些區(qū)別
get參數(shù)通過url傳遞，post放在request body中。
get請求在url中傳遞的參數(shù)是有長度限制的，而post沒有。
get比post更不安全，因為參數(shù)直接暴露在url中，所以不能用來傳遞敏感信息。
get請求只能進行url編碼，而post支持多種編碼方式
get請求會瀏覽器主動cache，而post支持多種編碼方式。
get請求參數(shù)會被完整保留在瀏覽歷史記錄里，而post中的參數(shù)不會被保留。

event loop
過程:
同步代碼，一行一行放在call stack執(zhí)行
遇到異步，會先"記錄"下，等待時機(定時、網(wǎng)絡(luò)請求等)
時機到了，就移動到callback queue
如call stack為空(即同步代碼執(zhí)行完)event loop開始工作
輪詢查找callback queue,如有則移動到call stack執(zhí)行
然后繼續(xù)輪詢查找(永動機一樣)

瀏覽器存儲
1.cookie
本身用于瀏覽器和server通訊
被"借用"到本地存儲來
可用document.cookie = '...'來修改

cookie缺點
1.存儲大小，最大4KB
2.http請求時需要發(fā)送到服務(wù)端，增加請求數(shù)據(jù)量
3.只能用document.cookie = '...'來修改

2.localStorage與sessionStorage
localStorage數(shù)據(jù)永久存儲，除非手動刪除
sessionStorage數(shù)據(jù)只存在于當(dāng)前會話，瀏覽器關(guān)閉則清空

原型與原型鏈：
1.每個class都有顯示原型的prototype
2.每個實例都有隱式原型proto
3.實例的proto指向?qū)?yīng)class的prototype

作用域和作用域鏈
全局作用域：在任何地方都能被訪問，window對象下的內(nèi)置屬性都是全局作用域
函數(shù)作用域：固定代碼片段中
作用域鏈：作用域都有上下級關(guān)系，上下級關(guān)系確定函數(shù)在哪個作用域下創(chuàng)建，變量取值都會在當(dāng)前作用域中查找，
如果沒有查到就會像上級作用域查找，直到查到全局作用域，這個查找的過程叫做作用域鏈

網(wǎng)頁突然加載不出來了
1.網(wǎng)絡(luò)斷開了
2.后端頁面無法加載
3.網(wǎng)頁被劫持了
4.DNS無法解析網(wǎng)址
5.服務(wù)器負載過大
6.供應(yīng)商網(wǎng)絡(luò)出口出現(xiàn)問題

git指令
git init 初始化倉庫，默認為 master 分支
git add . 提交全部文件修改到緩存區(qū)
git add <具體某個文件路徑+全名> 提交某些文件到緩存區(qū)
git diff 查看當(dāng)前代碼 add后，會 add 哪些內(nèi)容
git diff --staged查看現(xiàn)在 commit 提交后，會提交哪些內(nèi)容
git status 查看當(dāng)前分支狀態(tài)
git pull <遠程倉庫名> <遠程分支名> 拉取遠程倉庫的分支與本地當(dāng)前分支合并
git pull <遠程倉庫名> <遠程分支名>:<本地分支名> 拉取遠程倉庫的分支與本地某個分支合并
git commit -m "<注釋>" 提交代碼到本地倉庫，并寫提交注釋
git commit -v 提交時顯示所有diff信息
git commit --amend [file1] [file2] 重做上一次commit，并包括指定文件的新變化
git branch 查看本地所有分支
git branch -r 查看遠程所有分支
git branch -a 查看本地和遠程所有分支
git merge <分支名> 合并分支
git merge --abort 合并分支出現(xiàn)沖突時，取消合并，一切回到合并前的狀態(tài)
git branch <新分支名> 基于當(dāng)前分支，新建一個分支
git checkout --orphan <新分支名> 新建一個空分支（會保留之前分支的所有文件）
git branch -D <分支名> 刪除本地某個分支
git push <遠程庫名> :<分支名> 刪除遠程某個分支
git branch <新分支名稱> <提交ID> 從提交歷史恢復(fù)某個刪掉的某個分支
git branch -m <原分支名> <新分支名> 分支更名
git checkout <分支名> 切換到本地某個分支
git checkout <遠程庫名>/<分支名> 切換到線上某個分支
git checkout -b <新分支名> 把基于當(dāng)前分支新建分支，并切換為這個分支