angular.js - vue/react 渲染内容抖动
滿天的星座
滿天的星座 2017-05-15 17:06:43
0
3
695

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

滿天的星座
滿天的星座

Antworte allen(3)
巴扎黑

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

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

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

迷茫

使用 ng-cloakv-cloak,React 没用接触过不太清楚.

漂亮男人

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

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage