Question

我有大量数据要处理。它们需要分为4种颜色，并渲染为SVG。

我的功能是：（参数A B C用于执行某些操作...。）

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 () {
         ...
     });
}

优化了色彩渲染功能

1 个答案: