px、em、rem 的區別 (1) 畫素。絕對單位，畫素 px 是相對於顯示器螢幕解析度而言的，是一個虛擬單位。是計算機系統 的數字化影象長度單位，如果 px 要換算成物理長度，需要指定精度 DPI。 (2) em 是相對長度單位，相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人 為設定，則相對瀏覽器的預設字型尺寸。它會繼承父級元素的字型大小，因此並不是一個固定 的值。 (3) rem 是 CSS3 新增的一個相對單位(root em,根 em),使用 rem 為元素設定字型大小事，仍然是 相對大小但相對的只是 HTML 根元素。 (4) 區別：IE 無法呼叫那些使用 px 作為單位的字型大小，而 em 和 rem 可以縮放，rem 相對的只 是 HTML 根元素。這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修 改根元素就成比例地調整所有字型大小，又可以避免字型大小逐層複合的連鎖反應。目前，除 了 IE8 及更早版本外，所有瀏覽器已支援 rem。

常用的：pxemremvhvwpt

rpxupx

函式防抖和節流

在前端開發的過程中，我們經常會需要繫結一些持續觸發的事件，如 resize、scroll、mousemove 等等，但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁地去執行函式。

通常這種情況下我們怎麼去解決的呢？一般來講，防抖和節流是比較好的解決方案。

讓我們先來看看在事件持續觸發的過程中頻繁執行函式是怎樣的一種情況。

html 檔案中程式碼如下

作者：淘淘笙悅
連結：https://www.jianshu.com/p/c8b86b09daf0
來源：簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。

<
 
div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div>
<script>
    let num = 1;
    let content = document.getElementById('content');

    function count() {
        content.innerHTML = num++;
    };
    content.onmousemove 
 
= count;
</script>

防抖（debounce）

所謂防抖，就是指觸發事件後在 n 秒內函式只能執行一次，如果在 n 秒內又觸發了事件，則會重新計算函式執行時間。

防抖函式分為非立即執行版和立即執行版。

非立即執行版：

非立即執行版的意思是觸發事件後函式不會立即執行，而是在 n 秒後執行，如果在 n 秒內又觸發了事件，則會重新計算函式執行時間。

我們依舊使用上述繫結 mousemove 事件的例子，通過上面的防抖函式，我們可以這麼使用

content.onmousemove = debounce(count,1000);

上述防抖函式的程式碼還需要注意的是 this 和 引數的傳遞

防抖函式的程式碼使用這兩行程式碼來獲取 this 和 引數，是為了讓 debounce 函式最終返回的函式 this 指向不變以及依舊能接受到 e 引數。

立即執行版：

在開發過程中，我們需要根據不同的場景來決定我們需要使用哪一個版本的防抖函式，一般來講上述的防抖函式都能滿足大部分的場景需求。但我們也可以將非立即執行版和立即執行版的防抖函式結合起來，實現最終的雙劍合璧版的防抖函式。

雙劍合璧版：

節流（throttle）

所謂節流，就是指連續觸發事件但是在 n 秒中只執行一次函式。節流會稀釋函式的執行頻率。

對於節流，一般有兩種方式可以實現，分別是時間戳版和定時器版。

時間戳版：

雙劍合璧版:

@desc 函式節流 @param func 函式 @param wait 延遲執行毫秒數 @param type 1 表時間戳版，2 表定時器版

/**
 * @desc 函式節流
 * @param func 函式
 * @param wait 延遲執行毫秒數
 * @param type 1 表時間戳版，2 表定時器版
 */
function throttle(func, wait ,type) {
    if(type===1){
        let previous = 0;
    }else if(type===2){
        let timeout;
    }
    return function() {
        let context = this;
        let args = arguments;
        if(type===1){
            let now = Date.now();

            if (now - previous > wait) {
                func.apply(context, args);
                previous = now;
            }
        }else if(type===2){
            if (!timeout) {
                timeout = setTimeout(() => {
                    timeout = null;
                    func.apply(context, args)
                }, wait)
            }
        }
    }
}