javascript - 调用 querySelectorAll 的 Angular 指令使用 5% 的 cpu

Question

我有这个 Angular Directive(指令)，如果整个部分中没有图像，它会删除所有图像 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-removal 指令

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

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

来自 Chrome 调试器配置文件

Answer 1

问题出在您使用的选择器上。

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

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

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

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

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