文章詳情頁
angular.js - vue/react 渲染內容抖動
瀏覽：414日期：2024-03-14 17:26:45
問題描述
vue/react/angular框架等 渲染數據時，頁面產生抖動，給用戶一種不太友好的感覺，怎樣消除這種抖動呢？
問題解答
回答1：第一種方法，再被渲染的區域預先放置loading提示，在渲染結束后隱藏/刪除loading，顯示正常內容。
第二種方法，給數據一個初始值，可以撐起頁面樣式，獲取后再替換。
第二種方法的變形，從css上下手，讓未渲染的部分可以顯示且結構與渲染好后一致，渲染完成只改變對應的數據，不讓頁面結構發生改變。
回答2：使用 ng-cloak 和 v-cloak，React 沒用接觸過不太清楚.
回答3：除了第一答案的解決思路之外，還可以考慮同構，reactjs提供這樣的方案，nodejs輸出就是成型的頁面，就不需要客戶端在rerender一次了，也就沒有閃一下得問題了。
標簽：
vue
上一條：vue.js - Vue 如何像Angular.js watch 一樣監聽數據變化下一條：html - angularjs中用ng-repeat生成幾個radio，怎么設置radio的默認選中項？
相關文章：
1. 這是什么情況？？？2. 求救一下，用新版的phpstudy，數據庫過段時間會消失是什么情況？3. 百度地圖api - Android百度地圖SDK，MapView上層按鈕可見卻不可觸，怎么解決？4. 關于純用css寫導航鼠標移入事件的問題？5. 微信小程序支持跳轉到外部鏈接網頁嗎6. webgl - android上類似汽車之家的3d全景照片怎么實現7. 前端 - 請問display: -webkit-flex;是什么意思？8. PHP類封裝的插入數據，總是插入不成功，返回false；9. 網頁爬蟲 - 如何使用使用java抓取信息并制作一個排名系統？10. javascript - angular錨點問題
排行榜
網公網安備