javascript - 随处使用自定义指令而不是常规 HTML 标记会影响性能吗？

Question

在我们的产品中，我们使用的是 angularjs 1.3，我们有许多具有不同样式的不同 UI 组件，例如边框、背景颜色、字体大小、字体颜色、间距、填充等...

但是，作为产品化的一部分，我希望将所有这些不同的 UI 组件组合定义为标准指令，以便应用程序中所有页面的 UI 模型更加简单、直接和基于组件库。

作为解决方案，我将通用自定义指令定义为 <tabloid这是 <div 的直接表示.此指令还将具有可选的依赖子项作为面板标题、面板主体、面板页脚以及作为类的标准属性。此类将代表我们标准 template.less 文件中的小报风格，以在某些情况下定义其样式和行为。这种模型的优点是我们将以非常编码友好的方式将良好的 css 和 html 元素耦合在一起，并且任何开发人员都可以轻松地为任何 future 的开发挑选和使用这些元素，从而使其成为我们应用程序的标准库。我们决定使用 <tabloid指令并避免 <div整体为空<tabloid是 <div 的直接表示以避免开发人员在选择黑白这两个元素时产生任何混淆。由于 <tablod 的内部内容指令是可选的，有参数 <div比自定义指令更明智，因为它减少了我们在某种程度上同意的 angularjs 开销。

现在的问题是，如果我在应用程序中到处使用自定义指令而不是 <div这会不会对性能造成重大影响。我们以任何方式在着陆页上使用 “text/ng-template” 预渲染所有模板，从而避免任何运行时渲染自定义指令，这已经帮助我们提高了很多性能。

下面给出了一个简单的例子，以便更好地理解这个要求......

HTML

<div class="summary">
   <div class="panel-heading green-heading">
      <label>{{MyTitle}}</label>
      <img class="pull-right" src="settings.ico" />
   </div>
   <div class="panel-body">
         <span class="green-font">{{MyVal}}</span>
   </div>
</div>

<div class="summary">
   <div class="panel-heading blue-heading">
      <label>{{MyTitle}}</label>
      <img class="pull-right" src="settings.ico" />
   </div>
   <div class="panel-body">
         <span class="blue-font">{{MyVal}}</span>
   </div>
</div>

计划以这两种不同样式中的一种更好地实现它。 我个人选择第二个模型。

第一个模型:Angular JS 自定义指令 UI 组件样式

<tabloid class="green" tabloid-title="{{MyTitle}}">{{MyVal}}</tabloid>
<tabloid class="blue" tabloid-title="{{MyTitle}}">{{MyVal}}</tabloid>

指令声明

 directive('tabloid', function() {
        return {
            restrict: 'E',
            replace: true,
            transclude: true,
            myTitle: '@',
            myVal: '@',
            template: '<div ng-transclude class="tabloid">
                          <div class="panel-heading">{{myTitle}}</div> 
                          <div class="panel-body">{{myVal}}</div>
                     </div>'
        }
    });

第二个模型...(非常通用的指令将与其他指令组合使用)

HTML 与 AngularJs

 <tabloid class="green" tabloid-title="{{MyTitle}}">
    <panel-heading>{{MyTitle}}</panel-heading>
    <panel-body>{{MyVal}}</panel-body>
 </tabloid>
 <tabloid class="blue" tabloid-title="{{MyTitle}}">
    <panel-heading>{{MyTitle}}</panel-heading>
    <panel-body>{{MyVal}}</panel-body>
 </tabloid>

指令声明

 directive('tabloid', function() {
        return {
            restrict: 'E',
            replace: true,
            transclude: true,
            myTitle: '@',
            myVal: '@',
            template: '<div ng-transclude class="tabloid" />'
        }
    });

Answer 1

它肯定会对性能产生一些影响，具体多少取决于您在指令中放入的代码/功能。模板的开销实际上并不重要。

Ben Nadel had a blogpost不久前他对此进行了深入研究。