设置async:true的异步AJAX仍冻结浏览器，无法跳转页面求助

你的异步AJAX请求设置了async:true却仍阻塞页面跳转，大概率是以下几个原因导致，对应解决方案如下：

1. 主动中止未完成的AJAX请求 #

浏览器在页面跳转时，可能会默认等待未完成的AJAX请求结束才触发跳转。你可以监听页面卸载事件，主动中止未完成的请求：

修改代码如下：

let ajaxRequest; // 保存AJAX请求实例

$(document).ready(function() {
    getRecordCount();
});

function getRecordCount(){ 
     ajaxRequest = $.ajax({
        type: 'POST',
        url: FULL_PATH + "/my-url/get-data",
        dataType: "json",
        async : true,
        beforeSend: function () {
            //loading_btn.start();                                          
        },
        complete: function () {
            //loading_btn.stop();                    
        },
        success: function (response) {
            if (response.success) {
                $('#my-count').text("Rec ("+response.count+")");                    
            } else {                    
                console.log("Error while fetching rec count");
            }                
        },
        error: function() {
            console.log("Request aborted or failed");
        }
    });
}

// 监听页面跳转，中止未完成的请求
window.addEventListener('beforeunload', function() {
    if (ajaxRequest && ajaxRequest.readyState !== 4) {
        ajaxRequest.abort();
    }
});

2. 检查加载动画的阻塞代码 #

如果你的loading_btn.start()和loading_btn.stop()包含大量同步DOM操作、循环计算等逻辑，会直接阻塞浏览器主线程导致页面冻结。可以：

• 简化加载动画逻辑，移除不必要的同步耗时操作
• 将动画操作放入requestAnimationFrame中执行，避免阻塞主线程：

beforeSend: function () {
    requestAnimationFrame(() => {
        loading_btn.start();
    });                                          
}

3. 排查服务器端响应问题 #

如果服务器端接口响应过慢，或返回的数据量过大，客户端解析JSON时会占用主线程导致冻结。可以：

• 让服务器端仅返回需要的count数值，避免返回冗余数据
• 优化服务器端接口的查询逻辑，缩短响应耗时

内容的提问来源于stack exchange，提问作者Sarmistha Sahoo