前端面試記錄
1在登錄過(guò)程中怎么使用cookie處理token的
cookie的讀取:document.cookie
設(shè)置cookie：document.cookie=name=${encodeURIComponent(name)}; max-age=1000;
服務(wù)器端設(shè)置cookie
var http = require('http');var fs = require('fs');
http.createServer(function(req, res) {
? ?res.setHeader('status', '200 OK');
? ?res.setHeader('Set-Cookie', 'isVisit=true;domain=.yourdomain.com;path=/;max-age=1000');
? ?res.write('Hello World');
? ?res.end();
}).listen(8888);
console.log('running localhost:8888')
session 是另一種記錄服務(wù)端與客戶(hù)端會(huì)話(huà)狀態(tài)的機(jī)制 session 基于cookie實(shí)現(xiàn)的，session儲(chǔ)存在服務(wù)端，sessionId儲(chǔ)存在客戶(hù)端的cookie中
session的認(rèn)證流程（sessionId是連接cookie和session的橋梁，以此實(shí)現(xiàn)登錄驗(yàn)證）
1 用戶(hù)第一次請(qǐng)求服務(wù)器的時(shí)候，服務(wù)器會(huì)根據(jù)請(qǐng)求信息生成session
2 請(qǐng)求返回session唯一的標(biāo)識(shí)sessionId給瀏覽器
3 瀏覽器接收到服務(wù)器發(fā)回的請(qǐng)求，會(huì)將sessionId存入到cookie中，并記錄其對(duì)應(yīng)的域名
4 用戶(hù)第二次訪問(wèn)服務(wù)端的時(shí)候，瀏覽器會(huì)將此域名下的cookie發(fā)給服務(wù)端，服務(wù)端獲取seeeionId查找對(duì)應(yīng)的session信息，看是否登錄。
session和cookie的區(qū)別
1 session是在服務(wù)端，cookie是在客戶(hù)端，session更安全
2 session可儲(chǔ)存任意類(lèi)型的數(shù)據(jù)，cookie只能存儲(chǔ)字符串
3 cookie可設(shè)置長(zhǎng)時(shí)間保存，session在過(guò)期或?yàn)g覽器關(guān)閉后失效
4 cookie只有4kb，session容量高，但會(huì)對(duì)服務(wù)器造成壓力
token和session的區(qū)別
1 session是記錄服務(wù)端和客戶(hù)端會(huì)話(huà)狀態(tài)的機(jī)制，使得服務(wù)端有狀態(tài)化，可記錄會(huì)話(huà)信息。token是令牌，是訪問(wèn)資源的憑證，使得服務(wù)端無(wú)狀態(tài)化
2 token更安全，每個(gè)請(qǐng)求都帶簽名
JWT 認(rèn)證流程：
用戶(hù)輸入用戶(hù)名/密碼登錄，服務(wù)端認(rèn)證成功后，會(huì)返回給客戶(hù)端一個(gè) JWT 客戶(hù)端將 token 保存到本地（通常使用 localstorage，也可以使用 cookie） 當(dāng)用戶(hù)希望訪問(wèn)一個(gè)受保護(hù)的路由或者資源的時(shí)候，需要請(qǐng)求頭的 Authorization 字段中使用Bearer 模式添加 JWT，其內(nèi)容看起來(lái)是下面這樣
2行內(nèi)元素和塊級(jí)元素
行內(nèi)元素
無(wú)法設(shè)置寬高 margin左右有效，上下無(wú)效 padding不會(huì)自動(dòng)換行
塊級(jí)元素
可設(shè)置寬高 超出當(dāng)前行會(huì)自動(dòng)換行 多個(gè)塊級(jí)默認(rèn)會(huì)從上往下
通過(guò)block,inline,inline-block轉(zhuǎn)化
3animation和transform
animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state
transition-property: 過(guò)渡屬性，默認(rèn)值：all； transition-duration: 過(guò)渡持續(xù)時(shí)間，默認(rèn)值：0s； transiton-timing-function: 過(guò)渡函數(shù)，默認(rèn)值：ease； transition-delay: 過(guò)渡延遲時(shí)間，默認(rèn)值：0s；
transform:rotate translate scale skew
4父子組件生命周期的執(zhí)行順序
父beforecreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
5Promise.all和Promise.race
Promise.all()檢測(cè)參數(shù)內(nèi)部所有的Promise實(shí)例是否成功,如果成功,就調(diào)用.then()變?yōu)閞eject狀態(tài)
promise.race() 那個(gè)先改變狀態(tài),其狀態(tài)也跟著改變,獲取那個(gè)率先改變的Promise實(shí)例的返回值作為回調(diào)函數(shù)的參數(shù)
Promise.allSettled() 異步操作全部結(jié)束后調(diào)用
Promise.any() 只要其中的一個(gè) promise 成功，就返回那個(gè)已經(jīng)成功的 promise ,如果可迭代對(duì)象中沒(méi)有一個(gè) promise 成功（即所有的 promises 都失敗/拒絕），就返回一個(gè)失敗的 promise 和 AggregateError 類(lèi)型的實(shí)例，它是 Error 的一個(gè)子類(lèi)，用于把單一的錯(cuò)誤集合在一起
6輸入框快速輸入的防抖結(jié)論
7es6新增
8px em rem vw vh %
vw vh是相對(duì)于視口單位
9display:none visibility: hidden與opacity: 0的區(qū)別
display:none:不占高度,不可點(diǎn)擊,不在渲染樹(shù)中,子節(jié)點(diǎn)也不可修改 visibility:hidden 只是將元素隱藏,還是在渲染樹(shù)中,占據(jù)空間,子元素可以通過(guò)visibility:visible顯示,只需重繪 opacity:0 可點(diǎn)擊,不可見(jiàn),只需重繪
