Оптимизирована функция цветопередачи

Question

У меня есть большие данные для обработки.Они должны быть классифицированы на 4 цвета и отрисованы в SVG.

Моя функция: (параметр ABC используется, чтобы что-то сделать ....)

function mapRender(dataArray,A,B,color1,color2,color3,color4,C){

  //......do somthing.......

  var colorPlusAry = $.grep(dataArray, function(item,key){
      var vote_percentage = parseInt(item.vote_percentage);
      var result = vote_percentage>=0 && vote_percentage <50;
      return result;
   });

  //......do somthing.......
}

Я использую grepдля генерации нового массива, элемент которого имеет тот же цвет, и рендеринга в SVG.

function colorDistrict(colorArray,color){
         var village = '';
         var fillColor = 'fill:'+color;
         for(var item in colorArray) {
             village = colorArray[item].village;
             $('svg').find('path').each(function(){
                var id = $(this).attr('id');
                if(village) {
                   if(id.substring(6) === village){
                      $(this).attr('style',fillColor);
                   }
                }
            });
         }
}
colorDistrict(colorPlusAry,color1);  //Render 4 array

Он работает успешно, но данные слишком велики и делают рендеринг медленным, когда я запускаю функцию, требуется несколькосекунды, чтобы среагировать ... Как я могу оптимизировать эту функцию для рендеринга цвета?

Answer 1

Оптимизация - это сложный бизнес без реальных данных и без знания точной структуры DOM.Я могу лишь дать некоторые подсказки из того, что вижу:

Дорогостоящий процесс взаимодействует с DOM.Глядя на функцию colorDistrict(), два цикла кажутся независимыми.Тогда имеет смысл запускать цикл .each() только один раз и цикл над colorArray как вложенный.Последний содержит только предварительно вычисленные значения и должен работать намного быстрее.

Глядя на то, что на самом деле делают эти циклы, вы можете написать их гораздо более семантическими.Вы сравниваете коллекцию всех путей и colorArray для пересечения, а затем назначаете стиль для отфильтрованного списка путей.

function colorDistrict (colorArray, color){
     var fillColor = 'fill:' + color;

     // filter the paths to find those mentioned in colorArray
     var relevantPaths = $('svg').find('path').filter(function () {
         var village = $(this).attr('id').substring(6);

         // boolean to indicate the village is part of the colorArray
         var included = colorArray.some(function (item) {
             return item.village === village;
         });

         return included;
    });

    relevantPaths.attr('style', fillColor);
}

Если я правильно понимаю, что вы делаете, функция colorDistrict()выполняется несколько раз, по одному разу для каждого назначенного вами цвета.Меняются ли элементы <path> при рендеринге разных цветов?Если нет, вы должны выполнить $('svg').find('path') только один раз и кэшировать найденные пути для повторного использования внутри этой функции.

var paths = $('svg').find('path');

function colorDistrict (colorArray, color){
     var fillColor = 'fill:' + color;

     var relevantPaths = paths.filter(function () {
         ...
     });
}