如何优化Add to Cart弹窗显示速度？排查脚本延迟原因

你的弹窗延迟完全是脚本内的同步AJAX请求导致的，和动画设置、外部因素无关，核心问题出在这行代码：

xhttp.open("POST", skuUrl, false);

为什么会延迟？ #

第三个参数false代表这是同步请求，浏览器在这个请求完成前会阻塞所有UI操作——包括弹窗的显示动画。如果加购接口响应慢（2-6秒），弹窗就必须等请求结束才会开始渲染，这就是你看到的延迟。

弹窗的动画本身是1秒渐显，这个是正常的，不是延迟的原因。

优化步骤 #

1. 把同步请求改成异步请求
   同步请求是绝对的性能杀手，改成异步后，UI线程不会被阻塞，弹窗可以立刻显示，同时后台完成加购操作。

2. 调整逻辑顺序（可选）
   可以先显示弹窗，再处理加购请求；或者等请求完成后，根据结果更新弹窗内容（比如加购失败就显示错误提示）。

3. 简化代码（可选）
   用jQuery的$.post代替原生XHR，代码更简洁易维护。

修改后的示例代码 #

window.addEventListener('load', function (event) {
    $(window).scroll(function(){
        var numPix = 200;
        var op = (($(document).height() - $(window).height()) - $(window).scrollTop()) / numPix;
        if( op <= 0 ){
            $("#sticky").hide();
        } else {
            $("#sticky").show();
        }
        $("#sticky").css("opacity", op ); 
    });

    $(".addToCart").removeClass("addToCartHide");
    $('.addToCart').click(function(){
        var skuUrl = "/transaction/addtocartbysku?sku=" + $(this).attr("data-id") + "&quantity=1";
        
        // 1. 先立刻显示弹窗
        $("#snackbar").animate( {"opacity": "1"}, 1000, "swing" );
        setTimeout(function() {
            $("#snackbar").animate( {"opacity": "0"}, 1000, "swing" );
        }, 3000);

        // 2. 异步发送加购请求，不阻塞UI
        $.post(skuUrl)
            .done(function(response) {
                // 可选：加购成功后的额外处理，比如更新购物车数量
                console.log("加购成功");
            })
            .fail(function() {
                // 可选：加购失败时修改弹窗内容
                $("#snackbar").text("加购失败，请重试");
            });

        // 如果你偏好原生XHR，改成这样：
        // var xhttp = new XMLHttpRequest();
        // xhttp.open("POST", skuUrl, true); // 第三个参数改为true（异步）
        // xhttp.onload = function() {
        //     if (xhttp.status >= 200 && xhttp.status < 300) {
        //         console.log("加购成功");
        //     } else {
        //         $("#snackbar").text("加购失败，请重试");
        //     }
        // };
        // xhttp.send();
    });
});

额外小优化 #

scroll事件会频繁触发，你可以给它加个节流函数，避免频繁操作DOM影响页面性能（不过这个和弹窗延迟无关）。

内容的提问来源于stack exchange，提问作者Megan Kuhn