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

Question

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

Answer 1

Kaedah pertama ialah meletakkan gesaan pemuatan di kawasan yang diberikan terlebih dahulu, sembunyikan/padamkan pemuatan selepas pemaparan dan paparkan kandungan biasa.

Kaedah kedua ialah memberikan data nilai awal, yang boleh menyokong gaya halaman, dan kemudian menggantikannya selepas memperolehnya.

Transformasi kaedah kedua bermula dari CSS, supaya bahagian yang tidak dirender boleh dipaparkan dan strukturnya konsisten dengan itu selepas rendering selesai, hanya data yang sepadan ditukar dan struktur halaman tidak diubah .

Answer 2

Gunakan ng-cloak dan v-cloak, saya tidak mempunyai pengalaman dengan React jadi saya tidak tahu.

Answer 3

Selain penyelesaian dalam jawapan pertama, anda juga boleh mempertimbangkan isomorphism menyediakan penyelesaian seperti itu daripada berkelip.