天猫的商品列表页渲染问题

clipboard.png

https://pages.tmall.com/wow/c...

链接如上,在调慢网速的时候有上面这个截图的问题,页面没有数据。。

预先生成模板站位再填装数据??具体处理和机制是怎么个回事??

阅读 2.3k
3 个回答

首先,你解决的情况的大前提是,数据从网络中获取。

于是你需要考虑网络获取数据,是一个异步过程,那么异步过程中如果现实白屏,那么用户界面的展示会相当的不友好。

于是出现了预先显示的界面,也就是你现在说的没有数据的界面。

为什么呢?

因为无论是网络好,还是网络差,其实你都不止渲染了一次界面。只是在网络差的时候,这种情况可以被你观察到,以为最新的界面数据返回的比较慢。

所以这里预先生成模板站位仅仅是请求数据还没回来的时候,你填充默认数据

常说图片懒加载,用本地默认图片和正式图片切换的方式,数据也可以同样的道理,默认数据和真实数据的替换。

请求数据是异步的,需要一定的时间,网速慢的时候这个时间就更久,为了在拿不到数据的时候让页面看起来正常一些,是需要一些写死的模板数据存放着的,也就是截图里看到的那样,等异步请求完成再进行数据的替换

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题