[angularjs]角指令调用 querySelectorAll 使用 5 %cpu

发布时间: 2017/4/16 2:00:24
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我有没有图像在整个部分是否移除所有图像 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%

从铬调试器配置文件

enter image description here

解决方法 1:

问题是你正在使用的选择器。

您正在使用一个属性等于选择器,这是一个很差的选择器在性能方面。您需要使用它总是与其他选择器作为后代选择器或类/id 选择器等

如果你想要看看里面只有 imageContainerRemoval 指令,然后,您可以使用

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

如果你还知道如果它然后将永远 div 元素

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