代码性能优化-----前端页面异步实现

对于页面数据较多,数据来源不一(接口、数据库),导致的页面加载缓慢,可以使用异步来实现页面的快速加载。

将页面每个数据源对应一个div,默认隐藏,当进入页面开始执行此div的数据获取,获取完成后给页面赋值,并显示此div

 

js代码,异步获取示例:

复制代码
        $(function () {
            //页面读取数据太多,采取异步读取的方式
            headPartDetail();//1
            recordInfoPartDetail();//2
            redbagRecordPartDetail();//3
            redbagReceiveRankDetail();//4
            RedBagMoneyRankDetail();//5
            RedBagTuHaoRankDetail();//6
        });


        function headPartDetail() {
            var url = "@(Config.HostUrl)redbaghall/GetRedBagHallBaseInfo";
            $.getJSON(url, function (data) {
                headPartDetailShow(data);
                $('.head').show();
                $(".hbInfo").show();
            });
        }

        function headPartDetailShow(data) {
            $("#TodayRecv").text(data.TodayRecv);
            $("#TotalRecv").text(data.TotalRecv);
            $("#TotalDspl").text(data.TotalDspl);
            $("#MaxRedBagMoney").text(data.MaxRedBagMoney);
            $("#RestRedBagMoneyDspl").text(data.RestRedBagMoneyDspl);
        }
复制代码

后端c#实现代码:

复制代码
        public ActionResult GetRedBagHallBaseInfo()
        {
            #region json返回定义
            var outModel = new HeadPartDetail();
            #endregion

            #region 获取返回数据
            //……
            #endregion

            return Json(outModel, JsonRequestBehavior.AllowGet);
        }    
复制代码

 

posted @   PanPan003  阅读(544)  评论(0编辑  收藏  举报
编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· 面试官:你是如何进行SQL调优的?
点击右上角即可分享
微信分享提示