각도를 개선하는 방법많은 수의 DOM 요소를 포함한 JS 성능

각도를 개선하는 방법많은 수의 DOM 요소를 포함한 JS 성능

Angular 사용 여부를 평가하고 있습니다.웹 프로젝트를 위한 JS, 구현해야 할 기능에 대한 성능이 걱정됩니다.Angular에서 구현하려는 기능을 더 잘 구현할 수 있는 방법이 있는지 알고 싶습니다.JS.

기본적으로 제가 보기에는 각진 시간이 걸리는 것 같습니다.이벤트에 반응하는 JS는 DOM 요소가 능동적으로 변경되지 않는 경우 등에도 페이지 내의 DOM 요소 수에 따라 달라집니다.적어도 제 실험에서 봤을 때는 $digest 함수가 DOM 전체를 가로지르기 때문인 것 같습니다.

여기 플레이 시나리오가 있습니다(이것은 제가 정말로 하려는 것이 아니라 테스트 목적으로 충분히 가깝습니다).

각진 걸로 주세요.JS는 내가 단어 위를 맴돌면서 단어를 강조합니다.그러나 페이지의 단어 수가 증가할수록 단어 위를 맴돌 때와 실제로 강조 표시될 때 사이에 더 큰 지연이 발생합니다.

이것을 보여주는 jsfiddle: http://jsfiddle.net/czerwin/5qFzg/4/

(크레딧: 이 코드는 피터 베이컨 다윈이 앵글에 올린 게시물을 기반으로 합니다.JS 포럼).

HTML은 다음과 같습니다.

<div ng-app="myApp">
    <div ng-controller="ControllerA">
        <div >
            <span ng-repeat="i in list" id="{{i}}" ng-mouseover='onMouseover(i)'>
                {{i}}, 
            </span>
            <span ng-repeat="i in listB">
                {{i}}, 
            </span>
        </div>
    </div>
</div>

자바스크립트는 다음과 같습니다.

angular.module('myApp', [])
.controller('ControllerA', function($scope) {
    var i;
    $scope.list = [];
    for (i = 0; i < 500; i++) {
        $scope.list.push(i);
    }

    $scope.listB = [];
    for (i = 500; i < 10000; i++) {
        $scope.listB.push(i);
    }

    $scope.highlightedItem = 0;
    $scope.onMouseover = function(i) {
        $scope.highlightedItem = i;
    };

    $scope.$watch('highlightedItem', function(n, o) {
        $("#" + o).removeClass("highlight");
        $("#" + n).addClass("highlight");
    });
});

주의할 점 : - 네, DOM 조작을 위해 jquery를 사용하고 있습니다.감시자 한 명을 등록하는 방법이었기 때문에 이 길로 갔습니다.순수하게 angularJS로 하면 스팬마다 마우스 오버 핸들러를 등록해야 하는데, 페이지가 느려지는 것 같아요. - 순수 jquery에서도 이 방식을 구현했는데 성능은 괜찮았습니다.저는 여기서 저의 속도를 늦추는 것은 jquery call 때문이라고 생각하지 않습니다. - ID와 클래스를 가진 첫 500단어만 만들었을 뿐입니다 (작업에 영향을 받을 수 있는 DOM 요소 대신) 실제로 속도를 늦추는 것처럼 보이는 DOM 요소가 더 많다는 것을 확인했습니다.

비록 수용된 답이 이미 존재하지만, 나는 왜 각이 지는지 이해하는 것이 중요하다고 생각합니다.JS는 당신이 제공한 코드에 반응이 너무 느립니다.실제로 각진JS는 많은 DOM 요소로 느리지 않으며, 이 경우 목록의 각 항목에 등록하는 ng-mouse over direction 때문에 느립니다.ng-mouse over 지시문은 온마우스 오버 이벤트 리스너를 등록하고 리스너 기능이 실행될 때마다 ng.$digest dirty comparation check를 실행하고 모든 시계와 바인딩을 확인하는 $apply()이 실행됩니다.

간단히 말해서, 요소가 맴돌 때마다 내부에서 1-6ms를 소비할 수 있습니다.
각도 더티 비교 검사(바인딩 수에 대한 depending, 확립).좋지 않습니다 :)

관련 각도입니다.JS 구현:

var ngEventDirectives = {};
    forEach('click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress submit focus blur copy cut paste'.split(' '),
        function(name) {
            var directiveName = directiveNormalize('ng-' + name);
            ngEventDirectives[directiveName] = ['$parse', function($parse) {
            return {
                compile: function($element, attr) {
                    var fn = $parse(attr[directiveName]);
                    return function(scope, element, attr) {
                        element.on(lowercase(name), function(event) {
                            scope.$apply(function() {
                                fn(scope, {$event:event});
                            });
                        });
                    };
                }
            };
       }];
    }
);

