最近試著提升自己的前端技術(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ì)象