Jank-Free JavaScript 애니메이션에 대한 7 가지 성능 팁

키 포인트

더 나은 애니메이션 성능을 얻고 게시 또는 도면 작업을 트리거하는 CSS 속성의 애니메이션을 피하려면 및 와 같은 최신 브라우저에서 최적화 된 속성을 사용하십시오.

애니메이션 요소는 CSS

속성을 ​​사용하여 자체 레이어로 홍보 할 수 있지만 메모리와 관리가 필요하므로주의해서 수행해야합니다.
• transform 로 교체하여 지연의 위험을 줄이고 더 부드러운 애니메이션을 보장하십시오. opacity HTML5 캔버스에서 복잡한 드로잉 작업의 경우 오프 스크린 캔버스를 사용하여 오프 스크린 캔버스에서 모든 드로잉 작업을 수행 한 다음 각 프레임에서 오프 스크린 캔버스를 그립니다.
• 웹 애니메이션의 역할은 간단한 장식 효과에서 사용자 경험의 특정 역할로 발전했습니다. 예를 들어, 사용자가 응용 프로그램과 상호 작용할 때 시각적 피드백을 제공하고 사용자에게 응용 프로그램의 목표를 달성하도록 집중하고 도움이되는 시각적 팁을 제공합니다. 사용자는 응용 프로그램 인터페이스 등을 이해합니다. will-change 웹 애니메이션이 이러한 중요한 작업에 유능한 지 확인하려면 사용자가 응용 프로그램에서 수행하려고 시도하는 것을 방해하는 것이 아니라 도움이되도록 적시에 이동을 적시에 원활하게 수행 해야하는 것이 중요합니다. .
나쁜 애니메이션 디자인은 성가신 효과로 이어질 수 있습니다.
• 최신 브라우저는 장치의 새로 고침 속도와 동시에 화면의 콘텐츠를 새로 고치려고합니다. 오늘날 대부분의 장치의 경우 화면이 초당 60 회 또는 60Hz를 새로 고칩니다. 화면에 약간의 움직임이있는 경우 (예 : 스크롤, 전환 또는 애니메이션) 브라우저는 새로 고침 속도와 일치하기 위해 초당 60 프레임을 생성해야합니다. 말더듬은 웹 사이트 나 애플리케이션이 새로 고침 속도를 유지하지 못할 때 사용자가 보는 말더듬, 지터 또는 간단한 일시 정지입니다. requestAnimationFrame setTimeout/setInterval 애니메이션이 고정되면 사용자는 결국 애플리케이션과 더 적고 적은 응용 프로그램과 상호 작용하여 성공에 부정적인 영향을 미칩니다. 분명히, 아무도 그것을 원하지 않습니다.
이 기사에서는 JavaScript 애니메이션 문제를 해결하고 60fps (초당 프레임) 목표를보다 쉽게 ​​달성하여 네트워크에서 원활한 동작을 가능하게하는 몇 가지 성능 팁을 수집했습니다.
1. 비용이 많이 드는 CSS 속성을 피하십시오 CSS 전환/CSS 키 프레임 또는 JavaScript를 사용하여 CSS 속성을 애니메이션하기 위해 CSS 전환 또는 JavaScript를 사용하려고하는지 여부, 페이지 지오메트리가 변경되는 속성 (레이아웃) - 페이지의 다른 요소의 위치가 다시 계산되어야한다는 것을 의미합니다. 그리기 작업과 관련 - 이것은 매우 중요합니다. 레이아웃 및 드로잉 작업은 브라우저에 대해 처리하는 데 매우 비쌉니다. 특히 페이지에 여러 요소가있을 때. 따라서 게시 또는 도면 작업을 트리거하고 및 와 같은 속성을 고수하는 CSS 속성을 애니메이션하지 않으면 최신 브라우저가 이러한 속성을 최적화하기 때문에 애니메이션 성능이 크게 향상됩니다. transform CSS 트리거에서 첫 번째 및 후속 변경 사항을 포함하여 각 최신 브라우저에서 트리거 된 작업에 대한 정보가 포함 된 최신 CSS 속성 목록을 찾을 수 있습니다. opacity

