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

Question

目前在做pc端的项目，后端只提供接口，前端来渲染页面。在页面塞了一些空容器（容器并没有任何样式，没有高度），每个接口对应的模块，都有相应的容器。每个接口响应的时间不同，当模板拿到异步请求后的数据并绑定数据，转化成HTML片断，把它们塞到页面对应容器中时，就会产生页面抖动现象。原因就在于每个接口响应的时间不一致，而页面模块显示有先后顺序，后者可能会在前者渲染之前出现，这样就造成了抖动。比如： 页面模块应当是A1、B2从上到下的显示顺序，但是B2模块的接口响应比A1快，于是可以看到B2模块先出来了，紧接着A1也出来了，这样就把B2给挤了下去。对此，有什么好的解决方案吗？promise方案会有阻塞

Answer 1

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