通过 AJAX 调用提高网站性能

Question

我有一个应用程序，我通过 AJAX 调用从数据库中提取信息。 拉取的信息量大，500多条结果； 所以这会降低性能。 当您打开应用程序时，您必须等待 2 分钟并点击任何内容，直到它完成 AJAX 调用。

function redemptionRewards(locationID) {
    var date1 = dateStart
    var date2 = dateEnd

    let success = function (res) {
        let redemptionsCoinsRewards1 = res['redemptionsCoinsRewards1']

        for (i = 0; i < redemptionsCoinsRewards1.length; i++) {

            let type1 = redemptionsCoinsRewards1[i]['type']
            if (type1 != null) {
                let typeCapital1 = type1.charAt(0).toUpperCase() + type1.slice(1)

                let timeCR1 = redemptionsCoinsRewards1[i]['date']
                let locationCR1 = redemptionsCoinsRewards1[i]['location']
                let firstName1 = redemptionsCoinsRewards1[i]['name']
                let lastName1 = redemptionsCoinsRewards1[i]['lastname']


                $('#redeemptionsTable1 tbody').append(`             
              <tr class='redempTableRows'>
              <td class='redemption'>${typeCapital1} </td>
              <td class='redemption-location'>${locationCR1} </td>
              <td class='redemption-user'> ${firstName1} ${lastName1} </td>
        </tr>`)
            }
        }
    }

    $.ajax({
        type: 'POST',
        url: '/api/redemptionsCoinsRewards1',
        crossDomain: true,
        success: success,
        dataType: 'json',
        data: {
            locationID: locationID,
            date1: date1,
            date2: date2
        }
    });
}

有没有办法提高性能，也许只加载 50，然后如果他们向下滚动加载另一个 50。或者有人对如何改进这个有任何建议吗？

Answer 1

是的，您可以在向下滚动时使用延迟加载。

//makeAjaxcall in page load
$.ajax({url:"url",function(d){console.log(d)}})
$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
           //make another ajax call with next 50 items.
           // ajax call get data from server and append to the div
           $.ajax({url:"newurl",function(d){console.log(d)}})

    }
});