합성 작업만을 유발하는 CSS 속성을 변경하는 것은 웹 애니메이션 성능을 최적화하기 위해 취할 수있는 간단하고 효과적인 단계입니다.

2. 애니메이션 요소가 자체 신시사이저 레이어에 있으면 일부 최신 브라우저는 하드웨어 가속을 사용하여 GPU에 작업을 오프로드합니다. 제대로 사용하면 애니메이션의 성능에 긍정적 인 영향을 줄 수 있습니다. 요소를 자체 레이어에 놓으려면 업그레이드해야합니다. 한 가지 방법은 CSS 속성을 ​​사용하는 것입니다. 이 속성을 사용하면 개발자가 브라우저가 요소를 변경하여 브라우저가 미리 필요한 최적화를 할 수 있도록 브라우저에 미리 경고 할 수 있습니다.

그러나 그러나 너무 많은 요소를 자신의 층으로 들어 올리거나 팽창시키는 것이 좋습니다. 실제로, 브라우저에서 생성 된 모든 레이어에는 메모리와 관리가 필요하므로 비용이 많이들 수 있습니다.

당신은

를 사용하는 방법, Nick Salloum의 CSS Will-Change 속성에 대한 소개에서 장점과 단점에 대해 더 배울 수 있습니다. 3 javaScript 애니메이션은 일반적으로 또는

를 사용하여 인코딩됩니다.

코드는 다음과 같습니다

이 작동하는 동안 콜백 함수가 프레임의 어느 시점에서 실행되기 때문에 지연의 위험이 높아서 끝에 하나 이상의 프레임이 누락 될 수 있기 때문에 지연의 위험이 높습니다. 오늘날, 당신은 라는 부드러운 웹 애니메이션 (Dom Animations, Canvases 등)을 위해 설계된 기본 JavaScript 방법을 사용할 수 있습니다.

브라우저에 가장 적합한 시간에 애니메이션 코드를 실행합니다. will-change 코드는 다음과 같습니다

var timer;
function animateElement() {
  timer = setInterval(function() {
    // 动画代码在此处
  }, 2000);
}

// 要停止动画，请使用 clearInterval
function stopAnimation() {
  clearInterval(timer);
}

itepoint에서 Tim Evko의 "requestAnimationFrame을 사용한 업데이트 성능"은 를 사용한 인코딩에 대한 훌륭한 비디오 소개를 제공합니다.

requestAnimationFrame() 4 코드의 애니메이션에서 이벤트를 분해합니다 초당 60 프레임으로 브라우저는 작업을 수행하기 위해 프레임 당 16.67ms 만 있습니다. 시간이 많지 않으므로 코드를 간소화하면 애니메이션의 유창함에 영향을 줄 수 있습니다.

스크롤, 크기 조정, 마우스 이벤트 및 기타 이벤트를 처리하는 코드의 디퍼 커플 링 코드는 이 최적화 팁 및 관련 샘플 코드에 대한 심층적 인 논의를 위해 Paul Lewis의 Create Create Create RequestAnimationFrame을 사용하여 더 얇고 강력하며 빠른 애니메이션을 확인하십시오. 5 브라우저는 기본 스레드를 사용하여 JavaScript를 실행하고 스타일 계산, 레이아웃 및 드로잉 작업과 같은 다른 작업을 실행합니다. 장기적으로 실행되는 JavaScript 코드는 이러한 작업에 부정적인 영향을 줄 수있어 프레임을 건너 뛰고 애니메이션 말더듬을 유발할 수 있습니다. 따라서 코드를 단순화하는 것은 애니메이션이 원활하게 실행되도록하는 좋은 방법입니다.
DOM에 액세스 할 필요가없는 복잡한 JavaScript 작업의 경우 웹 작업자 사용을 고려하십시오. 작업자 스레드는 사용자 인터페이스에 영향을 미치지 않고 작업을 수행합니다.
6. 브라우저 개발자 도구를 사용하여 성능 문제를 제어하십시오 브라우저의 개발자 도구는 JavaScript 코드 또는 타사 라이브러리를 실행하는 브라우저의 어려움을 모니터링하는 방법을 제공합니다. 또한 프레임 속도 등에 대한 실용적인 정보를 제공합니다.

