美團-前端開發(fā)面經(jīng)（六）

防抖：

在某個事件觸發(fā)n秒后執(zhí)行，如果在事件觸發(fā)的n秒內(nèi)又再次觸發(fā)，則以新的時間為基準

我們可以使用閉包來實現(xiàn)防抖,使用閉包可以實現(xiàn)對函數(shù)的復(fù)用，也可以避免對全局作用域的污染，這邊要注意我們這邊在定時器里使用了箭頭函數(shù)是為了保留返回的閉包的this指向，因為最后事件是指向調(diào)用這個閉包的對象的，而不是指向調(diào)用用產(chǎn)生閉包的foo函數(shù)的對象。(可能有點繞口)

function foo(event,time){    let timer=null    return function(...args){    clearTimeout(timer)    timer=setTimeout(()=>{            event.apply(this,args)        },time)    }}function show(){    console.log('111')}window.addEventListener('scroll',foo(show,1000))

這個意思就是我們觸發(fā)了事件都會清空之前的定時器，重新開始計時，這樣保證了不管觸發(fā)在上一次計時范圍內(nèi)或者外都清空計時器并重新計時。

節(jié)流：

上面防抖如果我們一直都在觸發(fā)這個事件，持續(xù)觸發(fā)了很久，但是他也只會執(zhí)行最后一次，這很顯然是不好的，所以我們就有了節(jié)流，節(jié)流就是不管事件觸發(fā)的頻率有多大，都會在固定的時間間隔內(nèi)執(zhí)行一次。

有兩種方法可以實現(xiàn)節(jié)流

//使用時間戳function throttle(e,time){    let pre_time=0      return function(...args){        if(Date.now()-pre_time>time){ //超過間隔則執(zhí)行            pre_time=Date.now()                 e.apply(this,args)        }    }}//使用定時器function throttle(e,time){    let timer=null;    return funciton(...args){    if(!timer){         timer=setTimeout(()=>{            timer=null            e.apply(this,args)        },time)     }    }}

在javascript中有三種聲明變量的方式：var、let、const。

JS中作用域有：全局作用域、函數(shù)作用域。沒有塊作用域的概念。ECMAScript 6(簡稱ES6)中新增了塊級作用域。塊作用域由 { } 包括，if語句和for語句里面的{ }也屬于塊作用域。

var

var定義的變量可以修改，如果不初始化會輸出undefined，不會報錯。

var a = 1;// var a;//不會報錯console.log('函數(shù)外var定義a：' + a);//可以輸出a=1function change(){a = 4;console.log('函數(shù)內(nèi)var定義a：' + a);//可以輸出a=4} change();console.log('函數(shù)調(diào)用后var定義a為函數(shù)內(nèi)部修改值：' + a);//可以輸出a=4

var 聲明全局變量，換句話理解就是，聲明在for循環(huán)中的變量，跳出for循環(huán)同樣可以使用。

聲明在for循環(huán)內(nèi)部的sum，跳出for循環(huán)一樣可以使用，不會報錯正常彈出結(jié)果

for(var i=0;i<=1000;i++){ var sum=0; sum+=i; } alert(sum);

let

同一個變量，不可在聲明之前調(diào)用，必須先定義再使用，否則會報錯，循環(huán)體中可以用let

let是塊級作用域，函數(shù)內(nèi)部使用let定義后，對函數(shù)外部無影響。并且let不能定義同名變量，否則會報錯。

let c = 3;console.log('函數(shù)外let定義c：' + c);//輸出c=3function change(){let c = 6;console.log('函數(shù)內(nèi)let定義c：' + c);//輸出c=6} change();console.log('函數(shù)調(diào)用后let定義c不受函數(shù)內(nèi)部定義影響：' + c);//輸出c=3

注意：必須聲明'use strict';后才能使用let聲明變量否則瀏覽并不能顯示結(jié)果,

const

const：用于聲明常量，也具有塊級作用域 ，也可聲明塊級。const定義的變量不可以修改，而且必須初始化。

