Chrome Dev Tools 타임 라인 이해

Question

Chrome Dev Tools에서 여러 개의 긴 프레임이 표시되는 이유를 이해하려고합니다. 불꽃 차트

첫 번째 행 (호출 스택의 상단) $(function(){ }); 준비 funcs의 무리를 실행 jQuery.Deferred()들에 의해 촉발 Timer Fired 이벤트가 대부분이다. 내가 jQuery를 소스에 파고 requestAnimationFrame으로 setTimeout의 사용을 교체 할 경우

불꽃 차트가 많이 변경 나던, 나는 아직도 긴 프레임을 (개발 도구에 의해보고 된) 하나의 프레임 내에서 발사 RAF가 많이 얻을. ID는 아래의 의사 코드를 수행 할 것으로 예상됩니다.

window.requestAnimationFrame(function() { 
    // do stuff 
}); 

window.requestAnimationFrame(function() { 
    // do more stuff 
}); 

두 개의 서로 다른 애니메이션 프레임에서 실행해야합니다. 그렇지 않은가요?

실행되는 JS 모두 필요하지만 I는 setTimeout 및 rAF이 달성 보이지 않을 때 (암시하지만, 여기서 https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-execution 설명하지) "마이크로 작업"으로 실행하는 일을한다.

업데이트 Heres는

나던 긴 프레임 중 하나의 샷 확대는 어떤 리플 로우 (강제 또는 기타)을 갖고있는 것 같다. 여기에있는 모든 rAF 콜백이 한 프레임에서 실행되는 이유는 무엇입니까?

덕분에

Answer 1

긴 프레임은 일반적으로 당신이 (실수로) 일찍 일어날 레이아웃 작업을 강제 할 때, 이는 강제 동기 레이아웃에 의해 발생합니다.

DOM에 쓸 때 레이아웃은 쓰기 작업으로 무효화 되었기 때문에 리플 로우해야합니다. 이것은 대개 다음 프레임에서 발생합니다. 그러나 DOM에서 읽으려고하면 올바른 값이 반환되는지 확인하기 위해 현재 프레임에서 레이아웃이 일찍 발생합니다. 강제 레이아웃이 발생하면 긴 프레임이 발생하여 jank로 이어집니다.

이 문제가 발생하지 않도록하려면 requestAnimationFrame 함수 내에서만 쓰기 작업을 수행해야합니다. 브라우저가 초기 레이아웃을 수행하지 않도록 읽기 작업을 외부에서 수행해야합니다.

Diagnose Forced Synchronous Layouts은 DevTools에서 강제 리플 로우를 감지하고이를 해결하는 간단한 예제 데모가 있습니다.

읽기 및 쓰기를 일괄 처리하는 라이브러리 인 FastDom을 확인해 보는 것도 도움이됩니다. 기본적으로 큐잉 시스템이며 확장 성이 뛰어납니다.

추가 출처 : What forces layout/reflow, 폴 아일랜드어로는, 레이아웃/리플 로우를 강제 속성과 메소드의 포괄적 인 목록이 포함되어 있습니다.

업데이트 : 복수 requestAnimationFrame 호출이 별도의 프레임에서 콜백을 실행한다는 가정에 대해서는 그렇지 않습니다. 연속 호출이있을 때 브라우저는 애니메이션 콜백의 문서 목록에 콜백을 추가합니다. 브라우저가 다음 프레임을 실행하면 문서 목록을 탐색하고 각 콜백을 추가 된 순서대로 실행합니다.

자세한 구현 세부 정보는 HTML 사양의 Animation Frames을 참조하십시오.

이것은 특히 콜백 함수 실행 시간이 프레임 예산을 초과하는 경우 연속 호출을 사용하지 말아야 함을 의미합니다. 이것은 리플 로우로 인해 발생하지 않는 긴 프레임을 설명 할 수 있다고 생각합니다.