前端首頁加載的一些優化

年前網站的首頁要改版，不知怎么的這個艱巨的任務就到了我頭上，首頁作為網站的門面，感覺壓力很大，但是也是一次難得的鍛煉的機會，所以還有點兒興奮的就開始做了。

 

這次的改版跟京東淘寶的首頁很像，首屏是商品分類、輪播、滾動的促銷廠家信息和大家都在買、推薦商品以及公告這幾個模塊，剩下模塊的則分為不同的樓層展示，新首頁現在具體長這樣：我是新首頁

 

因為首頁有很多商品和廣告圖片，我開始的時候用了懶加載，當樓層滾動到可視區時對樓層圖片路徑進行替換，但是這樣仍然存在一些問題（如下），我們老大發話讓照着京東的效果做，我就在網上各種找資料，終於，在京東首頁的console里面找到了我想要的：https://aotu.io ，里面就有關於京東首頁最近這次改版的一篇技術文章，還有好多高大上的資料，有興趣的同學可以看一下。下面說說這次首頁加載遇到的幾個問題和解決方案。

 

1 優先加載

       問題：打開首頁，當用戶快速滾動到下面的樓層時，下面的樓層要等到上面的幾個樓層的圖片都加載完了才開始加載，這樣下面的樓層圖片等待加載的時候就會很長，用戶會覺得頁面很卡。

  解決方案：對滾動事件進行優化，也就是傳說中的函數節流（這個會再新開一篇詳細總結），使用setTimeout控制滾動時函數執行的頻率，我的間隔時間是300ms，當用戶快速滾動時因為還沒超過300ms，所以快速滾動經過的樓層的加載函數不會執行，實現了優先加載的效果。

       代碼：

function priorLoad() {
    var floors = $(".lazyLoad");
    if (!floors) {
        return;
    }

    loadFlag = false;

    var clientH = document.documentElement.clientHeight;  //可視區高度
    timer = setTimeout(function () {
        var scrollT = document.documentElement.scrollTop || document.body.scrollTop;  //滾動高度
        for (var i = 0; i < floors.length; i++) {
            //判斷每個樓層是否已經加載過
            if (floors[i].getAttribute("loaded") != "1") {
                var t = getTop(floors[i]);
                if ((scrollT - floors[i].offsetHeight) <= t && t <= (scrollT + clientH)) {  //如果滾動的高度加屏幕高度大於樓層距離頂部的高度，說明樓層顯示在屏幕中
                    var imgs = $(floors[i]).find(".visible-img");
                    var count = 0;
                    for (var k = 0; k < imgs.length; k++) {
                        //對未加載過且需要懶加載且是顯示的圖片進行加載
                        if (imgs[k].getAttribute("loaded") != 1) {
                            imgs[k].src = imgs[k].getAttribute("_src");
                            imgs[k].setAttribute("loaded", 1); //加載后改變加載標示
                            imgs[k].onload = function () {
                                count++;
                                if (count == imgs.length) {
　　　　　　　　　　　　　　　　　　　　　floors[i].setAttribute("loaded","1");
　　　　　　　　　　　　　　　　　　　　　$(floors[i]).removeClass("lazyLoad");
                                    loadFlag = true;
                                    autoLoad();
                                }
                            }
                        }
                    }
                }
            }
        }
    }, 300);
}

 

 

2 首屏直出

　　 問題：首屏輪播圖片的位置會閃一下空白然后才開始加載圖片，這個是因為首頁的數據都是js異步請求的，在發送請求並且返回數據的時間里輪播那里就會出現空白。

 解決方案：京東采用的方式是首屏數據由服務器直接輸出，包括輪播圖的第一幀，但是我們的網站因為有些信息是根據地區掛鈎的，實現有些難度，所以這個方案沒有采用

 

3 空閑加載

       問題：因為是懶加載，只有樓層出現在可視區的時候才開始加載，當用戶打開首頁沒有向下滾動的時候，下面的樓層一直顯示的是正在加載的圖片。

 解決方案：為了保證首屏的加載速度，當首屏數據加載完成之后，自動對下面的樓層按序加載，這樣等用戶向下滾動的時候下面的樓層已經加載一部分甚至加載完了，提高用戶體驗。

      代碼：

function autoLoad() {
    var floors = $(".lazyLoad");
    if (floors.length == 0) {
        return; //所有樓層都加載完了
    }

    var obj = floors[0];
    if (loadFlag) {
        if (obj.getAttribute("loaded") != "1") {
            loadFlag = false;
            var imgCount = 0;
            var imgs = $(obj).find(".visible-img");
            for (var k = 0; k < imgs.length; k++) {
                //對未加載過且需要懶加載且是顯示的圖片進行加載
                if (imgs[k].getAttribute("loaded") != 1) {
                    imgs[k].src = imgs[k].getAttribute("_src");
                    imgs[k].setAttribute("loaded", 1); //加載后改變加載標示
                    imgs[k].onload = function () {
                        imgCount++;
                        if (imgCount == imgs.length) {  //該樓層的數據已經加載完
                            obj.setAttribute("loaded", "1");
                            $(obj).removeClass("lazyLoad");
                            loadFlag = true;
                            autoLoad(); //遞歸加載下一個樓層
                        }
                    }
                }
            }
        }
    }
}

 

 

4 顯示的數據先加載

       問題：樓層的二級分類都是以選項卡的形式展示的，所以除了顯示的分類其他的分類數據都是隱藏的，這些隱藏的數據加載會影響整個樓層的加載速度。

 解決方案：在樓層加載的函數里加條件判斷，只對未加載過的並且是顯示中的圖片進行加載，過濾掉隱藏的圖片，提高加載速度。

      代碼：

function displayLoad() {
    var floors = $(".floor"); //所有樓層下的第一個展示的分類
    for (var i = 0; i < floors.length; i++) {
        var t = getTop(floors[i]); //每個樓層的top值
        var imgs = floors[i].getElementsByTagName("img");
        for (var k = 0; k < imgs.length; k++) {
            if (imgs[k].getAttribute("_src") && imgs[k].getAttribute("loaded") != 1 && $(imgs[k]).is(':visible')) {
                imgs[k].src = imgs[k].getAttribute("_src");
                imgs[k].setAttribute("loaded", 1);
            }
        }
    }
}

 

 

5 使用webp格式圖片，這種圖片只有jpg格式圖片的3/2，但是只兼容weikit內核的瀏覽器，這版本首頁還沒用，但是是一種優化的方式。