浏览器中的异步XMLHttpRequest阻塞UI

Question

在web应用程序的客户端，我有以下功能：

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

此函数为目前正在这里生产，其中我按如下方式调用该函数：

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();
});