首先小學生在這裡祝大家元旦快樂！！！！！

懶加載使用場景

在一些圖片量比較大的場景（電商首頁，小程序首頁等），如果我們打開頁面時就加載所有的圖片，那勢必會導致頁面的卡頓以及白屏，給用戶不好的體驗，導致用戶流失。

但是我們仔細想一下，用戶真的需要我們顯示所有圖片一起展示嗎？其實並不是，用戶看到的只是瀏覽器可視區域的內容。所以從這個情況我們可以做一些優化，只顯示用戶可視區域內的圖片，當用戶觸發滾動的瞬間再去請求顯示給用戶。

懶加載的思路

img 標籤有自定義屬性 data-src
首屏展示可視區域內的圖片 src 值替換為 data-src
滾動出現在可視區域的圖片即時展示（重複第二步）

懶加載的實現

<code>


        
             

        

        
            
        

        
             

        

        
            
        

        
             

        

        
            
        

        
             

        

        
            
        

        
             

        



    

複製代碼/<code>

至此我們已經初步完成了我們的懶加載，但是我們大家都知道，scroll這個事件實在太容易被觸發了，用戶一滾動鼠標就會觸發很多次，如果一直滾勢必會導致重複觸發執行我們的事件，這也會導致我們的性能急劇下降，所以這就引出了我們的混合體 防抖節流 來優化我們的性能。

防抖 && 節流

防抖：在一定時間內，觸發多次事件，只認第一次觸發的，到了時間結束執行事件

<code> function throttle(fn, time) {
            let oldTime = 0,
                timer = null;
            return () => {
                const nowTime = new Date()
                if (nowTime - oldTime >= time) {
                   fn()
                   oldTime = nowTime
                }
            }
        }
複製代碼/<code>

節流

：在一定時間內，觸發多次事件，只認最後一次觸發的並且重置時間，到了時間結束執行事件

<code>function debounce(fn, time) {
            let timer = null
            return () => {
                if (timer) {
                    clearTimeout(timer)
                }
                timer = setTimeout(() => {
                    fn()
                }, time);
            }
        }
複製代碼/<code>

在這裡debounce有一個嚴重的問題就是如果用戶一直觸發事件，用戶會一直得不到響應，所以我們可以藉助防抖的思路來優化節流。

<code> function debounce(fn, time) {
            let oldTime = 0,
                timer = null;
            return () => {
                const nowTime = new Date()
                if (nowTime - oldTime < time) {
                    if (timer) {
                        clearTimeout(timer)
                    }
                    timer = setTimeout(() => {
                        oldTime = nowTime
                        fn()
                    }, time);
                } else {
                    // 用戶重複觸發，到達事件節點 還是會去執行事件 
                    oldTime = nowTime
                    fn()
                }
            }
        }
複製代碼/<code>