vue/react/angular框架等 渲染資料時,頁面產生抖動,給使用者一種不太友善的感覺,怎麼消除這種抖動呢?
第一個方法,再渲染的區域預先放置loading提示,在渲染結束後隱藏/刪除loading,顯示正常內容。
第二種方法,給資料一個初始值,可以撐起頁面樣式,取得後再替換。
第二種方法的變形,從css上下手,讓未渲染的部分可以顯示且結構與渲染好後一致,渲染完成只改變對應的數據,不讓頁面結構改變。
使用 ng-cloak 和 v-cloak,React 沒用接觸過不太清楚.
ng-cloak
v-cloak
除了第一答案的解決思路之外,還可以考慮同構,reactjs提供這樣的方案,nodejs輸出就是成型的頁面,就不需要客戶端在rerender一次了,也就沒有閃一下得問題了。
第一個方法,再渲染的區域預先放置loading提示,在渲染結束後隱藏/刪除loading,顯示正常內容。
第二種方法,給資料一個初始值,可以撐起頁面樣式,取得後再替換。
第二種方法的變形,從css上下手,讓未渲染的部分可以顯示且結構與渲染好後一致,渲染完成只改變對應的數據,不讓頁面結構改變。
使用
ng-cloak
和v-cloak
,React 沒用接觸過不太清楚.除了第一答案的解決思路之外,還可以考慮同構,reactjs提供這樣的方案,nodejs輸出就是成型的頁面,就不需要客戶端在rerender一次了,也就沒有閃一下得問題了。