异步操作 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);
}

异步操作 DOM

Manipulate DOM asyncronously

javascript

dom

dom-manipulation