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

접두사를 추가하여 속성을 비활성화하고 타임 라인 테스트를 다시 실행하십시오.

성능은 절대적이거나 완벽하지 않은 상대적이라는 것을 기억하십시오. 목표는 개선하는 것입니다. 이전보다 더 잘 성능을 발휘하십시오. 속성 또는 효과의 성능이 수락하기에는 너무 느리면 완전히 제거됩니다. transform

위 내용은 UI 응답 성을위한 CSS 디버깅의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

Flexbox vs Grid : 둘 다 배워야합니까?May 10, 2025 am 12:01 AM

예, YoushouldLearnbothflexBoxAndgrid.1) FlexBoxisIdealforone-Dimensional, FlexiblelayoutSlikenavigationMenus.2) GridexCelsIntwo-Dimensional, ComplexDesignsSuchasmagazinElayouts.3) 결합 된 BothenSlayoutFlexibility 및 HeartingFortructur

궤도 역학 (또는 CSS 키 프레임 애니메이션을 최적화하는 방법)May 09, 2025 am 09:57 AM

자신의 코드를 리팩터링하는 것은 어떤 모습입니까? John Rhea는 자신이 쓴 오래된 CSS 애니메이션을 선택하고 최적화하는 사고 과정을 살펴 봅니다.

CSS 애니메이션 : 만들기가 어렵습니까?May 09, 2025 am 12:03 AM

cssanimationsarenherinly에 hardbutreepracticenderstandingofcsspropertiesandtimingflestions.1) startsimpleants withsimpleatslikeScalingabuttononHoverusingKeyframes.2) useAsingfuctionslikecubic-bezierfornateffects, 그러한 분위기, 3)

@keyframes CSS : 가장 많이 사용되는 트릭May 08, 2025 am 12:13 AM

@keyframesispopularduetoitstativerstatility 및 powerincreatingsmoothcssanimations.keytricksinclude : 1) states 사이에 moothtransitionsbettites, 2) 애니메이션 multiplepropertiessimultory, 3) vendorPixesforBrowsercompatibility, 4) 빗질을 사용하여

CSS 카운터 : 자동 번호 매기기에 대한 포괄적 인 안내서May 07, 2025 pm 03:45 PM

csScounterSearedTomanageAutomaticNumberingInberingInwebDesigns.1) 1) theCanbeusedfortablestoffContents, ListItems 및 CustomNumbering.2) AdvancedUsesInSinestedNumberingsystems.3) CreativeUseNvolvecust를 CreativeSinvolecust.4) CreativeSinvolvecust

스크롤 구동 애니메이션을 사용한 현대 스크롤 그림자May 07, 2025 am 10:34 AM

특히 모바일 장치에 스크롤 그림자를 사용하는 것은 Chris가 이전에 다룬 미묘한 UX입니다. Geoff는 애니메이션 타임 라인 속성을 사용하는 새로운 접근 방식을 다루었습니다. 또 다른 방법이 있습니다.

이미지 맵 재 방문May 07, 2025 am 09:40 AM

빠른 새로 고침을 통해 실행합시다. 이미지 맵은 html 3.2로 돌아가는데, 먼저 서버 측 맵과 클라이언트 측지 맵은 맵 및 영역 요소를 사용하여 이미지를 통해 클릭 가능한 영역을 정의했습니다.

DEVS 상태 : 모든 개발자를위한 설문 조사May 07, 2025 am 09:30 AM

Devs State Survey는 이제 참여에 개방되어 있으며, 이전 설문 조사와 달리 코드, 직장, 건강, 취미 등을 제외한 모든 것을 포함합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

WebStorm Mac 버전

유용한 JavaScript 개발 도구

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.