瀏覽器
-
緩存
強(qiáng)緩存：也稱為本地緩存，不向服務(wù)器發(fā)送請求彬碱，直接使用客戶端本地緩存數(shù)據(jù)奥洼；
協(xié)商緩存：也稱為304緩存溉卓，向服務(wù)器發(fā)送請求，由服務(wù)器判斷請求文件是否發(fā)生改變忿檩。如果未發(fā)生改變爆阶，則返回304狀態(tài)碼辨图，通知客戶端直接使用本地緩存；如果發(fā)生改變吱韭，則直接返回請求文件理盆。
-
強(qiáng)緩存
瀏覽器在加載資源時(shí)猿规，會先根據(jù)本地緩存資源的 header 中的 expires 和 cahe-control 判斷是否命中強(qiáng)緩存姨俩，如果命中則直接使用緩存中的資源不會再向服務(wù)器發(fā)送請求师郑。
Expires：HTTP1.0宝冕，值為GMT格式的時(shí)間字符串，緩存過期時(shí)間猬仁，在這時(shí)間之前則命中緩存；是一個(gè)絕對時(shí)間先誉，服務(wù)器時(shí)間和本地時(shí)間偏差大時(shí)候湿刽，緩存不能有效的命中；
Cache-Control：HTTP1.1褐耳，主要取值如下
public：所有內(nèi)容都將被緩存（客戶端和代理服務(wù)器都可緩存）诈闺；
private：所有內(nèi)容只有客戶端可以緩存，Cache-Control的默認(rèn)取值铃芦；
no-cache：客戶端緩存內(nèi)容雅镊，但是是否使用緩存則需要經(jīng)過協(xié)商緩存來驗(yàn)證決定；
no-store：所有內(nèi)容都不會被緩存仁烹，即不使用強(qiáng)制緩存耸弄，也不使用協(xié)商緩存；
max-age=xxx（xxx is number）：緩存內(nèi)容將在xxx秒后失效卓缰；
must-revalidate：強(qiáng)制瀏覽器嚴(yán)格遵守你設(shè)置的cache規(guī)則计呈；
proxy-revalidate：強(qiáng)制proxy嚴(yán)格遵守你設(shè)置的cache規(guī)則；
-
協(xié)商緩存
Last-Modified與If-Modified-Since：HTTP1.0
首次請求征唬；
服務(wù)器告知啟用協(xié)商緩存規(guī)則,并在響應(yīng)頭帶上
Last-Modified捌显，告知緩存到期時(shí)間；隨后的每次請求总寒，請求頭都會攜帶
If-Modified-Since扶歪，該值等于上一次響應(yīng)頭中的Last-Modified的值；服務(wù)器收到
If-Modified-Since后摄闸，會將該屬性的值與服務(wù)器上資源的最后修改時(shí)間進(jìn)行匹配善镰，從而判斷資源是否發(fā)生了變化；-
如果發(fā)生變化會返回一個(gè)完整的響應(yīng)內(nèi)容贪薪，在響應(yīng)頭中添加新的
Last-Modified值媳禁，否則，只返回 header 部分画切，狀態(tài)碼為304竣稽，響應(yīng)頭不會再添加Last-Modified；Last-Modified是感知文件修改時(shí)間霍弹，而且是秒級別毫别；所以當(dāng)文件內(nèi)容未修改，但編輯時(shí)間修改了典格，則無法命中緩存岛宦；同樣在毫秒內(nèi)改變文件并請求，則會命中緩存耍缴，無法得到最新的文件砾肺；Etag與If-None-Match：HTTP1.1
首次請求；
服務(wù)器啟用協(xié)商緩存情況下防嗡，會在響應(yīng)頭中帶上
Etag变汪；隨后每次請求，請求頭上都會帶上
If-None-Match蚁趁，該值等于上一次響應(yīng)頭中的Etag的值裙盾；服務(wù)器收到
If-None-Match后，會進(jìn)行比對，從而判斷資源是否發(fā)生變化番官；-
如果變化返回一個(gè)完整響應(yīng)內(nèi)容庐完，在響應(yīng)頭上添加新的
Etag值，否則返回 304,響應(yīng)頭不會在添加EtagEtag的生成需要服務(wù)器付出額外的開銷徘熔，會影響服務(wù)端性能
-
不能緩存的請求
HTTP信息頭中包含
Cache-Control:no-cache门躯，pragma:no-cache（HTTP1.0），或Cache-Control:max-age=0等告訴瀏覽器不用緩存的請求近顷；需要根據(jù)
Cookie生音，認(rèn)證信息等決定輸入內(nèi)容的動態(tài)請求是不能被緩存的位他；經(jīng)過HTTPS安全加密的請求悄蕾；
POST請求無法被緩存色迂；
HTTP響應(yīng)頭中不包含
Last-Modified/Etag席纽，也不包含Cache-Control/Expires的請求無法被緩存纽疟；
重定向
301：永久移動斥滤，請求的資源已被永久的移動到新的URL烂琴，返回信息會包括新的URL弧械，瀏覽器還會自動定向到新的URL蓉媳，今后任何新的請求都應(yīng)該使用新的URL來代替譬挚；
302：臨時(shí)移動。與301類似酪呻，但是資源只是臨時(shí)被移動减宣，客戶端應(yīng)該繼續(xù)使用原有的URI；
304：未修改玩荠，所請求的資源未修改漆腌，服務(wù)器返回此狀態(tài)碼時(shí)，不會返回任何資源阶冈；客戶端通常會緩存所訪問過的資源闷尿，通過提供一個(gè)頭信息指出客戶端希望只返回在指定日期之后修改的資源；
-
輸入U(xiǎn)RL到頁面呈現(xiàn)過程
-
DNS解析
①女坑、瀏覽器緩存
②填具、系統(tǒng)DNS緩存
③、路由器緩存
④匆骗、ISP(運(yùn)營商)DNS緩存
⑤劳景、迭代遞歸查詢DNS
-
HTTP請求
①、生成請求報(bào)文
②碉就、TCP三次握手建立連接
③枢泰、服務(wù)端響應(yīng)發(fā)送內(nèi)容
④、客戶端接收響應(yīng)內(nèi)容
⑤铝噩、TCP四次揮手?jǐn)嚅_連接
-
瀏覽器解析渲染頁面
①、解析HTML、CSS骏庸，構(gòu)建DOM Tree和CSSOM Tree
②毛甲、根據(jù)DOM Tree和CSSOM Tree，構(gòu)建Render Tree
③具被、根據(jù)Render Tree玻募，構(gòu)建生成RenderLayer樹布局（計(jì)算每個(gè)節(jié)點(diǎn)信息、確認(rèn)布局位置）
④一姿、渲染：繪制階段七咧，系統(tǒng)會遍歷呈現(xiàn)樹，并調(diào)用呈現(xiàn)器的“paint”方法叮叹，將呈現(xiàn)器的內(nèi)容顯示在屏幕上艾栋；
-
-
跨域
域：由協(xié)議、域名蛉顽、端口組成蝗砾；
跨域：因?yàn)闉g覽器出于安全考慮，有同源策略携冤，所以瀏覽器從一個(gè)域的網(wǎng)頁去請求另一個(gè)域的資源時(shí)就是跨域悼粮；
-
跨域解決方案：
①、JSONP：利用script標(biāo)簽曾棕，只支持get請求扣猫，存在xss安全隱患，需要服務(wù)端配合改造翘地；
②申尤、CORS：利用請求header
Access-Control-Allow-Origin控制來源域?qū)崿F(xiàn)跨域；③子眶、反向代理：nginx瀑凝、node等；
-
同源策略
瀏覽器的同源策略臭杰，限制了來自不同源的"document"或腳本粤咪，對當(dāng)前"document"讀取或設(shè)置某些屬性。從一個(gè)域上加載的腳本不允許訪問另外一個(gè)域的文檔屬性渴杆；同源策略是瀏覽器上為安全性考慮實(shí)施的非常重要的安全策略寥枝。
要求同源：Ajax請求、cookie磁奖、LocalStorage囊拜、IndexDB、DOM操作
-
HTTP1比搭、HTTP1.1冠跷、HTTP2、HTTP3
HTTP1.0：TCP短連接，可以利用Connection: keep-alive保持
HTTP1.1：持久鏈接蜜托，多數(shù)瀏覽器建立6個(gè)連接抄囚，然后將請求壓隊(duì)執(zhí)行，可能造成隊(duì)頭阻塞
HTTP2.0：二進(jìn)制分幀協(xié)議橄务、多路復(fù)用幔托、頭部壓縮、服務(wù)器推送蜂挪、流控重挑，單個(gè)TCP連接、隊(duì)頭阻塞問題會影響整個(gè)連接
HTTP3.0：QUIC棠涮，UDP+多路復(fù)用+安全加密+擁塞控制谬哀，不需要建聯(lián)斷連的開銷
-
跨域如何處理cookie
前端的請求用jsonp的形式
-
前端加上配置：
xhrFields: { withCredentials: true },
服務(wù)端加上配置：
header('Access-Control-Allow-Credentials: true');
-
cookie SameSite
Strict：嚴(yán)格模式，cookie不能跨域使用
Lax：允許部分第三方請求攜帶cookie（a標(biāo)簽鏈接故爵、預(yù)加載link玻粪、get表單）
None：無論是否跨站都會發(fā)送cookie
-
首屏加載優(yōu)化
使用CDN資源，vue诬垂、vue-router劲室、vuex、element-ui等從vendor.js中分離出來结窘，使用CDN資源引入（國內(nèi)推薦BootCDN）很洋；
開啟gzip壓縮，nginx開啟gzip壓縮隧枫；
vue-router使用懶加載喉磁，異步方式分模塊加載文件，配置chunkFilename官脓；
圖片資源壓縮协怒，icon資源使用雪碧圖/iconfont；
webpack配置優(yōu)化卑笨，用uglifyjs-webpack-plugin壓縮js文件孕暇，清除log日志和注釋，配置SplitChunks抽取公共代碼赤兴；使用mini-xss-extract-plugin提取CSS 到單獨(dú)的文件, 并使用optimize-css-assets-webpack-plugin來壓縮CSS文件妖滔；
骨架屏
SSR、node聚合
-
網(wǎng)頁從請求到呈現(xiàn)花了很長時(shí)間桶良，如何排查
可以用Chrome dev-tools中的performance工具座舍，截取第一個(gè)白屏到渲染完成的過程；可以看到loading陨帆、scripting曲秉、rendering采蚀、painting、system岸浑、idle的時(shí)間花費(fèi)分布搏存；
Web Components
- Custom elements（自定義元素）：一組JavaScript API，允許您定義custom elements及其行為矢洲，然后可以在您的用戶界面中按照需要使用它們
<body>
<user-card></user-card>
<template>...</template>
<script>
class UserCard extends HTMLElement {
constructor() {
super();
var templateElem = document.getElementById('userCardTemplate');
var content = templateElem.content.cloneNode(true);
this.appendChild(content);
}
}
window.customElements.define('user-card', UserCard);
</script>
</body>
- Shadow DOM（影子DOM）：一組JavaScript API，用于將封裝的“影子”DOM樹附加到元素（與主文檔DOM分開呈現(xiàn)）并控制其關(guān)聯(lián)的功能缩焦。通過這種方式读虏，您可以保持元素的功能私有，這樣它們就可以被腳本化和樣式化袁滥，而不用擔(dān)心與文檔的其他部分發(fā)生沖突
class UserCard extends HTMLElement {
constructor() {
super();
var shadow = this.attachShadow( { mode: 'closed' } );
var templateElem = document.getElementById('userCardTemplate');
var content = templateElem.content.cloneNode(true);
content.querySelector('img').setAttribute('src', this.getAttribute('image'));
content.querySelector('.container>.name').innerText = this.getAttribute('name');
content.querySelector('.container>.email').innerText = this.getAttribute('email');
shadow.appendChild(content);
}
}
window.customElements.define('user-card', UserCard);
-
HTML templates（HTML模板）：
<template>和<slot>元素使您可以編寫不在呈現(xiàn)頁面中顯示的標(biāo)記模板盖桥。然后它們可以作為自定義元素結(jié)構(gòu)的基礎(chǔ)被多次重用