웹 페이지를 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 확인을 선택하면 Chrome DevTools에 액세스 할 수 있습니다. 예를 들어, 성능 도구를 사용하여 웹 페이지를 녹음하면 해당 페이지의 성능 병목 현상에 대한 심도있게 이해할 수 있습니다. requestAnimationFrame()

"레코드"버튼을 클릭하고 몇 초 후에 녹음을 중지합니다.
이 시점에서 페이지의 성능을 분석하는 데 도움이되는 많은 데이터가 있어야합니다.

이 Chrome DevTools 안내서는 크롬 브라우저에서 성능 및 기타 여러 유형의 데이터를 분석하기 위해 DevTools를 최대한 활용하는 데 도움이됩니다. Chrome이 선택한 브라우저가 아니라면 오늘날 대부분의 최신 브라우저가 코드를 최적화하는 데 사용할 수있는 강력한 DevTools와 함께 제공되기 때문입니다.

7 이 기술은 특히 HTML5 캔버스 코드를 최적화하는 것과 관련이 있습니다.

프레임에 복잡한 드로잉 작업이 포함 된 경우 변경 사항이 발생할 때 모든 그리기 작업을 한 번 또는 한 번만 수행 한 다음 각 프레임에 오프 스크린 캔버스 만 그려야합니다.

MDN의 최적화 캔버스 기사 에서이 팁에 대한 자세한 정보 및 코드 예제 및 더 많은 정보를 찾을 수 있습니다.

결론
오늘날 네트워크에서 사용자의 기대에 부응하고 싶지 않다면 코드 성능을 최적화하는 것이 필요한 작업이지만 결코 쉬운 것은 아닙니다. 애니메이션 성능 저하에 대한 몇 가지 이유가있을 수 있지만 위에 나열된 팁을 사용하려고하면 가장 일반적인 애니메이션 성능 트랩을 피하고 웹 사이트 또는 앱의 사용자 경험을 향상시키는 데 큰 도움이됩니다.

javaScript 애니메이션의 FAQ (FAQ)는 지연이없는 JavaScript 애니메이션입니다 JavaScript 애니메이션에서 "Stuttering"의 개념은 무엇입니까? "Stutter"는 웹 사이트 나 응용 프로그램이 새로 고침 속도를 유지하지 못할 때 사용자가 보는 말더듬, 지터 또는 간단한 일시 중지를 나타냅니다. JavaScript 애니메이션에서 프레임 속도가 초당 표준 60 프레임보다 낮을 때 지연이 발생할 수 있습니다. 이로 인해 매끄러운 애니메이션이 덜 부드럽고 시각적으로 매력적이지 않아 사용자 경험에 부정적인 영향을 줄 수 있습니다.

부드러운 JavaScript 애니메이션을 보장하는 방법은 무엇입니까?

JavaScript 애니메이션을 부드럽게 만드는 것은 초당 60 프레임을 유지하기 위해 코드를 최적화하는 것입니다. 이를 통해 브라우저가 애니메이션을 최적화 할 수있는

메소드를 사용하여 달성 할 수 있습니다. 간단한 애니메이션에 CSS 전환 또는 애니메이션을 사용할 수도 있습니다. 또한 DOM 읽기 및 쓰기 작업을 함께 일괄하여 레이아웃 지터는 피합니다.

JavaScript 애니메이션에서 그 역할은 무엇입니까?

javaScript의

메소드는 부드러운 애니메이션을 만드는 핵심 도구입니다. 브라우저에 애니메이션이 실행되기를 원하는 브라우저에 지시하고 브라우저가 지정된 기능을 호출하여 다음 리판 전에 애니메이션을 업데이트하도록 요청합니다. 이 방법을 사용하면 브라우저가 애니메이션을 최적화 할 수 있으므로 더 부드럽고 효율적인 애니메이션이 생길 수 있습니다.

