关于前端页面要展示大量头像列表信息优化小技巧

最新推荐文章于 2025-05-21 13:56:00 发布

芬梧书生

最新推荐文章于 2025-05-21 13:56:00 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发

本文链接：https://blog.youkuaiyun.com/qq_42693512/article/details/81181783

前端开发专栏收录该内容

17 篇文章

订阅专栏

项目中遇到接口请求因包含头像信息导致加载慢的问题，通过分离数据请求和头像请求，先加载列表数据，再单独请求头像，显著提升了页面加载速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近的一个项目中遇到一个接口在请求的时候要6S 左右，显然这是需要调整的，后来找到问题就是由于这个接口查询了头像图片。后来不带头像请求的时候速度快了好多。

分享一个自己优化小技巧：

先把整个列表页面请求数据渲染，再进行单独的头像请求，这样快了好多。

代码结构如下：

function getList() {
    $.get(url,param,function(data){
        doList(data)
    })
}
function doList(data){
    var str = ''
    $.each(data,function (k, v) {
            var senderid = v.senderid,
                appstarsender = v.appstarsender,
                // sendername = (v.sendername).slice(0,5) ,
                sendername = '',
                userimg = '',
                xing = v.xing,
                index = (k+1)+(page-1)*20,
                cost = parseInt(v.starincome/100);


            $.get('/kugou/public/mobile/sender/starsender',{senderid:senderid,registerid:registerid,token:token},function (data){


                $.each(data,function (k, v) {
                    var sendername = v.sendername //().slice(0,5)
                    var userimg = v.userlog
                    var  senderid2 = v.senderid;
                    var imgclass = ".sender-img-"+senderid2
                    var nameclass = ".sendernamelen-"+senderid2
                    var imgid = $(imgclass).data('name')
                    var nameid =$(nameclass).data('name')
                    /*if(sendername.length< 5){
                        sendername= sendername;
                    }else{
                        sendername =  sendername +'...';
                    }*/

                    if(imgid == senderid2){
                        $(imgclass).attr('src',userimg)

                    }
                    if(nameid == senderid2){
                        $(nameclass).text(sendername).css({"margin-left":'5px'})

                    }

                })
            })
    $(".data-list").append(str);
}