前端筆記（201906-201907）

1，瀏覽器存儲

參考：https://blog.fundebug.com/2019/04/08/about-browser-storage/

Cookie的缺陷

• Cookie 不夠大

Cookie的大小限制在4KB左右，對於複雜的存儲需求來講是不夠用的。當 Cookie 超過 4KB 時，它將面臨被裁切的命運。這樣看來，Cookie 只能用來存取少許的信息。此外不少瀏覽器對一個站點的cookie個數也是有限制的。

• 過多的 Cookie 會帶來巨大的性能浪費

　　Cookie 是緊跟域名的。同一個域名下的全部請求，都會攜帶 Cookie。你們試想，若是咱們此刻僅僅是請求一張圖片或者一個 CSS 文件，咱們也要攜帶一個 Cookie 跑來跑去（關鍵是 Cookie 裏存儲的信息並不須要），這是一件多麼勞民傷財的事情。Cookie 雖然小，請求卻能夠有不少，隨着請求的疊加，這樣的沒必要要的 Cookie 帶來的開銷將是沒法想象的。

　　cookie是用來維護用戶信息的，而域名(domain)下全部請求都會攜帶cookie，但對於靜態文件的請求，攜帶cookie信息根本沒有用，此時能夠經過cdn（存儲靜態文件的）的域名和主站的域名分開來解決。

• 因爲在HTTP請求中的Cookie是明文傳遞的，因此安全性成問題，除非用HTTPS。

爲了彌補 Cookie 的侷限性，讓「專業的人作專業的事情」，Web Storage 出現了。HTML5中新增了本地存儲的解決方案—-Web Storage，它分紅兩類：sessionStorage和localStorage。這樣有了WebStorage後，cookie能只作它應該作的事情了——做爲客戶端與服務器交互的通道，保持客戶端狀態。

LocalStorage

　　LocalStorage在存儲方面沒有什麼特別的限制，理論上 Cookie 沒法勝任的、能夠用簡單的鍵值對來存取的數據存儲任務，均可以交給 LocalStorage 來作。這裏給你們舉個例子，考慮到 LocalStorage 的特色之一是持久，有時咱們更傾向於用它來存儲一些內容穩定的資源。好比圖片內容豐富的電商網站會用它來存儲 Base64 格式的圖片字符串。

sessionStorage

　　sessionStorage保存的數據用於瀏覽器的一次會話，當會話結束（一般是該窗口關閉），數據被清空；sessionStorage 特別的一點在於，即使是相同域名下的兩個頁面，只要它們不在同一個瀏覽器窗口中打開，那麼它們的 sessionStorage 內容便沒法共享；localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。除了保存期限的長短不一樣，SessionStorage的屬性和方法與LocalStorage徹底同樣。

 　　sessionStorage 更適合用來存儲生命週期和它同步的會話級別的信息。這些信息只適用於當前會話，當你開啓新的會話時，它也須要相應的更新或釋放。好比微博的 sessionStorage就主要是存儲你本次會話的瀏覽足跡。

sessionStorage 、localStorage 和 cookie

• 共同點：都是保存在瀏覽器端，且都遵循同源策略。
• 不一樣點：在於生命週期與做用域的不一樣

做用域：localStorage只要在相同的協議、相同的主機名、相同的端口下，就能讀取/修改到同一份localStorage數據。sessionStorage比localStorage更嚴苛一點，除了協議、主機名、端口外，還要求在同一窗口（也就是瀏覽器的標籤頁）下。

生命週期：localStorage 是持久化的本地存儲，存儲在其中的數據是永遠不會過時的，使其消失的惟一辦法是手動刪除；而 sessionStorage 是臨時性的本地存儲，它是會話級別的存儲，當會話結束（頁面被關閉）時，存儲內容也隨之被釋放。

Web Storage 是一個從定義到使用都很是簡單的東西。它使用鍵值對的形式進行存儲，這種模式有點相似於對象，卻甚至連對象都不是——它只能存儲字符串，要想獲得對象，咱們還須要先對字符串進行一輪解析。

