>  기사  >  웹 프론트엔드  >  Anglejs 성능 최적화에 대해 얼마나 알고 있나요? 자세한 anglejs 성능 최적화 프로세스는 다음과 같습니다.

Anglejs 성능 최적화에 대해 얼마나 알고 있나요? 자세한 anglejs 성능 최적화 프로세스는 다음과 같습니다.

寻∝梦
寻∝梦원래의
2018-09-07 11:43:121065검색

저는 angularjsangularjs有一段时间了,但是都没有怎么考虑过性能方面的问题,上次在研究过滤器的时候涉及到了性能问题。所以自己也总结了下常用的性能优化。下面我们一起看看吧

一、优化$watch

1.及时移除不必要的watch

var unWatch = $scope.$watch('', function() {
    // do something
    ...
    if (someCondition) {
        unWatch();    // 取消监听
    }
});

2.尽量避免深度watch

我们都知道$watch有三个参数,第三个参数为true就是要深度监听的。这个参数主要是在嵌套对象的时候会用到,但是要尽量避免使用,如果你只是想看看基本属性的变化,那么就不要使用第三个参数进行深度的监听,这回大大拖慢每一次监听的时间。

3.ng-if和ng-show

尽量使用ng-if,因为前者不仅会移除DOM,还会移除相应的watch

ng-show只是简单的隐藏,但其实已经加载完成。(想学更多就到PHP中文网angularjs学习手册栏目中学习)

二、$apply和$digest

$apply会使angular进入$digest循环,然后从$rootScope开始遍历,检查变更。

$digest只会检查当前scope以及其子scope

所以,但我们确定某个操作只会影响当前的scope,使用$digest会稍微提升性能。

三、优化ng-repeat

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를 한동안 알고 있었지만 성능 문제에 대해서는 별로 생각해본 적이 없었습니다. 지난번에 필터를 공부할 때는 성능 문제가 관련되어 있었습니다. 그래서 일반적으로 사용되는 성능 최적화에 대해서도 정리했습니다. 같이 살펴보아요

  • 1. $watch 최적화

1. 불필요한 시계 제거

rrree

2. Deep watch를 피하세요

우리 모두는 $를 알고 있습니다. watch에는 세 개의 매개변수가 있습니다. 심층 모니터링의 경우 세 번째 매개변수는 true입니다. 이 매개변수는 주로 객체를 중첩할 때 사용되지만, 기본 속성의 변경 사항만 확인하려는 경우에는 세 번째 매개변수를 심층 모니터링에 사용하지 마세요. 이렇게 하면 각 프로세스가 크게 느려집니다. 한 번의 청취 세션에 대한 시간입니다.

3.ng-if 및 ng-show

ng-if를 사용해 보세요. 전자는 DOM을 제거할 뿐만 아니라 해당 시계. 그리고 ng-show는 단순히 숨겨져 있지만 실제로는 로드되었습니다. (자세한 내용을 알고 싶으면 PHP 중국어 웹사이트

angularjs 학습 매뉴얼

열을 참조하세요.)

2. $apply와 $digest$applyangular를 사용하여 <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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.