Блог

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

1. Заключается в удалении строки таблицы с помощью d3.js сценарий выглядит следующим образом

    const table_id = d3.select("#"   arcapi.chartId()   ' .dataTables_scrollBody table').attr('id') 
   var getRow = d3.selectAll("#"   arcapi.chartId()   " .dataTables_scrollBody tbody tr :nth-child("   (colIndex)   ")")
   
      getRow.filter(function(){
        const cf_percent = d3.select(this).text();
        const cf_regex = cf_percent.replace(/[`~%]/gi, '');
        if(parseInt(cf_percent) === 65){
           const index = d3.select(this).node().parentNode.rowIndex;
           document.getElementById(table_id).deleteRow(index)
        }
      })
     

2. Второй метод заключается в установке добавленного класса для отображения: нет скрыть / установить для отображения значение none в значение selected

    var getRow = d3.selectAll("#"   arcapi.chartId()   " .dataTables_scrollBody tbody tr :nth-child("   (colIndex)   ")")
      getRow.filter(function(){
        const cf_percent = d3.select(this).text();
        const cf_regex = cf_percent.replace(/[`~%]/gi, '');
        if(parseInt(cf_percent) === 0){
          d3.select(this).node().parentNode.attr('class','removerow')        
        }
      })
     

в данном примере, какой метод я должен использовать?

В общем, изменения в DOM (добавление / удаление элементов) обходятся дороже, чем скрытие элементов. Однако, если значения не будут часто меняться, в более чистом DOM было бы проще ориентироваться ( document.getElementById , d3.select ).

Я бы рекомендовал использовать подход CSS, но я бы очистил его следующим образом:

 d3.selectAll("#"   arcapi.chartId()   " .dataTables_scrollBody tbody tr")
  .classed('removerow', function() {
    const cf_percent = this.children[colIndex].innerText;
    const cf_regex = cf_percent.replace(/[`~%]/gi, '');
    return parseInt(cf_percent) === 0;
  });