angular.js - vue/react 渲染内容抖动

问题描述

vue/react/angular框架等 渲染数据时，页面产生抖动，给用户一种不太友好的感觉，怎样消除这种抖动呢？

问题解答

第一种方法，再被渲染的区域预先放置loading提示，在渲染结束后隐藏/删除loading，显示正常内容。

第二种方法，给数据一个初始值，可以撑起页面样式，获取后再替换。

第二种方法的变形，从css上下手，让未渲染的部分可以显示且结构与渲染好后一致，渲染完成只改变对应的数据，不让页面结构发生改变。

使用 ng-cloak 和 v-cloak，React 没用接触过不太清楚.

除了第一答案的解决思路之外，还可以考虑同构，reactjs提供这样的方案，nodejs输出就是成型的页面，就不需要客户端在rerender一次了，也就没有闪一下得问题了。