總結

• Cookie 的本職工做並不是本地存儲，而是「維持狀態」
• Web Storage 是 HTML5 專門爲瀏覽器存儲而提供的數據存儲機制，不與服務端發生通訊
• IndexedDB 用於客戶端存儲大量結構化數據

 二、ES7的async-await

參考：https://segmentfault.com/a/1190000011526612?utm_source=tag-newest

async function basicDemo() {
    let result = await Math.random();
}
basicDemo();

async用來表示函數是異步的，定義的函數會返回一個promise對象。await 能夠理解爲是 async wait 的簡寫，await 必須出如今 async 函數內部，不能單獨使用。

await 後面能夠跟任何的JS 表達式。雖說 await 能夠等不少類型的東西，可是它最主要的意圖是用來等待 Promise 對象的狀態被 resolved。若是await的是 promise對象會形成異步函數中止執行而且等待 promise 的解決,若是等的是正常的表達式則當即執行。

舉例說明：你有三個請求須要發生，第三個請求是依賴於第二個請求的解構第二個請求依賴於第一個請求的結果。若用 ES5實現會有3層的回調，若用Promise 實現至少須要3個then。一個是代碼橫向發展，另外一個是縱向發展。

// 使用 setTimeout 來模擬異步請求
function sleep(second, param) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(param);
        }, second);
    })
}

async function test() {
    let result1 = await sleep(2000, 'req01');  let result2 = await sleep(1000, 'req02' + result1);  let result3 = await sleep(500, 'req03' + result2);
    console.log(`
        ${result3}
        ${result2}
        ${result1}
    `);
}

test();

 

前端開發踩坑

一、video視頻自動播放

參考：https://blog.csdn.net/taiyangmiaomiao/article/details/80266625

 <video class="top-video" muted src="/resource/2019/gameup_1907/images/top-kv.mp4" width="100%" autoplay loop></video>

video下載入mp4格式視頻，並設置自動播放屬性autoplay，可是使用Chrome預覽時，視屏畫面已加載出來，可是沒法自動播放，F5刷新後能夠自動播放。

解決方案：對video標籤添加muted屬性（muted 屬性屬於邏輯屬性，當設置該屬性後，它規定視頻的音頻輸出應該被靜音）。這樣，在Chrome瀏覽器上，每一次打開網頁，視頻也能夠自動播放了。

 

二、鼠標滾輪事件

1）jquery.mousewheel.js 是一個用於添加跨瀏覽器的鼠標滾輪支持的 jQuery 插件。使用該插件，只需將 mousewheel 事件綁定到一個元素上便可。

// 整個窗口進行滾輪事件監聽
$(window).mousewheel(function(e, delta) {
    if (delta == -1) { // 鼠標滾輪向下滾動
        // ...
        $('html').stop(); // 中止正在運行的動畫
        // ...
        $('html').animate({
            'scrollTop': 0
        }, 350, function() {
            // 動畫完成以後要執行的函數
        });
    } else { // 鼠標滾輪向上滾動
    }
});

事件對象中能夠獲取以下三個屬性值：

• deltaX：值爲負的（-1），則表示滾輪向左滾動。值爲正的（1），則表示滾輪向右滾動。
• deltaY：值爲負的（-1），則表示滾輪向下滾動。值爲正的（1），則表示滾輪向上滾動。
• deltaFactor：增量因子。

阻止瀏覽器默認滾動，自定義滾動

$(window).mousewheel(function(e, delta) {
    e.preventDefault();
});

部分瀏覽器會報錯Unable to preventDefault inside passive event listener due to target being treated as passive。

問題及解決方案

經過addEventListener給元素綁定mousewheel鼠標滾輪事件，設置passive參數爲false，就能經過event.preventDefault()來阻止瀏覽器默認滾動。

window.addEventListener('mousewheel', function(e) {
    if (e.wheelDelta < 0) { // 鼠標滾輪向下滾動
        // wheelDelta兼容ie
        e.preventDefault();
    } else {
    }
}, { passive: false });