2014-03-18 4 views
1

이 프로젝트의 경우 팀과 저는 AngularJS 지시문의 강력한 기능을 활용하여 프로젝트 고유의 맞춤 구성 요소를 작성하고 실제 HTML 구성 요소처럼 사용합니다. 예를 들어많은 맞춤형 지시어를 사용하는 AngularJS 성능

...

우리가 각 행은 우리가 요청에서 얻는 정보의 무리와 함께 구성되어이 테이블을 말해봐, 각 행은 ng-repeat 반복됩니다. 각 행 안에는 동일한 사용자 정의 동작을 가진 여러 개의 사용자 정의 버튼이 있습니다. 이 단추는이 특정 테이블뿐만 아니라 웹 사이트의 다른 모듈/페이지에서도 사용됩니다.

첫 번째 생각은 표 행과 단추 중 하나에 대해 두 개의 지시문을 사용하는 것이 었습니다. 아이디어는 요소의 사용자 지정 동작을 정의하는 사용자 지정 특성이있는 사용자 지정 구성 요소/요소입니다. 이렇게하면 각 구성 요소를 개별적으로 개발하고 단위 테스트 한 정말 훌륭한 모듈 응용 프로그램을 만들 수 있습니다. 우리의 HTML은 준비하고 이해하기 쉽습니다.

소리가 좋은가요?

이제 성능 문제는 어떻게됩니까? 이러한 행 100 개와 행 당 5 개의 버튼이있는 표가 있으면이 접근법에 큰 문제가 발생할 수 있습니다. 해당 행/단추가 X 초마다 정보를 업데이트하기 위해 몇 개의 바인딩을 가지고 있다면 이것이 큰 문제가 될 수 있습니까?

+0

내 현재 2 센트, 내 현재 애플 리케이션은 보통

에 직원의 목록에 대한 한 달의 각 날에 대한 지시문이 있습니다. 현재 약 70 명의 직원을 보여줍니다 (아직 필터링 안함). 따라서 최소 70 * 30 (2100) 개의 지시문이 표시됩니다. 렌더링에 약 3-4 초가 소요됩니다. (백엔드는 원하는 형식의 데이터를 반환하므로 더 이상 처리하지 않으므로 모든 것을 표시하기까지 오래 걸리는 것처럼 보입니다.) – Busata

+1

지시문은 오버 헤드를 너무 많이 추가하지 않고 잘못된 코드를 처리합니다. 그리고 좋은 코드의 성능을 향상시키는 데는 두 가지 방법이 항상 있습니다. –

+0

지시문이 취하는 행동의 중요성에 관한 것입니다. – Fresheyeball

답변

0
각도 Misko Hevery의 아버지가이 성능에 대해 할 말이있다

데이터 바인딩 :

How does data binding work in AngularJS?

그러나 짧은 그만큼 당신이 당 2000 개 이상의 데이터 바인딩 된 항목을 해달라고으로 말한다처럼

페이지 성능은 문제가되지 않을 것입니다 ...

관련 문제