如何提升Angular中Vis Timeline的模板编译速度？

我一直在使用Vis.js Timeline展示数据，自己写了一个Angular指令，通过$compile从API获取数据并创建模板：

<vis-timeline timeline-data="apiData"></vis-timeline>

在指令的linkFn里，我遍历数据为模板创建作用域，再把编译后的模板作为内容传入Vis的DataSet：

link: function(scope,element,attr){
  if(scope.roster.timelineData){
    angular.forEach(scope.roster.timelineData, function(){
      //为vis DataSet所用的指令创建作用域
      var templateScope = scope.$new(true);//创建隔离作用域
      templateScope.name = 'templateData'; //每次迭代可不同
      var template = $compile('<timeline-item template-data="name"></timeline-item>')(templateScope)[0];
    });
  }
}

这个方法能正常工作，但构建时间线要花约10秒，编辑后也要等10秒才生效。如果用纯模板添加速度就很快，请问怎么提升模板编译速度？

嘿，针对你遇到的这个性能问题，我有几个实战性的优化方向，你可以逐一尝试：

1. 预编译模板，避免重复编译 #

你现在最大的性能消耗点就是每次遍历都重新编译<timeline-item>模板。可以提前把模板编译一次，之后循环里直接复用这个编译好的函数：

// 在指令的compile阶段或者link函数外部提前编译模板
var preCompiledTimelineItem = $compile('<timeline-item template-data="name"></timeline-item>');

link: function(scope,element,attr){
  if(scope.roster.timelineData){
    angular.forEach(scope.roster.timelineData, function(item){
      var templateScope = scope.$new(true);
      templateScope.name = item.name; // 替换为实际数据字段
      // 直接复用预编译好的函数，不用每次重新编译
      var template = preCompiledTimelineItem(templateScope)[0];
      // 后续推入DataSet的逻辑
    });
  }
}

这一步能砍掉大部分编译开销，是最立竿见影的优化。

2. 优化作用域创建 #

如果你的<timeline-item>指令不需要完全隔离的作用域，可以考虑：

• 用scope.$new()替代scope.$new(true)（创建普通子作用域，而非隔离作用域），减少作用域初始化的开销；
• 甚至可以在父作用域上临时挂载数据，用完后清理，完全避免创建新作用域（前提是不会污染父作用域的数据）。

3. 批量处理DOM更新 #

每次编译完就把元素推入DataSet，会导致Vis.js频繁触发DOM重排重绘。建议先把所有编译好的元素收集到数组里，一次性批量添加到DataSet：

link: function(scope,element,attr){
  if(scope.roster.timelineData){
    var timelineElements = [];
    angular.forEach(scope.roster.timelineData, function(item){
      var templateScope = scope.$new(true);
      templateScope.name = item.name;
      var template = preCompiledTimelineItem(templateScope)[0];
      timelineElements.push(template);
    });
    // 一次性批量添加，减少Vis.js的DOM更新次数
    yourVisDataSet.add(timelineElements);
  }
}

这样能大幅减少Vis.js的渲染次数，提升整体速度。

4. 绕开Angular编译，直接用原生HTML模板 #

如果你的<timeline-item>只是静态展示内容，不需要Angular的双向绑定、指令特性，可以直接生成HTML字符串传给Vis.js，完全绕开$compile：

// 提前定义HTML模板字符串
var timelineItemTemplate = '<div class="timeline-item">{{name}}</div>';

link: function(scope,element,attr){
  if(scope.roster.timelineData){
    var dataSetItems = scope.roster.timelineData.map(item => {
      // 替换模板变量为实际数据
      var content = timelineItemTemplate.replace('{{name}}', item.name);
      return {
        content: content,
        // 时间线所需的其他字段：start/end、id等
      };
    });
    yourVisDataSet.add(dataSetItems);
  }
}

这种方式性能最优，因为完全跳过了Angular的编译流程，适合静态内容的场景。

5. 开启Angular生产模式 #

如果你的应用还没开启生产模式，记得在启动时开启：

angular.module('yourApp').run(function() {
  angular.enableProdMode();
});

生产模式会关闭Angular的调试检查（比如脏值检测的额外校验），能提升整体性能，包括模板编译速度。

内容的提问来源于stack exchange，提问作者32teeths