CSS의 will-change 속성에 대해 자세히 알아보세요.

CSS will-change 속성이 무엇인가요? 그것을 사용하는 방법? 이 기사에서는 will-change 속성을 연구하여 언제 사용해야 하는지, 어떻게 사용하는지, CSS에서 will-change를 더 잘 설정하는 방법을 살펴보겠습니다.

will-change

CSS 속성 will-change는 웹 개발자에게 요소에 어떤 변경 사항이 적용될지 알려주는 방법을 제공하므로 브라우저는 요소 속성보다 먼저 변경할 수 있습니다. 실제로 변경됩니다. 해당 최적화 준비 작업이 잘 수행되었습니다. 이러한 종류의 최적화를 통해 복잡한 계산 작업의 일부를 미리 준비할 수 있으므로 페이지 응답이 더 빠르고 민감해집니다.

IMPORTANT: will-change는 기존 성능 문제를 처리하려고 할 때 최후의 수단으로 사용하기 위한 것입니다. 성능 문제를 예측하는 데 사용해서는 안 됩니다.

ReplacetranslateZ() Hack

예를 들어 CSS 3D 변환을 사용하여 화면의 요소를 이동할 때 요소와 해당 콘텐츠가 "레이어"로 리프트되어 요소와 독립적으로 렌더링될 수 있습니다. 페이지의 나머지 부분을 나중에 합성했습니다. 이는 콘텐츠 렌더링을 분리하고 요소의 변환이 프레임 간에 변경되는 유일한 콘텐츠인 경우 페이지의 나머지 부분을 다시 렌더링할 필요가 없도록 하며 종종 상당한 속도 이점을 제공합니다.

그러나 새 레이어에 요소를 설정하는 것은 상대적으로 비용이 많이 드는 작업이므로 변환 애니메이션의 시작을 눈에 띄게 1초 정도 지연시킬 수 있습니다.

CSS 변환 및 기타 CSS 작업을 사용할 때 이러한 종류의 지연을 방지하기 위해 우리는 오랫동안 TranslateZ(또는 때로는 Translate3d)를 사용하여 요소를 자체 레이어로 들어 올려 하드웨어 가속 작업을 활성화하여 더 부드럽고 더 빠르고 결함이 없는 작업을 가능하게 했습니다. . 그러나 "translateZ()(또는translate3d()) 해킹"이라고도 알려진 이 기술에는 대가가 따릅니다. Paul Lewis는 이에 대해 매우 유용한 게시물을 썼습니다. 이 기술을 사용한다면 꼭 확인해야 합니다. will-change는 이 핵이나 다른 핵에 의존하지 않고도 애니메이션을 최적화할 수 있도록 하기 위한 것입니다.

(학습 동영상 공유: css 동영상 튜토리얼)

쉼표로 구분됨

원하는 속성의 이름을 지정하여 요소의 스크롤 위치를 변경하려고 한다고 브라우저에 선언할 수 있습니다. 변경(쉼표로 구분), 내용 또는 하나 이상의 CSS 속성 값. 대부분의 속성은 사용자 에이전트가 대부분의 속성 변경에 대해 특별한 최적화를 수행하지 않기 때문에 지정해도 아무런 영향을 미치지 않습니다. 그러나 전혀 효과가 없더라도 이를 지정하는 것은 여전히 ​​안전합니다.

요소의 여러 값/측면을 변경할 것으로 예상하거나 계획하는 경우 쉼표로 구분된 값 목록을 제공할 수 있습니다. 쉼표로 구분된 값 목록에는 미리 정의된 키워드 및/또는 속성 이름이 포함될 수 있습니다. (아래 예제 섹션을 참조하십시오.)

스태킹 컨텍스트 및 포함 블록의 추가 생성

선언한 속성의 초기 값이 아닌 값이 요소에 대한 스태킹 컨텍스트를 생성하는 경우 will-change에서 이를 지정하십시오. 속성은 요소에 스택 컨텍스트를 생성해야 합니다. 예를 들어 불투명도를 1 이외의 값으로 설정하면 요소에 쌓임 컨텍스트가 생성됩니다. 따라서 will-change: opacity를 설정하면 불투명도가 여전히 1인 경우에도 스태킹 컨텍스트도 생성됩니다.

