頁(yè)面白屏
首頁(yè)白屏的原因是打包后的js和css文件過(guò)大秒咨，瀏覽器初始訪(fǎng)問(wèn)網(wǎng)站時(shí)慌盯，會(huì)先加載該項(xiàng)目的js和css文件，加載完成后才會(huì)進(jìn)行頁(yè)面渲染姚炕。如果打包的文件過(guò)大摊欠，加載時(shí)間就會(huì)變長(zhǎng)丢烘，出現(xiàn)視覺(jué)上的頁(yè)面白屏.
①使用懶加載，打包后才根據(jù)路由生成多個(gè)js和css文件些椒，當(dāng)訪(fǎng)問(wèn)到對(duì)應(yīng)的路由時(shí)播瞳，才加載對(duì)應(yīng)的文件。在移動(dòng)端頁(yè)面的首頁(yè)時(shí)免糕，先加載可視區(qū)域的內(nèi)容赢乓，剩下的內(nèi)容等它進(jìn)入可視區(qū)域后再按需加載。
②靜態(tài)資源緩存
靜態(tài)資源長(zhǎng)期不需要修改的说墨，使用強(qiáng)緩存骏全，設(shè)置Cache-Control實(shí)現(xiàn)，設(shè)置Cache-Control:max-age=31536000,瀏覽器在一年內(nèi)直接使用本地緩存文件尼斧，不向服務(wù)器發(fā)送請(qǐng)求姜贡。
資源隨時(shí)變動(dòng)，設(shè)置ETag實(shí)現(xiàn)協(xié)商緩存棺棵，初次請(qǐng)求資源時(shí)楼咳，設(shè)置ETag,并返回200，之后請(qǐng)求時(shí)帶上If-none-match字段烛恤，詢(xún)問(wèn)服務(wù)器當(dāng)前版本是否可用母怜。
③SSR
服務(wù)端渲染，在服務(wù)端將渲染邏輯處理好缚柏，然后將處理好的HTML直接返回給前端展示苹熏，可以解決白屏問(wèn)題。
④預(yù)渲染
利用webpack的插件prerender-spa-plugin做預(yù)渲染
動(dòng)態(tài)數(shù)據(jù)無(wú)法展示币喧，不同的用戶(hù)看到的都是同樣的頁(yè)面
路由很多時(shí)轨域，代碼構(gòu)建時(shí)間太長(zhǎng)
用戶(hù)容易誤操作，由于預(yù)渲染時(shí)js還沒(méi)有加載杀餐，因此展示出來(lái)的內(nèi)容沒(méi)有js的交互邏輯干发，比如按鈕點(diǎn)擊，在js加載完成之前用戶(hù)點(diǎn)擊是沒(méi)有反應(yīng)的
預(yù)加載內(nèi)容很少史翘，當(dāng)頁(yè)面有內(nèi)容是依賴(lài)動(dòng)態(tài)數(shù)據(jù)加載時(shí)枉长，在編譯時(shí)是無(wú)法加載出動(dòng)態(tài)數(shù)據(jù)的，因此會(huì)導(dǎo)致這部分內(nèi)容編譯不出來(lái)
骨架屏
⑤骨架屏
意義：骨架屏就是在頁(yè)面尚未加載之前先給用戶(hù)展示頁(yè)面的大致結(jié)構(gòu)琼讽，在骨架頁(yè)面中必峰，圖片、文字钻蹬、圖標(biāo)都將通過(guò)灰色矩形塊或圓形塊顯示自点，直到頁(yè)面請(qǐng)求數(shù)據(jù)后渲染頁(yè)面。
原理：
通過(guò)puppeteer在服務(wù)端操控headless Chrome打開(kāi)開(kāi)發(fā)中的需要生成骨架頁(yè)面的頁(yè)面脉让，在等待頁(yè)面加載渲染完成之后桂敛，保留頁(yè)面布局樣式的前提下，通過(guò)對(duì)頁(yè)面中元素進(jìn)行刪減或增添溅潜，通過(guò)樣式覆蓋术唬，使其展示為灰色塊。
骨架屏的實(shí)現(xiàn)原理和預(yù)加載類(lèi)似滚澜，都是利用了Puppeteer爬取頁(yè)面的功能粗仓，Puppeteer是chrome出的一個(gè)headlessChromenode庫(kù)，提供了API可以抓取SPA并生成預(yù)渲染內(nèi)容设捐，和預(yù)加載不太一樣的是骨架屏技術(shù)會(huì)在Puppeteer生成內(nèi)容后借浊，利用算法將生成的內(nèi)容進(jìn)行替換，生成骨架頁(yè)面萝招，page-skeleton-webpack-plugin是一個(gè)用來(lái)生成骨架屏的webpack插件
cookie和session如何協(xié)同
session的底層是基于cookie實(shí)現(xiàn)的蚂斤。
①瀏覽器沒(méi)有cookie，向服務(wù)器發(fā)送請(qǐng)求
②服務(wù)器接受到請(qǐng)求槐沼，通過(guò)request.getSession()方法創(chuàng)建會(huì)話(huà)對(duì)象（第一次創(chuàng)建的是session會(huì)話(huà)）
服務(wù)器每次創(chuàng)建session的時(shí)候曙蒸，也會(huì)創(chuàng)建cookie，這個(gè)cookie的key是jessionid岗钩，value為創(chuàng)建的session的ID纽窟。
③通過(guò)響應(yīng)將新創(chuàng)建的session的ID放在cookie里，傳遞給瀏覽器兼吓。
④瀏覽器解析獲取到的數(shù)據(jù)臂港，就馬上創(chuàng)建一個(gè)cookie對(duì)象。有了cookie后视搏，再次請(qǐng)求服務(wù)器审孽，就會(huì)把含有session的ID的cookie傳給服務(wù)器。
⑤服務(wù)器通過(guò)request.getSession()方法凶朗，通過(guò)cookie中session的ID瓷胧，找到之前創(chuàng)建好的session對(duì)象，返回相應(yīng)數(shù)據(jù)棚愤。
xss攻擊可以造成：
1.竊取cookie信息
2.可以監(jiān)聽(tīng)用戶(hù)行為
3.可以通過(guò)修改dom偽造假的登錄窗口搓萧，騙取用戶(hù)輸入用戶(hù)名和密碼
4.生成浮窗廣告，影響用戶(hù)體驗(yàn)
如何阻止xss攻擊宛畦？
1.服務(wù)器對(duì)輸入腳本進(jìn)行過(guò)濾或轉(zhuǎn)碼
2.充分利用CSP
1）限制加載其他域下的資源文件
2）禁止向第三方提交數(shù)據(jù)瘸洛，這樣用戶(hù)的數(shù)據(jù)也不會(huì)外泄
3）禁止執(zhí)行內(nèi)聯(lián)腳本和未授權(quán)的腳本
4）還提供了上報(bào)機(jī)制，這樣可以幫助我們盡快發(fā)現(xiàn)有哪些xss攻擊次和，以便盡快修復(fù)問(wèn)題
3.使用httponly屬性
4.驗(yàn)證碼：防止腳本冒充用戶(hù)提交危險(xiǎn)操作
5.限制長(zhǎng)度：對(duì)于一些不信任的輸入反肋，可以限制其輸入長(zhǎng)度
CSRF攻擊
和 XSS 不同的是，CSRF 攻擊不需要將惡意代碼注入用戶(hù)的頁(yè)面踏施，僅僅是利用服務(wù)器的漏洞和用戶(hù)的登錄狀態(tài)來(lái)實(shí)施攻擊石蔗。
三個(gè)必要條件：
1.目標(biāo)站點(diǎn)一定要有 CSRF 漏洞罕邀；
2.用戶(hù)要登錄過(guò)目標(biāo)站點(diǎn)，并且在瀏覽器上保持
有該站點(diǎn)的登錄狀態(tài)养距；
3.需要用戶(hù)打開(kāi)一個(gè)第三方站點(diǎn)诉探，可以是黑客的
站點(diǎn)，也可以是一些論壇棍厌；
如何防止CSRF攻擊肾胯？
1. 充分利用好 Cookie 的 SameSite 屬性
Strict 最為嚴(yán)格，瀏覽器會(huì)完全禁止第三方
Cookie耘纱。
鏈接打開(kāi)敬肚、 Get 方式的表單攜帶 Cookie。 Lax 相對(duì)寬松一點(diǎn)束析。
None 艳馒，在任何情況下都會(huì)發(fā)送 Cookie 數(shù)據(jù)。
2. 驗(yàn)證請(qǐng)求的來(lái)源站點(diǎn)
3. CSRF Token
第一步畸陡，在瀏覽器向服務(wù)器發(fā)起請(qǐng)求時(shí)鹰溜，服務(wù)器生成一個(gè) CSRF Token。
第二步丁恭，在瀏覽器端如果要發(fā)起轉(zhuǎn)賬的請(qǐng)求曹动，那么需要帶上頁(yè)面中的 CSRF Token，然后服務(wù)器會(huì)驗(yàn)證該 Token 是否合法牲览。
4.X-FRAME-OPTIONS
DENY墓陈，表示頁(yè)面不允許通過(guò)iframe方式展示
AMEORIGIN，相同域名可以·通過(guò)ifame展示
ALLOW-FROM第献，可以在指定來(lái)源中的iframe展
示
