問(wèn)題描述

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

問(wèn)題解答

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

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

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

使用 ng-cloak 和 v-cloak，React 沒(méi)用接觸過(guò)不太清楚.

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