Question

我正在尝试从API响应中的数据绘制SVG图像上的点，但是当必须绘制大量点时，应用程序崩溃。如何在不崩溃应用程序的情况下异步完成DOM操作？这是执行的功能：

undefined

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

1 个答案: