저는 angularjs
angularjs
有一段时间了,但是都没有怎么考虑过性能方面的问题,上次在研究过滤器的时候涉及到了性能问题。所以自己也总结了下常用的性能优化。下面我们一起看看吧
var unWatch = $scope.$watch('', function() { // do something ... if (someCondition) { unWatch(); // 取消监听 } });
我们都知道$watch
有三个参数,第三个参数为true
就是要深度监听的。这个参数主要是在嵌套对象的时候会用到,但是要尽量避免使用,如果你只是想看看基本属性的变化,那么就不要使用第三个参数进行深度的监听,这回大大拖慢每一次监听的时间。
尽量使用ng-if
,因为前者不仅会移除DOM
,还会移除相应的watch
。
而ng-show
只是简单的隐藏,但其实已经加载完成。(想学更多就到PHP中文网angularjs学习手册栏目中学习)
$apply
会使angular
进入$digest循环
,然后从$rootScope
开始遍历,检查变更。
$digest
只会检查当前scope
以及其子scope
。
所以,但我们确定某个操作只会影响当前的scope
,使用$digest
会稍微提升性能。
ng-repeat
真是使用比较多的指令了,但是好像经常忽略track by
。
我们的ng-repeat
经常就这么写:
ng-repeat="item in items"
但是如果这么写的话,当我们刷新页面的时候,它会删除所有已有的DOM,然后重新创建和渲染。但是如果我们加上track by
就不同了:
ng-repeat="item in item track by item.id"
这样angular就会复用
已有的DOM,然后更新变化的部分。这就减少了不必要的渲染。
console.log
很耗时,发布的时候一定要干掉。
慎用filter,可以在controller
中预先处理。
尽量避免使用广播事件,可以使用双向数据绑定或者共享service
를 한동안 알고 있었지만 성능 문제에 대해서는 별로 생각해본 적이 없었습니다. 지난번에 필터를 공부할 때는 성능 문제가 관련되어 있었습니다. 그래서 일반적으로 사용되는 성능 최적화에 대해서도 정리했습니다. 같이 살펴보아요
$를 알고 있습니다. watch
에는 세 개의 매개변수가 있습니다. 심층 모니터링의 경우 세 번째 매개변수는 true
입니다. 이 매개변수는 주로 객체를 중첩할 때 사용되지만, 기본 속성의 변경 사항만 확인하려는 경우에는 세 번째 매개변수를 심층 모니터링에 사용하지 마세요. 이렇게 하면 각 프로세스가 크게 느려집니다. 한 번의 청취 세션에 대한 시간입니다. ng-if
를 사용해 보세요. 전자는 DOM
을 제거할 뿐만 아니라 해당 시계
. 그리고 ng-show
는 단순히 숨겨져 있지만 실제로는 로드되었습니다. (자세한 내용을 알고 싶으면 PHP 중국어 웹사이트
열을 참조하세요.)
2. $apply와 $digest$apply
는 angular를 사용하여 <code>$digest 루프
를 입력한 다음 $rootScope
부터 시작하여 탐색하여 변경 사항을 확인합니다.
$digest
는 현재 범위
와 해당 하위 범위
만 확인합니다. 그러나 특정 작업은 현재 범위
에만 영향을 미치며 $digest
를 사용하면 성능이 약간 향상될 것이라고 확신합니다.
3. Optimize ng-repeat
ng-repeat
는 정말 많은 명령어를 사용하는데, track by
는 종종 무시되는 것 같습니다.
ng-repeat
는 다음과 같이 작성하는 경우가 많습니다. 🎜rrreee🎜하지만 이렇게 작성하면 페이지를 새로 고칠 때 기존 DOM을 모두 삭제한 다음 다시 생성하고 렌더링합니다. 하지만 track by
를 추가하면 다릅니다. 🎜rrreee🎜 이런 식으로 Angle은 기존 DOM을 재사용
한 다음 변경된 부분을 업데이트합니다. 이렇게 하면 불필요한 렌더링이 줄어듭니다. 🎜🎜4. 기타 최적화🎜console.log
는 시간이 많이 걸리므로 게시할 때 제거해야 합니다. 🎜🎜컨트롤러
에서 전처리될 수 있습니다. 🎜🎜서비스
를 사용하는 것을 피하세요. 🎜🎜🎜🎜 5.angularjs 요약 🎜🎜완전히 요약하지는 않았고 제가 자주 사용하는 내용입니다. 더 많이 사용할수록 이해가 더욱 깊어질 것입니다. (마지막으로 배우고 싶은angularjs 콘텐츠를 찾을 수 있는 PHP 중국어 웹사이트의 🎜angularjs Reference Manual🎜 칼럼을 추천합니다) 🎜🎜 [편집자 추천] 🎜🎜🎜Angularjs에서 표현식을 사용하는 방법은 무엇입니까? Anglejs에서 표현식을 사용하는 예🎜🎜🎜🎜🎜Angularjs와 jQuery의 차이점은 무엇인가요? Anglejs와 jQuery🎜🎜🎜🎜🎜🎜의 결과위 내용은 Anglejs 성능 최적화에 대해 얼마나 알고 있나요? 자세한 anglejs 성능 최적화 프로세스는 다음과 같습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!