마찬가지로, 속성의 초기값이 아닌 값으로 인해 요소가 고정 위치 요소에 대한 포함 블록을 생성하게 되는 경우 will-change에 속성을 지정하면 요소가 고정 위치 요소에 대한 포함 블록을 생성해야 합니다.

will-change 속성은 위에서 언급한 스택 컨텍스트 및 포함 블록 생성 외에 지정하는 요소에 직접적인 영향을 미치지 않습니다. 이는 사용자 에이전트에 대한 렌더링 힌트일 뿐이며 특정 유형의 변경이 실제로 시작될 때까지 기다릴 수 있습니다. 잠재적으로 비용이 많이 드는 최적화를 이전에 설정하십시오.

주의해서 사용하세요

그런데 이 속성을 주의해서 사용해야 한다는 점을 아는 것이 중요합니다. 다양한 브라우저는 will-change의 정보를 다양한 방식으로 사용할 수 있으며 단일 브라우저라도 시점에 따라 해당 정보를 다양한 방식으로 사용할 수 있습니다. 이를 과도하게 사용하면 해당 명령문이 완전히 무시될 수 있습니다. 예를 들어 요소에 will-change 가 있을 때 요소를 자체 "GPU 레이어"로 승격시키는 브라우저입니다. 그러나 요소 선언이 너무 많으면 브라우저는 GPU 메모리 부족을 방지하기 위해 선언을 무시합니다.

또한 요소가 가까운 미래에(예: 몇 분의 1초 내에) 변경될 것으로 알려지거나 예상되지 않는 한 will-change를 사용해서는 안 됩니다. 더 이상 필요하지 않으면 설정을 해제해야 합니다.

실제로 변경되는 요소에서 실제로 변경할 속성으로 will-change를 설정합니다. 멈추면 제거하세요. - Tab Atkins Jr.(사양 편집기)

향후 변경 사항에 대한 브라우저 최적화는 종종 비용이 많이 들고 앞서 언급한 것처럼 시스템 리소스를 매우 많이 사용합니다. 일반적인 브라우저 최적화 동작은 이러한 최적화를 제거하고 가능한 한 빨리 정상적인 동작으로 돌아가는 것입니다. 그러나 will-change는 이 동작을 재정의하여 브라우저가 최적화하는 것보다 더 오랫동안 최적화를 유지합니다.

따라서 요소 변경이 완료된 후에는 항상 will-change를 제거하여 브라우저가 선언된 모든 리소스 최적화를 재개할 수 있도록 해야 합니다.

JavaScript로 will-change 설정

JavaScript를 통해 will-change를 설정하면 더 세밀하게 제어할 수 있고, 브라우저가 변경 사항을 준비하는 데 더 많은 시간을 할애할 수 있으며, 설정이 완료되자마자 설정을 취소할 수도 있습니다. 애니메이션 이벤트가 종료됩니다. JavaScript를 사용하면 브라우저에 대한 변경 사항을 선언한 다음 변경이 완료될 때 수신 대기하여 변경이 완료되면 will-change를 제거합니다.

예를 들어 요소(또는 그 조상)에 마우스를 올려 놓으면 마우스 입력 시 will-change를 설정할 수 있습니다. 요소가 애니메이션되는 경우 DOM 이벤트 animationEnd를 사용하여 애니메이션이 끝나는 시점을 수신한 다음 animationEnd가 실행된 후 will-change를 제거할 수 있습니다.

// Rough generic example
// Get the element that is going to be animated on click, for example
var el = document.getElementById('element');

// Set will-change when the element is hovered
el.addEventListener('mouseenter', hintBrowser);
el.addEventListener('animationEnd', removeHint);

function hintBrowser() {
	// The optimizable properties that are going to change
	// in the animation's keyframes block
	this.style.willChange = 'transform, opacity';
}

