알고리즘 pseudo code
- 페이지 로딩 시점에 get(9)
스크롤바가 하단에 가까우면 받아오고, 받아오기 인덱스 true
if(height<200px)
get(9)
getIndex=true받아오는 동안에는 요청 안하기
if(getIndex==true)
return 0받아온 값이 없을 경우에는 return 0하고 searchEndIndex를 true로 하기
if(res.length==0)
return 0
searchEndIndex=true
HostListener Decorator Component 작성
아래와 같이 호스트의 이벤트를 감지한다.
1 | import { HostListener, Inject} from "@angular/core"; |
scroll event의 성능향상을 위한 Tip
모든 이벤트 마다 onScroll 함수를 발생시키면 CPU의 성능을 많이 차지하므로
다음과 같이 함수에 delay를 주어 이를 해결할 수 있다.1
2
3
4
5
6
7
8
9
10
11
12function () {
if (waiting) {
return;
}
waiting = true;
scroll();
setTimeout(function () {
waiting = false;
}, 100);
}
하드웨어 가속시키기
하드웨어 가속이란 그래픽 처리 장치를 이용하여 중앙처리 장치의 처리량을 줄이고, 브라우저의 렌더링을 효율화하는 것을 말한다.
css 작업에 하드웨어 가속을 활성화하면, 작업처리가 빨라져서 웹페이지의 렌더링을 보다 빠르게 할 수 있다.
특정 엘레멘트에 어떤 지시를 내리면 엘리먼트는 자신의 레이어에 분류되고 페이지에 있는 다른 엘리멘트와 독립되어 렌더링 된다.
결론만 말하면 css에 다음과 같은 속성을 붙이면 하드웨어를 가속화 하여 빨리 렌더링이 가능하다.1
transform: 3dtransforms(0,0,0)
위 명령어는 3d가 아닌 엘레먼트에 가짜로 3d속성을 주므로써 해당 element의 렌더링을 cpu가 아닌 gpu가 담당하게 하여 렌더링 속도를 높이며, will-change 명령어는 엘레먼트에 어떤 변경을 할 것인지 브라우저에게 미리 알려주므로써 최적화 하는 것이다. 페이지는 순식간에 갱신돼 부드러운 화면처리가 가능하게 된다.
Comments