优化了色彩渲染功能答案

【问题标题】：Optimized the color render function优化了色彩渲染功能
【发布时间】：2018-10-23 23:19:23
【问题描述】：

我有一个大数据要处理。它们需要被分类为 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 生成新的数组，其中 item 具有相同的颜色，并渲染为 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

成功了，但是数据太大，渲染慢，当我触发该功能时，需要几秒钟才能反应... 如何优化这个函数来渲染颜色？

【问题讨论】：

我不确定，但也许某种可观察到的着色模式在第一次渲染之后会更有效..
dataArray 和colorArray 中的对象的结构是什么？你怎么称呼colorDistrict？
您多久更新一次地图颜色？是什么导致它重新渲染？
@PaulLeBeau 当用户点击它会重新渲染，实际上它是在同一个 SVG 地图中渲染不同的数据。

标签： javascript function svg optimization

【解决方案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 () {
         ...
     });
}

【讨论】：