网页打开几分钟后变慢并刷新排序

Posted 2023-04-09

【中文标题】网页打开几分钟后变慢并刷新排序

【英文标题】：Web Page goes Slow After being open for few Minutes and is sorted with a refresh

【发布时间】：2021-11-03 15:04:15

【问题描述】：

我目前正在从事一个内置于 ASP.Net MVC 中的项目，该项目将在屏幕上显示数据，并且每次单击其中一个标签时，它都会改变颜色。该项目旨在同时在多个屏幕上显示，并且两个屏幕都可以使用它。问题是，在运行几分钟后，其中一个屏幕将开始变得异常缓慢，并且在硬刷新后它会恢复正常但不会持续很长时间。我曾尝试同时使用对数据库和实体框架模型的直接调用，但到目前为止还没有运气...... Chrome 的开发控制台显示了这一点，我不知道这是否有帮助...

        function refreshCheckTimers() 
            $(".check-timer").each(function () 

                //Longest timer overall
                var dish_id = $(this).attr("data-longestDish");

                var mainbody = $(this).closest(".check-footer").siblings(".check-mainbody");
                var prepTime = parseInt($(mainbody).find("[data-uniqueID=" + dish_id + "]").attr("data-prepTime")); //in seconds
                var dish_status = parseInt($(mainbody).find("[data-uniqueID=" + dish_id + "]").attr("data-status"));
                var activeCourse = $(mainbody).find("[data-uniqueID=" + dish_id + "]").attr("data-course");
                if (activeCourse == "mains" || activeCourse == "sides") 
                    activeCourse = "MCSI";
                

                var anyDishCooking = false;
                if (activeCourse == "starters") 
                    anyDishCooking = $(mainbody).find(".dish-details:not(.summary)[data-course=starters][data-status=" + CheckStatus.get("COOKING") + "]").length;
                 else if (activeCourse == "MCSI") 
                    anyDishCooking = $(mainbody).find(".dish-details:not(.summary, [data-course=starters], [data-course=pastry])[data-status=" + CheckStatus.get("COOKING") + "]").length;
                 else if (activeCourse == "pastry") 
                    anyDishCooking = $(mainbody).find(".dish-details:not(.summary)[data-course=pastry][data-status=" + CheckStatus.get("COOKING") + "]").length;
                


                var cookingStartTimeString = $(mainbody).find("[data-uniqueID=" + dish_id + "]").attr("data-cookingStartTime");
                var cookingStartTime = new Date(cookingStartTimeString);
                var endTime = new Date(cookingStartTime.getTime());
                endTime = new Date(endTime.getTime() + 1000 * prepTime);
                var currentTime = new Date();

                var diff = endTime.getTime() - currentTime.getTime();

        function DisplayCheck() 
           
            var TableNumber = $(".table-entry").val();
            var checkDate = new Date().toISOString();
            
            $.ajax(
                type: "POST",
                cache: false,
                url: '@Url.Action("DisplayCheckForTable", "KitchenScreens")',
                contentType: "application/json;",
                data: JSON.stringify( TableNumber: TableNumber ),
                success: function (result) 
                    for (const c in result.lstChecks) 
                        placeCheck(result.lstChecks[c]);
                    

                    
                ,
                complete: function () 
                    setTimeout(DisplayCheck, 1000);
                ,
                error: function (xhr, status, error) 
                    console.warn(xhr.responseText);
                
            );
        

地点检查

        // Contains all operations performed on check for display
        function placeCheck(check) 

            var checkElement = jQuery.parsehtml(check);
            
            checkElement = styleCheck(checkElement);    //give check appropriate borders and dish colors

            var currCheckID = $(check).attr("id");

            var checkContent = $(checkElement[1]).html();

            //also need to update expanded if its open
            var modalOpen = $("body [data-check-id='" + currCheckID + "']").length;
            
            populateExpandedCheck(checkContent, currCheckID);    //refresh expanded check
            // Set scroll position of check mainbody for expanded check
            var expandedScrollPos = $("body [data-check-id='" + currCheckID + "']").attr("scrollPos");
            expandedScrollPos = (typeof expandedScrollPos === 'undefined') ? 0 : expandedScrollPos;
            $("body [data-check-id='" + currCheckID + "']").find(".check-mainbody").scrollTop(expandedScrollPos);
            

            
        

提前谢谢你 编码愉快！

【问题讨论】：

@Diogo 可以分享一下视图的代码吗？同样是使用ASP.Net 或ASP.Net MVC 构建的站点。您的标签和问题没有对齐。

感谢您的回复。它是 ASP.NET MVC。我将编辑帖子并为其添加代码sn-p

@Rahatur 够了吗。感谢您的帮助！

什么是placeCheck，它有什么作用？另外，您何时调用 DisplayCheck 和 refreshCheckTimers 函数？

可以把 PlaceCheck 方法的内容贴出来吗？

【参考方案1】：

我建议如下：

在您的 ajax 调用中使用同步。设置async: false 属性。 在 ajax 完成事件上增加延迟以再次调用 DisplayCheck。我不确定 1 秒是否足以从服务器获取数据并在下一次触发发生之前对其进行处理。在您的本地机器上但在生产服务器上可能感觉不到差异。设置为 2000 毫秒？ 从示例代码中仍不清楚在何时何地调用refreshCheckTimers，但尝试限制对refreshCheckTimers 函数的调用。 建议不要在每次有新数据时都解析页面 html，而是维护一个 javascript 对象列表，您可以从中刷新 UI。即更新 ajax 调用中的数据，然后从列表中渲染 UI，忽略之前渲染的内容。

【讨论】：

确实有帮助，但是状态改变仍然需要大约 3 秒

@DiogoSilva 你说的3 seconds for the state to change是什么意思？

抱歉，可能是我没有解释清楚，这是一个将餐厅订单显示到厨房屏幕上的项目。厨师将能够点击订单中的每一个项目，当他点击一个项目时，它应该改变它的状态。我遇到的问题是，如果单击一个项目，更新其状态大约需要 3 秒。