錯(cuò)誤之處弯淘，歡迎指正禾蚕，持續(xù)更新中。
1. http協(xié)議和https協(xié)議的區(qū)別是什么勉失？
-
https需要申請(qǐng)證書(shū)，并且把證書(shū)部署到服務(wù)器上皂林，進(jìn)行相關(guān)的配置朗鸠。 -
http的信息是明文傳輸，https是用SSL/TLS加密傳輸協(xié)議础倍。 -
http使用80端口烛占，https使用443端口。 -
http協(xié)議是無(wú)狀態(tài)沟启，無(wú)連接的忆家。
- 無(wú)狀態(tài)：數(shù)據(jù)包的發(fā)送、接受都是相互獨(dú)立的德迹。
- 無(wú)連接：通信雙方都不能長(zhǎng)久的維持對(duì)方信息芽卿。
2. https協(xié)議中s指的是什么？
s指的是SSL/TLS協(xié)議胳搞。
該協(xié)議的作用是：
- 加密信息傳播卸例，無(wú)法被竊聽(tīng)。
- 配備身份證書(shū)肌毅，防止被冒充筷转。
3. 簡(jiǎn)單介紹http狀態(tài)碼。
-
2**表示成功悬而，例如200呜舒。 -
3**大部分表示重定向，請(qǐng)求的URL已移走笨奠，返回信息中應(yīng)該包含一個(gè)URL袭蝗，為資源現(xiàn)在所處的位置。 其中304表示未修改艰躺，也就是自從客戶(hù)端上次請(qǐng)求后呻袭，請(qǐng)求的內(nèi)容未曾修改過(guò)，此時(shí)服務(wù)端返回304腺兴，不會(huì)返回響應(yīng)內(nèi)容左电，進(jìn)而節(jié)省帶寬和開(kāi)銷(xiāo)。 -
4**表示客戶(hù)端錯(cuò)誤页响，例如404未找到資源篓足，403請(qǐng)求被服務(wù)器拒絕。 -
5**表示服務(wù)端錯(cuò)誤闰蚕。
4. 簡(jiǎn)要說(shuō)明get和post請(qǐng)求的區(qū)別栈拖？
-
get的數(shù)據(jù)在URL上是可見(jiàn)的。 -
get請(qǐng)求對(duì)長(zhǎng)度有限制没陡。 -
get請(qǐng)求的數(shù)據(jù)可以收藏為書(shū)簽涩哟，post不可以索赏。 -
post請(qǐng)求后，按后退贴彼、刷新按鈕數(shù)據(jù)會(huì)被重新提交潜腻，get不會(huì)。 -
get編碼類(lèi)型為application/x-www-form-url器仗，
post編碼類(lèi)型為encodeapplication/x-www-form-urlencoded或multipart/form-data -
get歷史參數(shù)會(huì)被保存在瀏覽器中融涣，post不會(huì)。 -
get只允許發(fā)ASCII精钮，post沒(méi)有限制威鹿。 -
get安全性相對(duì)來(lái)說(shuō)較差，因?yàn)榘l(fā)送的數(shù)據(jù)是URL的一部分轨香。
5. 跨域問(wèn)題是如何出現(xiàn)的以及如何解決忽你？
訪(fǎng)問(wèn)的URL，協(xié)議弹沽、域名檀夹、端口號(hào)，有任意一個(gè)不同就算跨域策橘。
js文件、css文件娜亿、圖片文件都是被允許跨域請(qǐng)求的丽已。
后端接口數(shù)據(jù)，其他域的cookie买决，其他域的緩存是不允許跨域請(qǐng)求的沛婴。
解決跨域：
-
JSONP
利用script標(biāo)簽的src屬性允許跨域的機(jī)制來(lái)進(jìn)行JSONP請(qǐng)求，瀏覽器會(huì)將script標(biāo)簽src屬性請(qǐng)求得到的數(shù)據(jù)督赤，當(dāng)作js代碼執(zhí)行嘁灯。
JSONP在發(fā)送的時(shí)候，URL上參數(shù)會(huì)帶一個(gè)callback：
<script>
function func(message) {
console.log(message);
}
</script>
<script src="http://www.test.com/jsonp?callback=func" type="text/javascript" charset="utf-8"></script>
服務(wù)端會(huì)將callback與要返回的數(shù)據(jù)進(jìn)行拼接躲舌，上述代碼返回的結(jié)果是func({"name": "chris"})丑婿，執(zhí)行這段代碼，調(diào)用函數(shù)func没卸，傳入的參數(shù)就是請(qǐng)求得到的數(shù)據(jù)羹奉，就打印出了返回的數(shù)據(jù)。
iframe
html1頁(yè)面
/*http://127.0.0.1:5500/html1*/
let iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.src = "http://127.0.0.1:5501/html2.html#chrisdean"; //向html2頁(yè)面?zhèn)鬟f#chrisdean
document.body.appendChild(iframe);
window.addEventListener("hashchange", () => {
console.log(location.hash.substring(1));
//監(jiān)聽(tīng)當(dāng)前頁(yè)面的hash變化
});
html2頁(yè)面
/*http://127.0.0.1:5501/html2*/
if (location.hash === '#chrisdean') {
const age = 22;
try {
parent.location.hash = age;
} catch (e) {
//IE约计、Chrome下的安全機(jī)制無(wú)法修改parent.location.hash诀拭，所以要利用一個(gè)中間的代理iframe
var ifrproxy = document.createElement('iframe');
ifrproxy.style.display = 'none';
ifrproxy.src = 'http://127.0.0.1:5500/html3.html#' + age;
document.body.appendChild(ifrproxy);
}
}
html3頁(yè)面
/*http://127.0.0.1:5500/html3*/
parent.parent.location.hash = self.location.hash.substring(1);
- 代理
瀏覽器是禁止跨域的，但是服務(wù)端不禁止煤蚌，在本地運(yùn)行npm run dev命令時(shí)實(shí)際上是用node運(yùn)行了一個(gè)服務(wù)器耕挨，因此proxy實(shí)際上是將請(qǐng)求發(fā)給本地的服務(wù)器细卧，再由本地服務(wù)器轉(zhuǎn)發(fā)給目標(biāo)服務(wù)器，做了一層代理筒占。 - 解決線(xiàn)上跨域
使用nginx反向代理酒甸。
6. 在瀏覽器輸入URL后發(fā)生了什么？
- 檢查緩存中有沒(méi)有這個(gè)域名對(duì)應(yīng)的解析過(guò)的
IP地址赋铝。 -
DNS解析URL插勤，獲取IP地址。 - 根據(jù)
IP建立TCP連接革骨。 - 發(fā)送
http請(qǐng)求农尖。 - 服務(wù)器處理請(qǐng)求，返回響應(yīng)結(jié)果良哲。
- 解析
html標(biāo)簽盛卡，構(gòu)建DOM樹(shù)。 - 解析
CSS樣式筑凫，生成CSS規(guī)則樹(shù)滑沧。 - 合并
DOM樹(shù)和CSS規(guī)則樹(shù)，生成render樹(shù)巍实。 - 布局
render樹(shù)滓技，尺寸、位置棚潦。 - 繪制
render樹(shù)令漂，顏色。 - 瀏覽器將信息傳遞給
GPU丸边，最終顯示在屏幕上叠必。
7. 如何解決頁(yè)面編碼和被請(qǐng)求的資源編碼不一致？
ajax請(qǐng)求時(shí)傳遞的參數(shù)妹窖，如果是get請(qǐng)求方式纬朝，參數(shù)如果傳遞中文，在有些瀏覽器會(huì)亂碼骄呼，不同的瀏覽器對(duì)參數(shù)編碼的處理方式不同共苛，所以對(duì)于get請(qǐng)求的參數(shù)需要使用 encodeURIComponent。
8. 瀏覽器緩存是如何實(shí)現(xiàn)的谒麦？
瀏覽器在第一次請(qǐng)求資源后俄讹，會(huì)獲取到請(qǐng)求的結(jié)果以及緩存標(biāo)識(shí)，接下來(lái)绕德，瀏覽器會(huì)根據(jù)第一次請(qǐng)求返回的響應(yīng)頭來(lái)確定緩存處理的方式患膛，分別是強(qiáng)緩存和協(xié)商緩存。
- 強(qiáng)緩存
不會(huì)向服務(wù)器發(fā)送請(qǐng)求耻蛇，直接從緩存中讀取資源踪蹬。
強(qiáng)緩存可以通過(guò)設(shè)置兩種HTTP Header實(shí)現(xiàn)：Expires和Cache-Control胞此。
- 當(dāng)
Cache-Control: max-age=300時(shí)，則代表在這個(gè)請(qǐng)求正確返回時(shí)間（瀏覽器也會(huì)記錄下來(lái)）的5分鐘內(nèi)再次加載資源跃捣，就會(huì)命中強(qiáng)緩存漱牵。
Cache-Control可以在請(qǐng)求頭或者響應(yīng)頭中設(shè)置，并且可以組合使用疚漆。
no-cache：客戶(hù)端緩存內(nèi)容酣胀，是否使用緩存則需要經(jīng)過(guò)協(xié)商緩存來(lái)驗(yàn)證決定。表示不使用Cache-Control的緩存控制方式做前置驗(yàn)證娶聘，而是使用Etag或者Last-Modified字段來(lái)控制緩存闻镶。這個(gè)名字有一點(diǎn)歧義，并不是說(shuō)瀏覽器不能緩存丸升，只是瀏覽器在使用緩存數(shù)據(jù)時(shí)铆农，需要先確認(rèn)一下資源文件是否還跟服務(wù)器保持一致。
no-store：所有內(nèi)容都不會(huì)被緩存狡耻，即不使用強(qiáng)制緩存墩剖，也不使用協(xié)商緩存。
max-age：max-age=xxx表示緩存內(nèi)容將在xxx秒后失效夷狰。
一般岭皂，我們會(huì)設(shè)置Cache-Control的值為public, max-age=xxx，表示在xxx秒內(nèi)再次訪(fǎng)問(wèn)該資源孵淘，均使用本地的緩存蒲障，不再向服務(wù)器發(fā)起請(qǐng)求。
- 協(xié)商緩存
強(qiáng)緩存依據(jù)某個(gè)時(shí)間或者某個(gè)時(shí)間段瘫证，所以并不會(huì)響應(yīng)服務(wù)端資源文件的變化，一旦資源文件發(fā)生了變化庄撮，那么強(qiáng)緩存的文件并不會(huì)在時(shí)間范圍之內(nèi)更改背捌，這樣就造成了服務(wù)器和瀏覽器文件不一致的問(wèn)題，那么此時(shí)我們就需要使用協(xié)商緩存洞斯。
協(xié)商緩存就是強(qiáng)制緩存失效后毡庆，瀏覽器攜帶緩存標(biāo)識(shí)向服務(wù)器發(fā)起請(qǐng)求，由服務(wù)器根據(jù)緩存標(biāo)識(shí)決定是否使用緩存的過(guò)程烙如。
協(xié)商緩存可以通過(guò)設(shè)置兩種HTTP Header：Last-Modified或者ETag實(shí)現(xiàn)么抗。
-
Last-Modified是該資源文件最后一次更改時(shí)間，服務(wù)器會(huì)在Response Headers中返回亚铁，瀏覽器在下一次發(fā)送請(qǐng)求時(shí)蝇刀，放到Request Header里的If-Modified-Since里，服務(wù)器在接收到后也會(huì)做比對(duì)徘溢，如果相同則命中協(xié)商緩存吞琐。 -
Etag是服務(wù)器響應(yīng)請(qǐng)求時(shí)捆探，返回當(dāng)前資源文件的一個(gè)唯一標(biāo)識(shí)，只要資源有變化站粟，Etag就會(huì)重新生成黍图。瀏覽器在下一次加載資源向服務(wù)器發(fā)送請(qǐng)求時(shí)，會(huì)將上一次返回的Etag值放到Request Header里的If-None-Match里奴烙，服務(wù)器只需要比較客戶(hù)端傳來(lái)的If-None-Match跟自己服務(wù)器上該資源的ETag是否一致助被，就能很好地判斷資源相對(duì)客戶(hù)端而言是否被修改過(guò)了。
