Long Task는 기본 스레드를 장시간 독점하여 UI가 '정지'되는 자바스크립트 코드입니다.
긴 작업은 페이지 페이지가 로드되는 동안 기본 스레드를 묶어 준비되었더라도 페이지가 사용자 입력에 응답하지 않게 만들 수 있습니다. 이벤트 리스너 및 클릭 핸들러와 같은 상호작용 기능이 아직 UI 요소에 연결되지 않았기 때문에 클릭과 탭이 작동하지 않는 경우가 많습니다. 따라서 장기 작업은 상호작용 시작 시간을 크게 늘릴 수 있습니다.
이제 Chrome DevTools가 장기 작업을 시각화하여 최적화가 필요한 작업을 더 쉽게 확인할 수 있습니다.
장기 작업으로 간주되는 항목은 무엇인가요?
CPU를 많이 사용하는 긴 작업은 50ms 이상 걸리는 복잡한 작업으로 인해 발생합니다. RAIL 모델은 사용자 입력 이벤트를 50ms 만에 처리하여 100ms 이내에 시각적 응답을 보장하고 동작과 반응 간의 연결을 유지할 것을 제안합니다.
요점: RAIL 모델은 사용자 입력에 100ms 이내에 시각적 응답을 제공하는 것을 권장하지만, INP (다음 페인트에 대한 상호작용) 측정항목의 임곗값을 사용하면 특히 느린 기기의 경우 더 달성 가능한 기대치를 설정할 수 있습니다.
내 페이지에 상호작용을 지연시킬 수 있는 긴 작업이 있나요?
지금까지는 Chrome DevTools에서 50ms가 넘는 스크립트의 '긴 노란색 블록'을 수동으로 찾거나 Long Tasks API를 사용하여 상호작용을 지연시키는 작업을 파악해야 했습니다.
성능 감사 워크플로를 쉽게 만들 수 있도록 DevTools에서 이제 장기 작업을 시각화합니다. 작업 (회색으로 표시)은 장기 작업인 경우 위험 플래그가 있습니다.
새 시각화 도구를 사용하는 방법은 다음과 같습니다.
- 웹페이지 로드의 성능 패널에 트레이스를 기록합니다.
- 기본 스레드 뷰에서 빨간색 플래그를 찾습니다. 이제 작업이 회색으로 표시되고 Task 라벨이 지정된 것을 볼 수 있습니다.
- 회색 막대 위에 포인터를 올려놓습니다. 작업 지속 시간과 이 작업이 긴 작업으로 간주되는지 여부를 보여주는 대화상자가 표시됩니다.
내 할 일이 긴 이유는 무엇인가요?
긴 작업의 원인을 알아보려면 회색 작업 표시줄을 선택합니다. 아래 창에서 Bottom-Up 및 Group by Activity를 선택합니다. 이를 통해 완료하는 데 너무 오래 걸리는 작업이 작업에 가장 많이 (전체) 기여한 활동을 확인할 수 있습니다. 다음 예에서 지연의 원인은 비용이 많이 드는 DOM 쿼리 집합처럼 보입니다.
장기 작업을 최적화하는 일반적인 방법은 무엇인가요?
큰 스크립트는 대개 장기 작업의 주요 원인입니다. 분할하는 것이 좋습니다. 주요 콘텐츠의 상호작용을 지연시키는 장기 작업이 포함되어 있을 수 있는 서드 파티 스크립트도 주의하세요.
모든 작업을 50ms 미만에 실행되는 청크로 분할하고 적절한 장소와 시간에 이 청크를 실행하세요. 이 중 일부는 적절한 위치가 서비스 워커의 기본 스레드 외부에 있을 수 있습니다. 장기 태스크 분리에 관한 안내는 장기 태스크 최적화 및 필 월튼의 긴급할 때까지 유휴 상태를 참고하세요.
페이지가 응답성을 유지하도록 합니다. 긴 작업을 최소화하는 것은 사용자가 사이트를 방문할 때 즐거운 경험을 할 수 있는 좋은 방법입니다. 장기 작업에 대한 자세한 내용은 사용자 중심 성능 측정항목을 참조하세요.