最近試著提升自己的前端技術(shù)，發(fā)現(xiàn)其實(shí)從面試題去學(xué)習(xí)和吸收知識(shí)也是非常不錯(cuò)的選擇抬吟！不僅能快速的抓住知識(shí)點(diǎn)渐行，而且還能應(yīng)對(duì)以后的面試。簡(jiǎn)直是一舉兩得（哈哈哈哈）叠骑。
目前只從三元大神那里獲取的面試內(nèi)容(有興趣可以看一下)：
阿里云前端實(shí)習(xí)生面試 | 三元博客
=李皇。= 目前還沒更新完（哭唧唧）
瀏覽器緩存機(jī)制
一，瀏覽器緩存類型
- 強(qiáng)緩存：不會(huì)向服務(wù)器發(fā)送請(qǐng)求宙枷，直接從緩存中讀取資源掉房，在chrome控制臺(tái)的network選項(xiàng)中可以看到該請(qǐng)求返回200的狀態(tài)碼，并且size顯示from disk cache或from memory cache;
- 協(xié)商緩存：向服務(wù)器發(fā)送請(qǐng)求慰丛，服務(wù)器會(huì)根據(jù)這個(gè)請(qǐng)求的request header的一些參數(shù)來判斷是否命中協(xié)商緩存卓囚，如果命中，測(cè)返回304狀態(tài)碼并帶上新的response header通知瀏覽器從緩存中讀取資源璧帝；
兩者的共同點(diǎn)是捍岳，都是從客戶端緩存中讀取資源；區(qū)別是強(qiáng)緩存不會(huì)發(fā)請(qǐng)求睬隶，協(xié)商緩存會(huì)發(fā)請(qǐng)求锣夹。
二、緩存有關(guān)的header
強(qiáng)緩存
Expires：response header里的過期時(shí)間苏潜，瀏覽器再次加載資源時(shí)银萍，如果在這個(gè)過期時(shí)間內(nèi)，則命中強(qiáng)緩存恤左。
Cache-Control：當(dāng)值設(shè)為max-age=300時(shí)贴唇，則代表在這個(gè)請(qǐng)求正確返回時(shí)間（瀏覽器也會(huì)記錄下來）的5分鐘內(nèi)再次加載資源，就會(huì)命中強(qiáng)緩存飞袋。
Expires和Cache-Control:max-age=*** 的作用是差不多的戳气，區(qū)別就在于 Expires 是http1.0的產(chǎn)物，Cache-Control是http1.1的產(chǎn)物巧鸭，兩者同時(shí)存在的話瓶您，Cache-Control優(yōu)先級(jí)高于Expires；在某些不支持HTTP1.1的環(huán)境下纲仍，Expires就會(huì)發(fā)揮用處呀袱。所以Expires其實(shí)是過時(shí)的產(chǎn)物，現(xiàn)階段它的存在只是一種兼容性的寫法
（編輯補(bǔ)充：Expires和Cache-Control的區(qū)別還有一個(gè)：Expires是一個(gè)具體的服務(wù)器時(shí)間郑叠，這就導(dǎo)致一個(gè)問題夜赵，如果客戶端時(shí)間和服務(wù)器時(shí)間相差較大，緩存命中與否就不是開發(fā)者所期望的乡革。Cache-Control是一個(gè)時(shí)間段寇僧，控制就比較容易摊腋。）
協(xié)商緩存
ETag和If-None-Match：這兩個(gè)要一起說。Etag是上一次加載資源時(shí)婉宰，服務(wù)器返回的response header歌豺，是對(duì)該資源的一種唯一標(biāo)識(shí)，只要資源有變化心包，Etag就會(huì)重新生成类咧。瀏覽器在下一次加載資源向服務(wù)器發(fā)送請(qǐng)求時(shí)，會(huì)將上一次返回的Etag值放到request header里的If-None-Match里蟹腾，服務(wù)器接受到If-None-Match的值后痕惋，會(huì)拿來跟該資源文件的Etag值做比較，如果相同娃殖，則表示資源文件沒有發(fā)生改變值戳，命中協(xié)商緩存
Last-Modified和If-Modified-Since：這兩個(gè)也要一起說。Last-Modified是該資源文件最后一次更改時(shí)間炉爆，服務(wù)器會(huì)在response header里返回堕虹，同時(shí)瀏覽器會(huì)將這個(gè)值保存起來，在下一次發(fā)送請(qǐng)求時(shí)芬首，放到request header里的If-Modified-Since里赴捞，服務(wù)器在接收到后也會(huì)做比對(duì)，如果相同則命中協(xié)商緩存郁稍。
ETag和Last-Modified的作用和用法也是差不多赦政，說一說他們的區(qū)別。
首先在精確度上耀怜，Etag要優(yōu)于Last-Modified恢着。Last-Modified的時(shí)間單位是秒，如果某個(gè)文件在1秒內(nèi)改變了多次财破，那么他們的Last-Modified其實(shí)并沒有體現(xiàn)出來修改掰派，但是Etag每次都會(huì)改變確保了精度；如果是負(fù)載均衡的服務(wù)器左痢，各個(gè)服務(wù)器生成的Last-Modified也有可能不一致靡羡。
第二在性能上，Etag要遜于Last-Modified抖锥，畢竟Last-Modified只需要記錄時(shí)間亿眠，而Etag需要服務(wù)器通過算法來計(jì)算出一個(gè)hash值碎罚。
第三在優(yōu)先級(jí)上磅废，服務(wù)器校驗(yàn)優(yōu)先考慮Etag。
三荆烈、瀏覽器緩存過程
- 瀏覽器第一次加載資源拯勉，服務(wù)器返回200竟趾，瀏覽器將資源文件從服務(wù)器上請(qǐng)求下載下來，并把response header及該請(qǐng)求的返回時(shí)間一并緩存宫峦；
- 下一次加載資源時(shí)岔帽，先比較當(dāng)前時(shí)間和上一次返回200時(shí)的時(shí)間差，如果沒有超過cache-control設(shè)置的max-age导绷，則沒有過期犀勒，命中強(qiáng)緩存，不發(fā)請(qǐng)求直接從本地緩存讀取該文件（如果瀏覽器不支持HTTP1.1妥曲，則用expires判斷是否過期）贾费；如果時(shí)間過期，則向服務(wù)器發(fā)送header帶有If-None-Match和If-Modified-Since的請(qǐng)求檐盟；
- 服務(wù)器收到請(qǐng)求后褂萧，優(yōu)先根據(jù)Etag的值判斷被請(qǐng)求的文件有沒有做修改，Etag值一致則沒有修改葵萎，命中協(xié)商緩存导犹，返回304；如果不一致則有改動(dòng)羡忘，直接返回新的資源文件帶上新的Etag值并返回200谎痢；
- 如果服務(wù)器收到的請(qǐng)求沒有Etag值，則將If-Modified-Since和被請(qǐng)求文件的最后修改時(shí)間做比對(duì)壳坪，一致則命中協(xié)商緩存舶得，返回304；不一致則返回新的last-modified和文件并返回200爽蝴；
三沐批、用戶行為對(duì)瀏覽器緩存的控制
- 地址欄訪問，鏈接跳轉(zhuǎn)是正常用戶行為蝎亚，將會(huì)觸發(fā)瀏覽器緩存機(jī)制九孩；
- F5刷新，瀏覽器會(huì)設(shè)置max-age=0发框，跳過強(qiáng)緩存判斷躺彬，會(huì)進(jìn)行協(xié)商緩存判斷；
- ctrl+F5刷新梅惯，跳過強(qiáng)緩存和協(xié)商緩存宪拥，直接從服務(wù)器拉取資源。
四铣减、實(shí)際應(yīng)用
當(dāng)在實(shí)際應(yīng)用中時(shí)她君，對(duì)于所有可緩存資源，一般需要指定一個(gè) Expires 或 Cache-Control max-age以及一個(gè)Last-Modified或ETag葫哗。這樣既能控制強(qiáng)緩存缔刹，也能控制協(xié)商緩存球涛。但是由于 Cache-Control 只支持 http 1.1，如果需要兼容老設(shè)備校镐，還是需要 Expires亿扁，它既支持 http1.0 也支持 http 1.1。
但是如果對(duì)于一個(gè)不是經(jīng)常改變的靜態(tài)資源來說鸟廓，我們可以通過服務(wù)器來告訴瀏覽器是否需要重新請(qǐng)求从祝，這樣就避免了很多 304。
比如我們可以通過在 url 后面加上 md5 參數(shù)或者將 md5 參數(shù)寫成文件名的一部分來實(shí)現(xiàn)引谜。
當(dāng)資源沒有變動(dòng)的時(shí)候直接使用緩存哄褒，不用發(fā)起請(qǐng)求，當(dāng)資源發(fā)生變化時(shí)煌张，其 url 就會(huì)發(fā)生變化呐赡。網(wǎng)址一經(jīng)更改，系統(tǒng)就會(huì)強(qiáng)制瀏覽器重新抓取資源骏融。
https://www.cnblogs.com/vajoy/p/5341664.html
cookie屬性詳解
-
name: 字段為一個(gè)cookie的名稱 -
value: 字段為一個(gè)cookie的值 -
domain: 字段為可以訪問此cookie的域名 -
path: 字段為可以訪問此cookie的頁(yè)面路徑链嘀。 比如domain是abc.com,path是/test，那么只有/test路徑下的頁(yè)面可以讀取此cookie档玻。 -
expires/Max-Age:字段為此cookie超時(shí)時(shí)間怀泊。若設(shè)置其值為一個(gè)時(shí)間，那么當(dāng)?shù)竭_(dá)此時(shí)間后误趴，此cookie失效霹琼。不設(shè)置的話默認(rèn)值是Session，意思是cookie會(huì)和session一起失效凉当。當(dāng)瀏覽器關(guān)閉(不是瀏覽器標(biāo)簽頁(yè)枣申，而是整個(gè)瀏覽器) 后，此cookie失效看杭。 -
Size:字段 此cookie大小 -
http:字段 cookie的httponly屬性忠藤。若此屬性為true，則只有在http請(qǐng)求頭中會(huì)帶有此cookie的信息楼雹，而不能通過document.cookie來訪問此cookie模孩。 -
secure字段 設(shè)置是否只能通過https來傳遞此條cookie -
Session意思是cookie會(huì)和session一起失效。當(dāng)瀏覽器關(guān)閉(不是瀏覽器標(biāo)簽頁(yè)贮缅，而是整個(gè)瀏覽器) 后榨咐，此cookie失效。
箭頭函數(shù)和普通函數(shù)的區(qū)別
箭頭函數(shù)不綁定this谴供，會(huì)捕獲其所在的上下文的this值块茁，作為自己的this值
var obj = {
a: 10,
b: () => {
console.log(this.a); // undefined
console.log(this); // Window {postMessage: ?, blur: ?, focus: ?, close: ?, frames: Window, …}
},
c: function() {
console.log(this.a); // 10
console.log(this); // {a: 10, b: ?, c: ?}
}
}
obj.b();
obj.c();
箭頭函數(shù)不綁定arguments，取而代之用rest參數(shù)...解決
function A(a){ console.log(arguments)}
A(2,'sdas','asda')
Arguments(3) [2, "sdas", "asda", callee: ?, Symbol(Symbol.iterator): ?]
let B = (b)=>{
console.log(arguments);
}
B(2,92,32,32); // Uncaught ReferenceError: arguments is not defined
let C = (...c) => {
console.log(c);
}
C(3,82,32,11323); // [3, 82, 32, 11323]
箭頭函數(shù)是匿名函數(shù)不能作為構(gòu)造函數(shù)使用憔鬼，不能使用new
let a = () => { console.log(111)}
a()
let fn = new a()
VM325:1 Uncaught TypeError: a is not a constructor
at <anonymous>:1:10
箭頭函數(shù)沒有原型屬性
var a = ()=>{
return 1;
}
function b(){
return 2;
}
console.log(a.prototype); // undefined
console.log(b.prototype); // {constructor: ?}
箭頭函數(shù)不能當(dāng)做Generator函數(shù),不能使用yield關(guān)鍵字
// 普通函數(shù)的this指向調(diào)用他的對(duì)象
// 箭頭函數(shù)的this指向調(diào)用父級(jí)的對(duì)象龟劲，如果父級(jí)作用于還是箭頭函數(shù)，就繼續(xù)向上找轴或，直到window
(補(bǔ)充)箭頭函數(shù)體內(nèi)的this對(duì)象昌跌，就是 定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象照雁。而普通函數(shù)中this指向是可變的蚕愤，普通函數(shù)的this指向調(diào)用它的那個(gè)對(duì)象
