前端面試(知識(shí)積累)

最近試著提升自己的前端技術(shù),發(fā)現(xiàn)其實(shí)從面試題去學(xué)習(xí)和吸收知識(shí)也是非常不錯(cuò)的選擇抬吟!不僅能快速的抓住知識(shí)點(diǎn)渐行,而且還能應(yīng)對(duì)以后的面試。簡(jiǎn)直是一舉兩得(哈哈哈哈)叠骑。

目前只從三元大神那里獲取的面試內(nèi)容(有興趣可以看一下):
阿里云前端實(shí)習(xí)生面試 | 三元博客
=李皇。= 目前還沒更新完(哭唧唧)

瀏覽器緩存機(jī)制

一,瀏覽器緩存類型

  1. 強(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;
  2. 協(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。


三荆烈、瀏覽器緩存過程

  1. 瀏覽器第一次加載資源拯勉,服務(wù)器返回200竟趾,瀏覽器將資源文件從服務(wù)器上請(qǐng)求下載下來,并把response header及該請(qǐng)求的返回時(shí)間一并緩存宫峦;
  2. 下一次加載資源時(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)求檐盟;
  3. 服務(wù)器收到請(qǐng)求后褂萧,優(yōu)先根據(jù)Etag的值判斷被請(qǐng)求的文件有沒有做修改,Etag值一致則沒有修改葵萎,命中協(xié)商緩存导犹,返回304;如果不一致則有改動(dòng)羡忘,直接返回新的資源文件帶上新的Etag值并返回200谎痢;
  4. 如果服務(wù)器收到的請(qǐng)求沒有Etag值,則將If-Modified-Since和被請(qǐng)求文件的最后修改時(shí)間做比對(duì)壳坪,一致則命中協(xié)商緩存舶得,返回304;不一致則返回新的last-modified和文件并返回200爽蝴;

三沐批、用戶行為對(duì)瀏覽器緩存的控制

  1. 地址欄訪問,鏈接跳轉(zhuǎn)是正常用戶行為蝎亚,將會(huì)觸發(fā)瀏覽器緩存機(jī)制九孩;
  2. F5刷新,瀏覽器會(huì)設(shè)置max-age=0发框,跳過強(qiáng)緩存判斷躺彬,會(huì)進(jìn)行協(xié)商緩存判斷;
  3. 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屬性詳解

  1. name: 字段為一個(gè)cookie的名稱
  2. value: 字段為一個(gè)cookie的值
  3. domain: 字段為可以訪問此cookie的域名
  4. path: 字段為可以訪問此cookie的頁(yè)面路徑链嘀。 比如domain是abc.com,path是/test,那么只有/test路徑下的頁(yè)面可以讀取此cookie档玻。
  5. 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失效看杭。
  6. Size :字段 此cookie大小
  7. http:字段 cookie的httponly屬性忠藤。若此屬性為true,則只有在http請(qǐng)求頭中會(huì)帶有此cookie的信息楼雹,而不能通過document.cookie來訪問此cookie模孩。
  8. secure 字段 設(shè)置是否只能通過https來傳遞此條cookie
  9. 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ì)象

持續(xù)更新...

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市饺蚊,隨后出現(xiàn)的幾起案子萍诱,更是在濱河造成了極大的恐慌,老刑警劉巖污呼,帶你破解...
    沈念sama閱讀 223,002評(píng)論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件裕坊,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡燕酷,警方通過查閱死者的電腦和手機(jī)籍凝,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來苗缩,“玉大人饵蒂,你說我怎么就攤上這事〗囱龋” “怎么了退盯?”我有些...
    開封第一講書人閱讀 169,787評(píng)論 0 365
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)泻肯。 經(jīng)常有香客問我渊迁,道長(zhǎng),這世上最難降的妖魔是什么灶挟? 我笑而不...
    開封第一講書人閱讀 60,237評(píng)論 1 300
  • 正文 為了忘掉前任宫纬,我火速辦了婚禮,結(jié)果婚禮上膏萧,老公的妹妹穿的比我還像新娘漓骚。我一直安慰自己,他們只是感情好榛泛,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,237評(píng)論 6 398
  • 文/花漫 我一把揭開白布蝌蹂。 她就那樣靜靜地躺著,像睡著了一般曹锨。 火紅的嫁衣襯著肌膚如雪孤个。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,821評(píng)論 1 314
  • 那天沛简,我揣著相機(jī)與錄音齐鲤,去河邊找鬼斥废。 笑死,一個(gè)胖子當(dāng)著我的面吹牛给郊,可吹牛的內(nèi)容都是我干的牡肉。 我是一名探鬼主播,決...
    沈念sama閱讀 41,236評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼淆九,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼统锤!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起炭庙,我...
    開封第一講書人閱讀 40,196評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤毁腿,失蹤者是張志新(化名)和其女友劉穎绳瘟,沒想到半個(gè)月后阳距,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體腐巢,經(jīng)...
    沈念sama閱讀 46,716評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,794評(píng)論 3 343
  • 正文 我和宋清朗相戀三年腻脏,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了嘲驾。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,928評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡迹卢,死狀恐怖辽故,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情腐碱,我是刑警寧澤誊垢,帶...
    沈念sama閱讀 36,583評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站症见,受9級(jí)特大地震影響喂走,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜谋作,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,264評(píng)論 3 336
  • 文/蒙蒙 一芋肠、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧遵蚜,春花似錦帖池、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至寂殉,卻和暖如春囚巴,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工彤叉, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留庶柿,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,378評(píng)論 3 379
  • 正文 我出身青樓秽浇,卻偏偏與公主長(zhǎng)得像浮庐,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子兼呵,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,937評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容