javascript - 浏览器中的异步 XMLHttpRequest 阻塞 UI

Question

我在网络应用程序的客户端有以下功能:

function fetchDataFromApi(fetchCode, options, callback) {

    var dataObject = JSON;
    dataObject.fetchCode = fetchCode;
    dataObject.options = options;

    var xhr = new XMLHttpRequest();
    var url = "DATA_API_URL"; 

    // connect to the API
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type",
        "application/json"
    ); 

    // set callback for when API responds. This will be called once the request is answered by the API.
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // API has responded; 
            var json = {
                ok: false,
                message: 'could not parse response'
            };
            try {
                // parse the raw response into the API response object
                json = JSON.parse(xhr.responseText);
            } catch (err) {
                // probably json parse error; show raw response and error message
                console.log(err);
                console.log("raw response: " + xhr.responseText);
            } 

            if (json.ok) {
                // success, execute callback with argument json.data
                callback(json.data);
            } else {
                // fetch failed; 
                console.error(json.message);
            }
        }
    }; 

    // send request payload to API
    var data = JSON.stringify(dataObject);
    xhr.send(data);
}

由于我使用的是异步调用(xhr.open 中的第三个参数设置为true)，我惊讶地发现这个函数阻塞了 UI浏览器。当使用此功能从服务器获取大量数据时，可能需要 3-4 秒，从而阻止 UI 并在 Chrome 控制台中生成此错误:

[Violation] 'load' handler took 3340ms

这个函数是currently in production here ，我在这里调用函数:

function getNamesFromApi() {
    fetchDataFromApi('chj-confraternity-list', {}, function (data) {
        fadeReplace(document.getElementById('spinner-2'), document.getElementById(
                'name-list-container'),
            false, true);
        // transaction was successful; display names
        var listString = "";
        if (data.list) {
            // add the names to the page
            var listLength = data.list.length;
            for (var x = 0; x < listLength; x++) {
                document.getElementById('name-list-container').innerHTML +=
                    "<div class='name-list-item'>" +
                    "<span class='name-list-name'>" +
                    data.list[x].name +
                    "</span>" +
                    "<span class='name-list-location'>" +
                        data.list[x].location +
                    "</span>" +
                    "</div>";
            }
        }
    });
}

window.addEventListener('load', function() {
    getNamesFromApi();
});

为什么这会阻塞 UI，我在制作异步 XMLHttpRequest 时做错了什么？

更新:感谢为我指明正确方向的评论；问题不是 XMLHttpRequest，而是我在循环中附加 innerHTML。该问题现已解决，答案中包含更正的代码段。

Answer 1

UI 被阻塞是因为我在一个循环中附加了 innerHTML，这是一个代价高昂的 UI 阻塞操作。该问题现已解决。这是更正后的片段:

function getNamesFromApi() {
    fetchDataFromApi('chj-confraternity-list', {}, function (data) {
        fadeReplace(document.getElementById('spinner-2'), document.getElementById(
                'name-list-container'),
            false, true);
        // transaction was successful; display names
        if (data.list) {
            var listString = "";
            // add the names to the page
            var listLength = data.list.length;
            for (var x = 0; x < listLength; x++) {
                listString +=
                    "<div class='name-list-item'>" +
                    "<span class='name-list-name'>" +
                    data.list[x].name +
                    "</span>" +
                    "<span class='name-list-location'>" +
                        data.list[x].location +
                    "</span>" +
                    "</div>";
            }
            document.getElementById('name-list-container').innerHTML = listString;
        }
    });
}

window.addEventListener('load', function() {
    getNamesFromApi();
});