function removeHint() {
	this.style.willChange = 'auto';
}

css에서 will-change를 설정하는 것이 더 좋습니다

스타일시트에 will-change를 설정하여 마우스를 올리면 변경될 수 있는 요소를 최적화하고 싶다면 브라우저에 최적화를 원한다고 알리세요. 마우스 오버 시 발생하는 변경 사항에 대해 다음을 수행할 수 있습니다.

.el:hover {
    will-change: transform;
    transform: rotate()...;
}

이는 특별히 버그가 있는 것은 아니지만 특별히 유용하지도 않습니다. 변경이 발생할 때가 아니라 변경이 실제로 발생하기 얼마 전에 브라우저에 의도를 선언하여 변경을 준비하고 필요한 최적화를 수행할 시간을 주어야 합니다. 따라서 이와 같은 시나리오에서는 다음과 같이 할 수 있습니다:

.el {
    will-change: transform;
}

.el:hover {
    transform: rotate()...;
}

또는 요소의 컨테이너를 가리키면 will-change를 설정할 수 있습니다. 호버 이벤트가 요소 자체에 도달하는 데 시간이 걸리기 때문입니다. 브라우저는 그 시간을 사용할 수 있습니다. 요소 자체에 대한 변경을 준비합니다:

.container:hover .el {
    will-change: transform;
}

.el:hover {
    transform: rotate()...;
}

요약하자면, will-change를 아껴서 사용하는 것을 기억하고, 과도하게 사용하지 말고, 요소가 곧 변경될 것을 알 때에만 설정하고, 다음을 기억하세요. 변경이 완료된 후 설정을 해제하세요.

공식 구문

• 명령문:

will-change: auto | <animateable-feature>#

여기서

<animateable-feature> = scroll-position | contents | <custom-ident>

