异步接口渲染模板引起的页面抖动
目前在做pc端的项目，后端只提供接口，前端来渲染页面。
在页面塞了一些空容器（容器并没有任何样式，没有高度），每个接口对应的模块，都有相应的容器。
每个接口响应的时间不同，当模板拿到异步请求后的数据并绑定数据，转化成HTML片断，把它们塞到页面对应容器中时，就会产生页面抖动现象。
原因就在于每个接口响应的时间不一致，而页面模块显示有先后顺序，后者可能会在前者渲染之前出现，这样就造成了抖动。
比如： 页面模块应当是A1、B2从上到下的显示顺序，但是B2模块的接口响应比A1快，于是可以看到B2模块先出来了，紧接着A1也出来了，这样就把B2给挤了下去。
对此，有什么好的解决方案吗？
promise方案会有阻塞。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
比较好的办法就是页面里就已经知道A1、A2两个模块的高度，预留空间给A1。
通常来说除了列表外，大部分模块都是固定大小的，可以在CSS或者HTML中就把大小预置。
对于不能确定大小的模块，也可以采用动画的方式展示，比如A1载入完成显示时，A1显示成逐渐展开，逐渐把B2顶下去，形成一种动画过渡。
你可以等全部异步内容获取完毕了再一次性和全部渲染到页面里。
在这之前可以在页面未加载部分补充 loading 图来完全等待体验。
如果只是为了顺序不乱，那就获取到数据先缓存着，前端自己写个顺序加载器。
每个模块只有前面的都获取到数据并且加载了后再加载。