1:瀏覽器緩存和本地存儲的區別:
瀏覽器緩存:瀏覽器緩存是一種臨時性的數據存儲,用于提高網頁加載速度。緩存的數據存儲在內存或磁盤中,當用戶再次訪問相同的資源時,瀏覽器會優先從緩存中讀取數據,而不是從服務器重新請求。緩存的數據可以在瀏覽器關閉后自動清除,或者根據 HTTP 頭部信息設置的過期時間來清除。
本地存儲:本地存儲包括 localStorage 和 sessionStorage 兩種機制,是一種持久化的數據存儲。數據存儲在瀏覽器端,不會隨頁面刷新或瀏覽器關閉而消失。localStorage 中的數據會一直保留,直到手動清除或瀏覽器清除緩存。sessionStorage 中的數據會在瀏覽器關閉時自動清除。
2:事件的防抖和節流:
事件防抖(debounce):防抖是一種限制事件觸發頻率的技術,可以減少不必要的事件調用。在事件被觸發n毫秒后再執行回調,如果在這n毫秒內事件再次被觸發,則重新計時。適用于搜索輸入框、窗口大小調整等需要防止高頻觸發的場景。
實現方式:
function debounce(func, delay) {let timer;return function(...args) {clearTimeout(timer);timer = setTimeout(() => {func.apply(this, args);}, delay);};}
事件節流(throttle):
節流是一種限制事件觸發頻率的技術,可以減少事件處理函數的執行次數。
在規定時間內,事件處理函數只會執行一次。
適用于滾動條事件、鼠標移動事件等高頻觸發的場景。
實現方式: