UI 응답 성을위한 CSS 디버깅-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

UI 응답 성을위한 CSS 디버깅

Jennifer Aniston

Feb 18, 2025 pm 01:13 PM

이 기사는 Tiffany Brown이 쓴 "The Master of CSS"라는 책에서 발췌 한 것입니다. 이 책은 전 세계 주요 서점에서 구입할 수 있으며 여기에서 전자 책 버전을 구입할 수도 있습니다.

CSS 특정 속성 및 값 트리거 리플 로우는 비싸고 사용자 인터페이스의 응답 속도를 줄일 수 있습니다. 페이지 렌더링, 애니메이션 유창성 및 스크롤 성능은 특히 저전력 장치의 휴대 전화 및 태블릿에서 영향을받습니다. TV.

재 배열이란 무엇입니까? {.title} 재 배열은 페이지의 레이아웃 부분 또는 전부를 변경하는 모든 작업을 말합니다. 예를 들어, 요소의 크기를 변경하거나 왼쪽 위치를 업데이트하십시오. 브라우저가 문서의 다른 요소의 높이, 너비 및 위치를 다시 계산하게합니다.

리 페인트 (Repaint)는 리플레이트와 유사하며 브라우저가 문서의 일부를 재 렌더링하도록 강요합니다. 예를 들어, 버튼 위로 호버링 할 때 마우스의 색상을 변경하는 것은 다시 그리기 작동입니다. redraw는 노드의 크기 나 위치에 영향을 미치지 않기 때문에 재 배열에 덜 영향을 미칩니다.

재 배열 및 리 그리프는 일반적으로 요소 추가 또는 제거와 같은 DOM 작업에 의해 트리거됩니다. 그러나 요소 크기, 가시성 또는 위치에 영향을 미치는 속성의 변화로 인해 발생할 수도 있습니다. JavaScript 또는 CSS 기반 애니메이션으로 인해 변경 사항이 발생하는지 여부는 사실입니다.

참고 : 페이지로드 {.title} 페이지가로드되면 브라우저는 초기 HTML, CSS 및 JavaScript를 구문 분석하여 항상 재정렬 및 리 그리프를 트리거합니다.

프로젝트에서 다시 그리기와 재 배열을 완전히 피하기는 어렵습니다. 그러나 타임 라인 도구를 사용하여이를 식별하고 영향을 줄일 수 있습니다.

타임 라인 도구 {.title} 타임 라인 도구는 처음에는 약간 혼란 스러울 수 있습니다. 그들은 프론트 엔드의 성능을 측정하고 다양한 작업이 완료되는 데 걸리는 시간을 기록합니다. 페이지와 상호 작용하는 동안 활동을 녹음하면 성능 병목 현상을 일으킬 수있는 CSS 코드를 찾을 수 있습니다.

타임 라인을 사용하려면 개발자 도구 인터페이스의 타임 라인 탭을 클릭하십시오. Chrome, Opera 및 Firefox에서는 적절하게 "타임 라인"입니다. Safari는 그것을 복수형 "타임 라인"이라고 명명했습니다. Internet Explorer 11은보다 설명적인 이름 "UI 응답 성"을 사용합니다. [9]

모든 브라우저에서 "레코드"버튼을 눌러 녹화 프로세스를 시작하십시오. 문제가있는 페이지의 일부와 상호 작용하고 완료되면 해당 버튼을 클릭하여 녹음을 중지하십시오.

사용중인 브라우저에 따라 데이터가 즉시 표시되거나 녹음을 중지 한 후에는 데이터가 표시 될 수 있습니다. Safari 및 Firefox는 실시간으로 데이터를 표시하며 Chrome, Opera 및 Internet Explorer는 녹음을 중지 한 후 성능 차트를 렌더링합니다.

문서 로딩, 기능 호출, DOM 이벤트, 스타일 재 계산 및 드로잉 작업은 모두 각 브라우저에 기록되어있어 성능 병목 현상을 설명 할 수 있습니다. CSS 성능은 최소한 두 가지 관련 측면에 중점을 두어야합니다.

두 예제의 마크는 동일합니다 (결과는 그림 3.16에 나와 있습니다) :

left transform 그림 3.16 사파리 브라우저의 HTML 데모 페이지에서도 동일합니다. "이동"버튼을 클릭하면 각 DIV 요소에서

클래스가 전환됩니다.

우리의 CSS 코드는 두 부분의 다른 부분입니다. 예 A에 사용 된 CSS는 다음과 같습니다.

이후,이 애니메이션은 타임 라인에서 많은 스타일 계산과 리드 웨이 표시기를 생성합니다. 다음 이미지는 Safari (그림 3.17), Chrome (그림 3.18), Internet Explorer (그림 3.19) 및 Firefox (그림 3.20) 에서이 변환의 타임 라인 출력을 보여줍니다.

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Performance example</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <button type="button" id="move">Move</button>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <🎜>
  </body>
</html>

로그인 후 복사

<<> Debugging CSS for UI Responsiveness 그림 3.17 Safari 브라우저에서의 타임 라인 출력

moved 그림 3.18. Internet Explorer에서 왼쪽 위치 변환의 타임 라인 출력 11 브라우저

var move = document.getElementById('move');
move.addEventListener('click', function(e) {
    var objs = document.body.querySelectorAll('div');
    Array.prototype.forEach.call(objs, function(o){
        o.classList.toggle('moved');
    });
});

로그인 후 복사

그림 3.20은 전환의 속성이 다음과 관련이 있습니다.

. 속성은 애니메이션이나 변환으로 인해 변경 사항이 발생하더라도 변경 될 때 재정렬을 트리거합니다.

div {
  background: #36f;
  margin-bottom: 1em;
  width: 30px;
  height: 30px;
  position: relative;
  left: 0;
  transition: left 2s ease-in;
}

.moved {
    left: 1000px;
}

로그인 후 복사

이제 예제 B의 CSS를 살펴 보겠습니다.

여기서 우리는 변환을 사용하고

와 대부분의 브라우저에서 전환은 재정렬을 트리거하지 않으며 타임 라인에는 리 페인트 작업이 줄어 듭니다. 이는 사파리 (그림 3.21), 크롬 (그림 3.22) 및 인터넷 익스플로러 (그림 3.23)에서 분명합니다. Firefox는 예외입니다. 그림 3.20 및 그림 3.24. 왼쪽 변환의 타임 라인과 변환 변환은 매우 유사합니다. Debugging CSS for UI Responsiveness

Debugging CSS for UI Responsiveness 그림 3.21 Safari 브라우저에서 속성 변환

-webkit-transform

크롬에서 속성을 사용한 동일한 출력. 브라우저 Debugging CSS for UI Responsiveness

transform 그림 3.23은

불행히도, 어떤 속성으로 인해 재 배열 및 재로 그리기를 유발할 명확한 목록은 없습니다. Paul Lewis의 CSS 트리거는 가장 가깝지만 크롬 특정입니다. 그러나 브라우저는 이러한 속성 중 다수에 대해 유사하게 작동 하므로이 자원은 적어도 어떤 속성이 문제를 일으킬 수 있는지에 대한 아이디어를 제공합니다. 일단 속성이 문제가 될 수있는 속성을 알면 다음 단계는 가설을 테스트하는 것입니다. 주석을 사용하거나 임시 Debugging CSS for UI Responsiveness