异步接口渲染模板引起的页面抖动

Question

目前在做pc端的项目，后端只提供接口，前端来渲染页面。

在页面塞了一些空容器（容器并没有任何样式，没有高度），每个接口对应的模块，都有相应的容器。

每个接口响应的时间不同，当模板拿到异步请求后的数据并绑定数据，转化成HTML片断，把它们塞到页面对应容器中时，就会产生页面抖动现象。
原因就在于每个接口响应的时间不一致，而页面模块显示有先后顺序，后者可能会在前者渲染之前出现，这样就造成了抖动。

比如： 页面模块应当是A1、B2从上到下的显示顺序，但是B2模块的接口响应比A1快，于是可以看到B2模块先出来了，紧接着A1也出来了，这样就把B2给挤了下去。
对此，有什么好的解决方案吗？

promise方案会有阻塞。

Answer 1

比较好的办法就是页面里就已经知道A1、A2两个模块的高度，预留空间给A1。
通常来说除了列表外，大部分模块都是固定大小的，可以在CSS或者HTML中就把大小预置。
对于不能确定大小的模块，也可以采用动画的方式展示，比如A1载入完成显示时，A1显示成逐渐展开，逐渐把B2顶下去，形成一种动画过渡。

Answer 2

你可以等全部异步内容获取完毕了再一次性和全部渲染到页面里。

在这之前可以在页面未加载部分补充 loading 图来完全等待体验。

Answer 3

如果只是为了顺序不乱，那就获取到数据先缓存着，前端自己写个顺序加载器。

每个模块只有前面的都获取到数据并且加载了后再加载。