사실, 호버링된 텍스트를 강조하기 위해 CSS를 사용할 수 있습니다.

.list-item:hover {
    background-color: yellow;
}

새로운 Angular Version(각도 버전)을 사용하면 코드가 훨씬 더 빨리 실행될 수 있습니다.각도 버전 1.3의 경우 한번 바인딩된 변수를 다이제스트 루프에서 제외하는 bind-once 연산자 ::가 있습니다.제외된 항목 수가 수천 개이므로 다이제스트 로드가 크게 줄어듭니다.

ECMA스크립트 6과 마찬가지로 angular는 Observe 클래스를 사용할 수 있으므로 더티 비교 검사가 완전히 쓸모없게 됩니다.따라서 마우스 오버 한 번으로 내부적으로 단일 이벤트 콜백이 발생하고 더 이상 적용하거나 다이제스트하지 않습니다.모두 원래의 코드와 함께.Angular가 언제 이걸 적용할지 모르겠어요.아마 2.0.

성능 문제를 해결하는 가장 좋은 방법은 높은 수준의 추상화를 사용하지 않는 것이라고 생각합니다(각도).Jsng - 그러한 상황에서 모든 대응하는 배경 마법으로 반복).각진JS는 실탄이 아니며 낮은 수준의 라이브러리에서 완벽하게 작동합니다.텍스트 블록에 이러한 기능이 있으면 텍스트에 대한 컨테이너가 되고 모든 하위 수준 논리를 캡슐화하는 지시문을 작성할 수 있습니다.레터링js jquery 플러그인을 사용하는 사용자 지정 지시어의 예:

angular.module('myApp', [])
  .directive('highlightZone', function () {
    return {
      restrict: 'C',
      transclude: true,
      template: '<div ng-transclude></div>',
      link: function (scope, element) {
        $(element).lettering('words')
      }
    }
  })

http://jsfiddle.net/j6DkW/1/

이것은 이제 오래된 질문이지만, Angular(v1.3 이후)가 다이제스트 루프를 슬림화하는 데 도움이 되는 한 번의 바인딩을 지원하는 믹스에 추가할 가치가 있다고 생각합니다.저는 한 번 바인딩을 추가하면 시계의 수가 크게 감소하여 성능이 향상되는 몇 가지 응용 프로그램을 작업했습니다. ng-repeat는 종종 많은 시계를 추가하는 원인이 되므로 ng-repeat에 한 번 바인딩을 추가하는 것을 고려할 수 있습니다.

ng-repeat="i in ::list"

다음은 불필요한 시계 추가를 피하기 위해 사용할 수 있는 몇 가지 기술의 요약입니다.

http://www.syntaxsuccess.com/viewarticle/547a8ba2c26c307c614c715e

항상 프로파일을 먼저 작성하여 실제 병목 현상을 찾습니다.때로는 처음에 의심할 만한 것이 아닐 수도 있습니다.저는 먼저 독자 분 자신의 코드를 의심하고, 그 다음에 Angular(많은 감시자가 주요 기능으로 인해 성능이 저하됨)를 의심할 것입니다.저는 Angular 앱에서 다양한 성능 문제를 프로파일링하고 해결하는 방법을 자세한 블로그 포스트 https://glebbahmutov.com/blog/improving-angular-web-app-performance-example/ 에서 설명했습니다.

btford에서 zone.js를 가져온 후 zone에서 모든 함수를 실행하여 시간을 확인한 다음 ajax 코드(crud) 및 정적 코드(apis)에 대한 다른 zone을 처리할 zone을 만듭니다.

또는 개체에 대해 ng-repeat 및/또는 양방향 바인딩을 사용하지 않도록 설정하면 훨씬 더 긴 atm이 됩니다.웹 구성 요소가 이미 쉐도우 돔을 사용하여 상단이 바삭바삭하게 터치되는 문제. still zone.js - 신뢰성에 대한 링크를 통해 비디오를 봅니다.

음, 당신이 사용하고 있는 것을 알 수 있습니다.$watch. Angular는 매우 필요할 때마다 $watch를 추천합니다.시나리오는 다음을 통해 변수를 업데이트하는 것을 좋아합니다.ng-model

http://jsfiddle.net/5qFzg/10/

수라즈

언급URL : https://stackoverflow.com/questions/16114946/ways-to-improve-angularjs-performance-even-with-large-number-of-dom-elements