const b = 2;//正確// const b;//錯誤，必須初始化 console.log('函數(shù)外const定義b：' + b);//有輸出值// b = 5;// console.log('函數(shù)外修改const定義b：' + b);//無法輸出const PI=3.14;

它和let一樣，也不能重復(fù)定義同一個變量，const一旦定義，無法修改.

let和const屬于局部變量，不會出現(xiàn)變量提升的情況，全局定義的let和const變量，不屬于頂層變量，不屬于window的屬性

緩存位置

從緩存位置上來說分為四種，并且各自有優(yōu)先級，當依次查找緩存且都沒有命中的時候，才會去請求網(wǎng)絡(luò)：

• Service Worker

• Memory Cache

• Disk Cache

• Push Cache

• 網(wǎng)絡(luò)請求

網(wǎng)絡(luò)請求

Service Worker

Service Worker 的緩存與瀏覽器其他內(nèi)建的緩存機制不同，它可以讓我們自由控制緩存哪些文件、如何匹配緩存、如何讀取緩存，并且緩存是持續(xù)性的. 如果我們沒有在 Service Worker 命中緩存的話，會根據(jù)緩存查找優(yōu)先級去查找數(shù)據(jù)。但是不管我們是從 Memory Cache 中還是從網(wǎng)絡(luò)請求中獲取的數(shù)據(jù)，瀏覽器都會顯示我們是從 Service Worker 中獲取的內(nèi)容

Memory Cache(內(nèi)存中的緩存)

讀取內(nèi)存中的數(shù)據(jù)肯定比磁盤快。但是內(nèi)存緩存雖然讀取高效，可是緩存持續(xù)性很短，會隨著進程的釋放而釋放。

對于大文件來說，大概率是不存儲在內(nèi)存中的，反之優(yōu)先

當前系統(tǒng)內(nèi)存使用率高的話，文件優(yōu)先存儲進硬盤

Disk Cache（硬盤中的緩存）

讀取速度慢點，但是什么都能存儲到磁盤中，比之 Memory Cache 勝在容量和存儲時效性上。并且即使在跨站點的情況下，相同地址的資源一旦被硬盤緩存下來，就不會再次去請求數(shù)據(jù)。

Push Cache

Push Cache 是 HTTP/2 中的內(nèi)容，當以上三種緩存都沒有命中時，它才會被使用。并且緩存時間也很短暫，只在會話（Session）中存在，一旦會話結(jié)束就被釋放。

所有的資源都能被推送，但是 Edge 和 Safari 瀏覽器兼容性不怎么好

可以推送 no-cache 和 no-store 的資源

一旦連接被關(guān)閉，Push Cache 就被釋放

多個頁面可以使用相同的 HTTP/2 連接，也就是說能使用同樣的緩存

Push Cache 中的緩存只能被使用一次

瀏覽器可以拒絕接受已經(jīng)存在的資源推送

你可以給其他域名推送資源

緩存策略

查看之前寫的Node的Http相關(guān)文章

實際場景應(yīng)用緩存策略

頻繁變動的資源

對于頻繁變動的資源，首先需要使用 Cache-Control: no-cache 使瀏覽器每次都請求服務(wù)器，然后配合 ETag 或者 Last-Modified 來驗證資源是否有效。這樣的做法雖然不能節(jié)省請求數(shù)量，但是能顯著減少響應(yīng)數(shù)據(jù)大小。

代碼文件

這里特指除了 HTML 外的代碼文件，因為 HTML 文件一般不緩存或者緩存時間很短。一般來說，現(xiàn)在都會使用工具來打包代碼，那么我們就可以對文件名進行哈希處理，只有當代碼修改后才會生成新的文件名?；诖耍覀兙涂梢越o代碼文件設(shè)置緩存有效期一年 Cache-Control: max-age=31536000，這樣只有當 HTML 文件中引入的文件名發(fā)生了改變才會去下載最新的代碼文件，否則就一直使用緩存。