文章詳情頁
angular.js - vue/react 渲染內容抖動
瀏覽:149日期: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. vue.js - 關于Vue-cli項目在VPS中用Nginx部署完請求頁面app.js找不到提示404錯誤。2. javascript - 一個是數組,一個是對象,怎么進行比較去重?3. mysql優化 - mysql update和delete和insert 操作多條數據的背后情況4. 遍歷目錄下的所有文件5. 關于docker下的nginx壓力測試6. docker-machine添加一個已有的docker主機問題7. docker鏡像push報錯8. angular.js - angular內容過長展開收起效果9. nignx - docker內nginx 80端口被占用10. docker安裝后出現Cannot connect to the Docker daemon.
排行榜