태그(#)는 쉼표로 구분된 여러 값을 지정할 수 있음을 의미합니다.

• 초기값: auto
• 적용 대상: 모든 요소
• 애니메이션: No

값 ​​

auto

이것이 기본값입니다. 특별한 의도는 없습니다. 브라우저는 변경 사항에 대한 알림을 받지 않으므로 향후 변경 사항을 수용하기 위한 최적화를 수행하지 않습니다.

scroll-position

은 작성자가 가까운 미래에 요소의 스크롤 위치에 애니메이션을 적용하거나 변경하려고 함을 나타냅니다. 브라우저는 이러한 변경 사항에 대해 사전에 적절하게 최적화됩니다.

예를 들어, 브라우저는 스크롤 가능한 요소의 "스크롤 창"에 있는 콘텐츠와 이미 창을 통과한 콘텐츠만 렌더링하는 경우가 많습니다. 따라서 스크롤을 더 보기 좋게 만들기 위해 렌더링을 건너뛰어 절약된 시간과 메모리의 균형을 맞춥니다. 브라우저는 이 값을 신호로 사용하여 렌더링된 스크롤 창 주위의 콘텐츠 범위를 확장하여 더 길고 빠른 스크롤이 원활하게 이루어질 수 있도록 합니다.

contents

는 작성자가 가까운 시일 내에 요소의 내용을 애니메이션으로 만들거나 변경하려는 내용을 나타냅니다. 브라우저는 이러한 변경 사항에 대해 사전에 적절하게 최적화됩니다.

예를 들어, 대부분의 요소는 자주 변경되지 않거나 위치만 변경되기 때문에 브라우저는 시간이 지남에 따라 요소 렌더링을 "캐시"하는 경우가 많습니다. 그러나 요소가 콘텐츠를 정기적으로 변경하는 경우 이 캐시를 생성하고 유지하는 것은 시간 낭비입니다. 브라우저는 이 값을 요소에 대해 덜 공격적으로 캐시하거나 전혀 캐싱을 피하고 계속해서 요소를 처음부터 다시 렌더링하라는 신호로 사용할 수 있습니다.

<custom-ident>(<user-ident>)<custom-ident> (<user-ident>)

<custom-ident> 值（有关详细信息，请参阅 <custom-ident> 条目）。 表示作者希望在不久的将来对元素上具有给定名称的属性进行动画处理或更改。

例如，浏览器通常将设置有非初始值 transform 属性的元素和其他元素区分开，可能将它们渲染到自己的“GPU 层”，或者使用其他机制来更容易的快速的进行变换。浏览器可能会将 transform

🎜<custom-ident> 값(관련 자세한 내용은 <custom-ident>를 참조하세요. 항목). 작성자가 가까운 시일 내에 요소에 지정된 이름을 가진 속성에 애니메이션을 적용하거나 변경하려고 함을 나타냅니다. 🎜🎜예를 들어, 브라우저는 초기화되지 않은 transform 속성이 설정된 요소를 다른 요소와 구별하는 경우가 많습니다. 이를 자체 "GPU 레이어"로 렌더링하거나 다른 메커니즘을 사용하여 더 쉽게 변경할 수 있습니다. . 브라우저는 이전 레이어와 새 레이어와 관련된 재렌더링을 피하기 위해 요소가 변형을 시작하기 직전에 요소를 자체 레이어로 승격해야 한다는 신호로 transform 값을 취할 수 있습니다. . 지연. 🎜

除了通常从 <custom-ident> 中排除的关键字之外，<custom-ident> 值不能是以下关键字之一：will-change、none、all、auto、scroll-position 和 contents。

请注意，大多数属性在指定时将不起作用，因为用户代理不会对大多数属性的更改执行任何特殊优化。不过，指定它们仍然是安全的，虽然它根本没有效果。

注：感觉虽然命名为『自定义标志』, 其实主要碰到的还是 css 预定义好的标志，譬如 transform、opacity

例子

下面告诉浏览器期望元素的变换属性发生变化，以便提前进行适当的优化。

.el {
    will-change: transform;
}

上面的 will-change 声明应该通过 JavaScript 添加，然后在更改结束后删除或取消设置 (will-change: auto)。

以下所有的都是可能且有效的 will-change 值：

will-change: contents;
will-change: scroll-position;
will-change: opacity;/* multiple comma-separated values */will-change: contents, transform;
will-change: scroll-position, opacity;

使用小结

想使用好 will-change 并不是太容易，以下使用忠告摘录于官方文档，可见真是太难了。

• 不要将 will-change 应用到太多元素上： 浏览器已经尽力尝试去优化一切可以优化的东西了。有一些更强力的优化，如果与 will-change 结合在一起的话，有可能会消耗很多机器资源，如果过度使用的话，可能导致页面响应缓慢或者消耗非常多的资源。

• 有节制地使用： 通常，当元素恢复到初始状态时，浏览器会丢弃掉之前做的优化工作。但是如果直接在样式表中显式声明了 will-change 属性，则表示目标元素可能会经常变化，浏览器会将优化工作保存得比之前更久。所以最佳实践是当元素变化之前和之后通过脚本来切换 will-change 的值。

• 不要过早应用 will-change 优化： 如果你的页面在性能方面没什么问题，则不要添加 will-change 属性来榨取一丁点的速度。 will-change 的设计初衷是作为最后的优化手段，用来尝试解决现有的性能问题。它不应该被用来预防性能问题。过度使用 will-change 会导致大量的内存占用，并会导致更复杂的渲染过程，因为浏览器会试图准备可能存在的变化过程。这会导致更严重的性能问题。

• 给它足够的工作时间准备，不要过迟应用： 这个属性是用来让页面开发者告知浏览器哪些属性可能会变化的。然后浏览器可以选择在变化发生前提前去做一些优化工作。所以给浏览器一点时间去真正做这些优化工作是非常重要的。使用时需要尝试去找到一些方法提前一定时间获知元素可能发生的变化，然后为它加上 will-change 属性。

更多编程相关知识，请访问：编程视频！！

위 내용은 CSS의 will-change 속성에 대해 자세히 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!