왜 CSS 전환이나 애니메이션이 JavaScript보다 더 효율적일 수 있습니까?

CSS 전환 및 애니메이션은 브라우저의 신시사이저 스레드에 의해 처리되고 기본 JavaScript 스레드에서 분리되기 때문에 JavaScript보다 더 효율적일 수 있습니다. 이것은 기본 스레드가 다른 작업으로 바쁘더라도 원활하게 실행할 수 있음을 의미합니다. 또한, 특정 속성은 다시 그리기를 일으키지 않고 CSS에서 애니메이션 할 수있어 특히 효율적으로 만듭니다.

레이아웃 지터는 무엇이며 JavaScript 애니메이션에서이를 피하는 방법은 무엇입니까?

레이아웃 지터는 DOM을 반복적으로 읽고 쓰는 JavaScript를 말해 브라우저가 레이아웃을 여러 번 다시 계산하여 비효율적이고 말더듬 애니메이션을 초래합니다. 이것은 DOM 읽기 및 쓰기 작업을 함께 일괄 처리함으로써 피할 수 있습니다. 예를 들어, 당신은 모든 읽기와 모든 쓰기를 인터리브 읽기와 쓰기 대신 할 수 있습니다.

속성 최적화 자바 스크립트 애니메이션을 사용하는 방법은 무엇입니까?

CSS의 will-change 속성을 ​​사용하면 요소에 대한 변경 사항 유형의 변경 사항을 미리 브라우저에 알릴 수 있으므로 적절한 최적화를 설정하기 전에 적절한 최적화를 설정할 수 있습니다. 이것은 애니메이션의 성능을 크게 향상시킬 수 있습니다. 그러나 과용으로 브라우저가 너무 많은 시간을 최적화 할 수 있으므로주의해서 사용하십시오.

JavaScript 애니메이션에서

및 will-change 속성은 무엇을 의미합니까?

css의 및

특성은 애니메이션에 특히 효율적입니다. 이러한 특성의 변경 사항은 레이아웃이나 그리기없이 브라우저의 신시사이저 스레드에 의해 처리 될 수 있기 때문입니다. 이것은 기본 JavaScript 스레드가 바쁘더라도 원활하게 실행될 수 있음을 의미합니다. transform 웹 작업자를 사용하여 JavaScript 애니메이션의 성능을 향상시키는 방법은 무엇입니까? opacity JavaScript의 웹 작업자를 사용하면 기본 실행 스레드와 별개로 스크립트를 백그라운드에서 실행할 수 있습니다. 즉, 메인 스레드를 차단하고 지연을 일으키지 않고 컴퓨팅 집약적 작업을 처리 할 수 ​​있습니다. 그러나 DOM 또는 일부 웹 API에 액세스 할 수없는 것과 같은 몇 가지 제한 사항이 있습니다.

"비 메인 스레드"애니메이션이란 무엇이며 JavaScript 애니메이션에 어떤 도움이됩니까?

"비 메인 스레드"애니메이션은 기본 JavaScript 스레드와 별도의 별도 스레드에서 애니메이션을 실행하는 것을 나타냅니다. 이렇게하면 기본 스레드가 바쁜 경우에도 원활하게 실행할 수 있으므로 애니메이션의 성능을 크게 향상시킬 수 있습니다. 이는 CSS 애니메이션, 웹 워커 또는 웹 애니메이션 API를 사용하여 달성 할 수 있습니다. transform 웹 애니메이션 API를 사용하여 효율적인 JavaScript 애니메이션을 만드는 방법은 무엇입니까? opacity 웹 애니메이션 API는 CSS 애니메이션만큼 효율적으로 수행되는 JavaScript를 사용하여 애니메이션을 만들 수있는 방법을 제공합니다. 이를 통해 JavaScript에서 직접 애니메이션을 제어하고 조작 할 수 있으므로 CSS 애니메이션보다 유연성이 높아집니다. 그러나 여전히 실험 기술이며 모든 브라우저에서 완전히 지원되지는 않습니다.

위 내용은 Jank-Free JavaScript 애니메이션에 대한 7 가지 성능 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!