Flexbox 레이아웃은 느리지 않습니다.

폴 아이리시

얼마 전 Wilson Page는 Financial Times 웹 앱을 실현한 방법을 소개하는 Smashing Magazine을 위한 유용한 기사를 썼습니다. 이 기사에서 윌슨은 다음과 같이 말합니다.

앱이 성장하기 시작하면서 성능이 점점 더 나빠지고 있음을 알게 되었습니다.

Chrome 개발자 도구의 타임라인을 살펴보면서 몇 시간 동안 원인을 찾아냈습니다. 충격, 공포! — 우리의 새로운 가장 친한 친구인 Flexbox였습니다. 타임라인에 따르면 일부 레이아웃에는 거의 100밀리초가 걸리는 것으로 나타났습니다. Flexbox 없이 레이아웃을 재작업하면 이 시간이 10밀리초로 줄었습니다.

윌슨의 발언은 display: box;를 사용한 원래 (레거시) Flexbox에 관한 것이었습니다. 아쉽게도 그들은 최신 Flexbox (display: flex;)가 더 빨라졌다고 대답할 기회를 얻지 못했지만, CSS 요령에서 Chris Coyier는 이 질문을 던졌습니다.

Google은 WebKit & Blink에서 구현의 많은 부분을 작성한 오잔 바파이에게 새로운 Flexbox 모델과 구현에 관해 물었습니다.

새 Flexbox 코드는 다중 패스 레이아웃 코드 경로가 훨씬 적습니다. 하지만 여전히 멀티 패스 코드 경로에 도달할 수 있습니다 (예: flex-align: stretch는 종종 2 패스임). 일반적으로 일반적인 경우에는 훨씬 더 빠르지만 느린 속도만큼 느린 사례를 구성할 수 있습니다.

즉, 벗어날 수 있다면 일반 블록 레이아웃 (플로팅 아님)이 항상 단일 패스이므로 일반적으로 새 Flexbox보다 빠르거나 빠릅니다. 하지만 새 Flexbox는 테이블을 사용하거나 맞춤 JS 기반 레이아웃 코드를 작성하는 것보다 빠릅니다.

숫자의 차이를 알아보기 위해 이전 구문과 새로운 구문을 직접 비교해 보았습니다.

이전 및 새 Flexbox 벤치마크

  • 기존 Flexbox새 Flexbox (대체 포함)
  • 페이지당 요소 500개
  • 페이지 로드 비용을 평가하여 요소를 배치합니다.
  • 각 3회 실행에서 평균
  • 데스크톱에서 측정됩니다. (모바일의 경우 최대 10배까지 느려집니다.)

이전 Flexbox: 레이아웃 비용 약 43.5ms


이전 Flexbox 레이아웃 예

새로운 Flexbox: 레이아웃 비용 약 18.2ms


새 Flexbox 레이아웃 예

요약: 이전 버전이 새 버전보다 2.3배 느립니다.

어떻게 해야 하나요?

flexbox를 사용할 때 항상 새로운 항목을 작성하세요: Chrome 21 이상, Safari 7 이상, Firefox 22 이상, Opera(및 Opera Mobile) 12.1 이상, IE 11 이상, Blackberry 10 이상에서 IE10 트위너 구문과 새롭게 업데이트된 Flexbox를 사용하세요. 많은 경우 기존 Flex 브라우저로 대체할 수 있습니다.

주의사항: 규칙이 아닌 도구

더 중요한 것은 중요한 요소를 최적화하는 것입니다. 한 가지 작업을 최적화하는 데 시간을 할애하기 전에 항상 타임라인을 사용하여 병목 현상을 파악하세요.

실제로 Google은 Wilson 및 Financial Times Labs 팀과 소통하여 레이아웃 성능 도구의 Chrome DevTools 적용 범위를 개선했습니다. 곧 요소의 재레이아웃 경계를 확인하는 기능을 추가할 예정이며, 타임라인의 레이아웃 이벤트가 각 레이아웃의 범위, 루트, 비용에 관한 세부정보와 함께 로드됩니다.

강제 동기화 레이아웃 팝업