問題描述

vue/react/angular框架等 渲染數(shù)據(jù)時，頁面產(chǎn)生抖動，給用戶一種不太友好的感覺，怎樣消除這種抖動呢？

問題解答

第一種方法，再被渲染的區(qū)域預先放置loading提示，在渲染結束后隱藏/刪除loading，顯示正常內(nèi)容。

第二種方法，給數(shù)據(jù)一個初始值，可以撐起頁面樣式，獲取后再替換。

第二種方法的變形，從css上下手，讓未渲染的部分可以顯示且結構與渲染好后一致，渲染完成只改變對應的數(shù)據(jù)，不讓頁面結構發(fā)生改變。

使用 ng-cloak 和 v-cloak，React 沒用接觸過不太清楚.

除了第一答案的解決思路之外，還可以考慮同構，reactjs提供這樣的方案，nodejs輸出就是成型的頁面，就不需要客戶端在rerender一次了，也就沒有閃一下得問題了。