이들은 모두 언급했듯이 경고입니다. 그러나 이러한 문제를 해결하는 데 관심이 있다면 먼저 경고의 원인을 식별해야합니다. 강제 리플 로우 경고를받을 수있는 이유는 없습니다. 누군가가 몇 가지 가능한 옵션에 대한 목록 을 작성했습니다 . 자세한 내용은 토론을 따라갈 수 있습니다.
가능한 이유는 다음과 같습니다.

레이아웃 / 리플 로우를 강제하는 요인

JavaScript로 요청 / 불러올 때 아래의 모든 속성 또는 메서드는 브라우저가 스타일과 레이아웃을 동기식으로 계산하도록 트리거합니다 *. 이것을 리플 로우 또는 레이아웃 스 래싱 이라고도하며 일반적인 성능 병목 현상입니다.

요소

박스 메트릭

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight,elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth,elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()

물건 스크롤

• elem.scrollBy(), elem.scrollTo()
• elem.scrollIntoView(), elem.scrollIntoViewIfNeeded()
• elem.scrollWidth, elem.scrollHeight
• elem.scrollLeft, elem.scrollTop또한 그들을 설정

초점

• elem.focus()이중 강제 레이아웃을 트리거 할 수 있습니다 ( source )

또한…

• elem.computedRole, elem.computedName
• elem.innerText( 소스 )

getComputedStyle

window.getComputedStyle()일반적으로 스타일 재 계산을 강제합니다 ( source )

window.getComputedStyle() 다음 중 하나라도 해당되면 레이아웃을 강제합니다.

1. 요소는 그림자 트리에 있습니다
2. 미디어 쿼리 (뷰포트 관련 쿼리)가 있습니다. 즉, 다음 중 하나 : ( 소스 ) * min-width, min-height, max-width, max-height, width, height * aspect-ratio, min-aspect-ratio,max-aspect-ratio
   • device-pixel-ratio, resolution,orientation
3. 요청 된 속성은 다음 중 하나입니다. ( source )
   • height, width * top, right, bottom, left * margin[ -top, -right, -bottom, -left, 또는 속기 ] 마진이 고정되어있는 경우에만. * padding[ -top, -right, -bottom, -left, 또는 속기 ] 패딩이 고정되어있는 경우에만. *transform ,
     transform-origin, perspective-origin * translate, rotate,
     scale * webkit-filter, backdrop-filter * motion-path,
     motion-offset, motion-rotation * x, y, rx,ry

창문

• window.scrollX, window.scrollY
• window.innerHeight, window.innerWidth
• window.getMatchedCSSRules() 힘만 스타일

양식

• inputElem.focus()
• inputElem.select(), textareaElem.select()( 소스 )

마우스 이벤트

• mouseEvt.layerX, mouseEvt.layerY, mouseEvt.offsetX, mouseEvt.offsetY
  ( 원 )

문서

• doc.scrollingElement 힘만 스타일

범위

• range.getClientRects(), range.getBoundingClientRect()

SVG

• 꽤 많이; 철저한 목록을 작성하지는 않았지만 Tony Gentilcore의 2011 Layout Triggering List
  는 몇 가지를 지적했습니다.

편집 가능한

• … 이미지를 클립 보드에 복사하는 것을 포함하여 많은 것들 ( source )

더 확인 여기서 하십시오 .

또한 원래 문제 의 Chromium 소스 코드 와 성능 API에 대한 토론이 있습니다. 경고 대한 설명이 있습니다.

편집 : Google PageSpeed ​​Insight 에서 레이아웃 리플 로우를 최소화하는 방법에 대한 기사도 있습니다. . 브라우저 리플 로우가 무엇인지 설명합니다.

리플 로우는 문서의 일부 또는 전부를 다시 렌더링하기 위해 문서에서 요소의 위치와 형상을 다시 계산하기위한 웹 브라우저 프로세스의 이름입니다. 리플 로우는 브라우저에서 사용자 차단 작업이므로 개발자가 리플 로우 시간을 개선하는 방법을 이해하고 리플 로우에 대한 다양한 문서 속성 (DOM 깊이, CSS 규칙 효율성, 다양한 유형 변경)의 영향을 이해하는 것이 유용합니다. 시각. 때로는 문서에서 단일 요소를 리플 로우하려면 부모 요소와 그 뒤에 오는 모든 요소를 ​​리플 로우해야 할 수 있습니다.

또한 최소화하는 방법에 대해 설명합니다.

1. 불필요한 DOM 깊이를 줄입니다. DOM 트리에서 한 수준에서 변경하면 모든 트리 수준에서 루트까지, 수정 된 노드의 자식까지 변경 될 수 있습니다. 이로 인해 리플 로우 수행에 더 많은 시간이 소요됩니다.
2. CSS 규칙을 최소화하고 사용하지 않는 CSS 규칙을 제거하십시오.
3. 애니메이션과 같이 복잡한 렌더링을 변경하는 경우 흐름에서 벗어나십시오. 이를 위해 위치 절대 또는 위치 고정을 사용하십시오.
4. 선택기 일치를 수행하는 데 더 많은 CPU 성능이 필요한 불필요한 복잡한 CSS 선택기 (특히 하위 선택기)를 피하십시오.

답변

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-utils/0.1.1/angular-ui-utils.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-aria.min.js"></script>

search.addEventListener('keyup', function() {
    for (const node of nodes)
        if (node.innerText.toLowerCase().includes(this.value.toLowerCase()))
            node.classList.remove('hidden');
        else
            node.classList.add('hidden');
});

search.addEventListener('keyup', function() {
    const nodesToHide = [];
    const nodesToShow = [];
    for (const node of nodes)
        if (node.innerText.toLowerCase().includes(this.value.toLowerCase()))
            nodesToShow.push(node);
        else
            nodesToHide.push(node);

    nodesToHide.forEach(node => node.classList.add('hidden'));
    nodesToShow.forEach(node => node.classList.remove('hidden'));
});

var resolvedPromise = typeof Promise == 'undefined' ? null : Promise.resolve();
var nextTick = resolvedPromise ? function(fn) { resolvedPromise.then(fn); } : function(fn) { setTimeout(fn); };

nextTick(function() {
  // your code
});