Javascript 调用querySelectorAll的Angular指令正在使用5%的cpu

我有一个angular指令，如果整个部分中没有图像，它将删除所有图像div容器

myApp.directive('imageContainerRemoval', function() {
  return {
    link: function(scope, element, attrs) {
      var watchGroup = attrs.imageContainerRemoval,
          sectionGotImage = false;

      // 0 milisec delay to ensure ng-style is applied and ng-repeat has finished.
      setTimeout(function() {

        var elementsInClass = $('[image-container-removal="' + watchGroup + '"]');

        // Check for images in section.
        if ($(elementsInClass).children().length > 0) {
          sectionGotImage = true;
        }

        // If there's no images in section, delete all image container divs.
        if (!sectionGotImage) {
          $(elementsInClass).remove();
          sectionGotImage = false;
        }
      }, 0);
    }
  };
});

在chrome浏览器中调试时，我注意到

querySelectorAll

占5.27%，其中4.49%用于我的

image container remove

指令

var elementsInClass=$（'[image container removation=“'+watchGroup+'”]）

我很不明白为什么这个调用如此昂贵，因为我在另一个指令中也以类似的方式使用它，并且该调用低于0.5%

来自chrome调试器配置文件

问题在于您使用的选择器

您使用的是属性等于选择器，这是一个性能非常差的选择器。您需要始终将其与其他选择器一起使用，如子代选择器或类/id选择器等

如果只想查看
imageContainerRemoval
指令的内部，则可以使用

var elementsInClass = element.find('[image-container-removal="' + watchGroup + '"]');

如果您还知道它是否总是div元素，那么

var elementsInClass = element.find('div[image-container-removal="' + watchGroup + '"]');

问题是您正在使用的选择器

您使用的是属性等于选择器，这是一个性能非常差的选择器。您需要始终将其与其他选择器一起使用，如子代选择器或类/id选择器等

如果只想查看
imageContainerRemoval
指令的内部，则可以使用

var elementsInClass = element.find('[image-container-removal="' + watchGroup + '"]');

如果您还知道它是否总是div元素，那么

var elementsInClass = element.find('div[image-container-removal="' + watchGroup + '"]');

我强烈建议大家多读一些安格拉斯的原则。这里有很多jquery代码，还使用了setTimeout。我的建议是为您正在搜索的内容创建一个指令，并以这种方式连接到它们。您正在使用一个非常昂贵的属性选择器。。。您需要使用其他选择器（如元素选择器或子代选择器）缩小搜索范围如果只想查看
imageContainerRemoval
指令，则可以使用
var elementsInClass=element.find（“[image container remove=“”+watchGroup+”]”查找”）
，如果您还知道它是否总是
div
元素，则
var elementsInClass=element.find（'div[image container removation=“”+watchGroup+”）还有指令的链接函数得到多少次called@ArunPJohny添加的每一张图片——在这个例子中是128，我强烈建议大家阅读一些安格拉斯的原则。这里有很多jquery代码，还使用了setTimeout。我的建议是为您正在搜索的内容创建一个指令，并以这种方式连接到它们。您正在使用一个非常昂贵的属性选择器。。。您需要使用其他选择器（如元素选择器或子代选择器）缩小搜索范围如果只想查看
imageContainerRemoval
指令，则可以使用
var elementsInClass=element.find（“[image container remove=“”+watchGroup+”]”查找”）
，如果您还知道它是否总是
div
元素，则
var elementsInClass=element.find（'div[image container removation=“”+watchGroup+”）还有指令的链接函数得到多少次called@ArunPJohny添加的每个图像-在示例中为128