Я попытался создать 10 линейных диаграмм, все из которых имели 3000 точек, 300 * 300 svg. Он разбил мой браузер, я проверил диспетчер задач, google renderer сошел с ума с использованием памяти 1.2G и загрузкой процессора на 100%.Как нарисовать графики, используя d3.js для большого набора данных?
Для таких вещей нет простого решения. Вы можете тщательно изучить свой код и сделать его максимально эффективным, но, несмотря ни на что, если ваш код должен выполнять сотни тысяч операций в одном «потоке», все будет зависеть.
Общее решение, чтобы избежать этого замораживания, состоит в том, чтобы разделить процесс рисования на более мелкие задачи, которые вы вызываете асинхронно (т. Е. Изнутри setTimeout). Таким образом, браузер не блокируется в течение продолжительных периодов времени, пока он запускает ваш JS-код, и, возможно (я не эксперт в этом), сборщик мусора имеет возможность очистить вещи на полпути.
В результате получается не более быстрое общее время рисования, а пользователю, который «чувствует» себя быстрее, потому что браузер не замерзает. И вы можете даже добавить индикатор прогресса.
Некоторые операции рисования не могут быть разбиты на подзадачи. Например, вы не можете разделить svg.line(), функцию d3, которая генерирует определения пути вашего графика. Тем не менее, вы можете разделить код чертежа 10 диаграмм, чтобы он рисовал по одной диаграмме за каждый тик setTimeout. Вы также можете разделить подготовку данных с фактическим рисунком.
Я написал ответ на другой сценарий, но аналогичная проблема здесь: CSS transitions blocked by JavaScript
Я пытался разбить процесс рисования, поэтому вместо того, чтобы рисовать все графики, я добавил одну складную меню и перемещается каждый график под одним , поэтому, когда пользователь нажимает на вкладку, график наносится на график, но проблема в том, что я открываю все вкладки один за другим, снова происходит то же самое, и мой браузер падает. – CoMpLeXiTy