javascript - 异步操作 DOM

Question

我正在尝试根据 API 响应的数据在 SVG 图像上绘制点，但是当必须绘制大量点时，应用程序会崩溃。如何异步完成 DOM 操作而不导致应用程序崩溃？这是执行的函数:

export const plotPoint = function (path) {
var ns = 'http://www.w3.org/2000/svg';
var x, y = 1;
path.map(function (value, index) {
    var coordinates = value.split(',');
    x = parseInt(coordinates[0], 10);
    y = parseInt(coordinates[1], 10);
    var startCircle = document.createElementNS(ns, 'circle');
    startCircle.setAttributeNS(null, 'cx', x);
    startCircle.setAttributeNS(null, 'cy', y);
    startCircle.setAttributeNS(null, 'r', 1);
    startCircle.setAttributeNS(null, 'fill', 'green');
    document.querySelector("#map").append(startCircle);
});
}

Answer 1

您不需要异步执行任何操作。只需避免修改 DOM，直到完成所有圆圈的制作，然后将它们一次性全部插入到 DOM 中:

export const plotPoint = function (path) {
var ns = 'http://www.w3.org/2000/svg';
var x, y = 1;
var docfrag = document.createDocumentFragment();
path.map(function (value, index) {
    var coordinates = value.split(',');
    x = parseInt(coordinates[0], 10);
    y = parseInt(coordinates[1], 10);
    var startCircle = document.createElementNS(ns, 'circle');
    startCircle.setAttributeNS(null, 'cx', x);
    startCircle.setAttributeNS(null, 'cy', y);
    startCircle.setAttributeNS(null, 'r', 1);
    startCircle.setAttributeNS(null, 'fill', 'green');
    docfrag.appendChild(startCircle);
});
document.querySelector("#map").appendChild(docfrag);
}