angular.js - vue/react 渲染内容抖动

Question

vue/react/angular框架等 渲染数据时，页面产生抖动，给用户一种不太友好的感觉，怎样消除这种抖动呢？

Answer 1

첫 번째 방법은 렌더링된 영역에 로딩 프롬프트를 미리 배치하고, 렌더링 후 로딩을 숨기거나 삭제하고, 정상적인 콘텐츠를 표시하는 것입니다.

두 번째 방법은 데이터에 페이지 스타일을 지원할 수 있는 초기값을 부여한 후 이를 얻은 후 교체하는 것입니다.

두 번째 방법의 변환은 CSS에서 시작하므로 렌더링되지 않은 부분을 표시할 수 있으며 렌더링이 완료된 후에는 해당 데이터만 변경되고 페이지 구조는 변경되지 않습니다.

Answer 2

사용ng-cloak 和 v-cloak, React를 접해본 적이 없어서 잘 모르겠습니다.

Answer 3

첫 번째 답변의 솔루션 외에도 동형성을 고려할 수도 있습니다. Reactjs는 이러한 솔루션을 제공합니다. nodejs의 출력은 클라이언트가 한 번 다시 렌더링할 필요가 없으며 깜박이는 문제도 없습니다. .