hippy hippy框架

近两年，信息流行业面临增长缓慢甚至停滞的状态，腾讯看点一直在探索破局之路。他们发现，实现爆发增长的业务都具有用户覆盖面大、差异化小的普适特点。

内容普适性的实现，主要依赖两类内容：一类是用于打发时间、放松解压的搞笑内容；另一类是围绕明星八卦、话题谈资的热点内容。这两类内容因其低门槛、快消费、易传播的特点，受到广大用户的喜爱。

为了更好地服务用户，他们将内容消费场景放在了信息流中。这种新的内容形态被称为“短内容”，由短内容构成的信息流被称为“短内容页面”。

用户体验在C端页面中尤为重要，尤其是首屏体验，它奠定了用户的第一印象。“性能优化/首屏优化”常作为前端人的重要研究课题。短内容页面的首屏体验如何，是值得我们探讨的问题。

1. 白屏时间长：指的是打开新页面时屏幕中没有任何有意义的内容，只有无休无止的空白。这主要是由于页面崩溃、网络资源加载较慢、页面启动卡顿等原因造成的。大多数用户可以忍受1000ms以内的白屏时间，超过这个时间，用户会越来越无法忍受。

3. 页面过渡僵硬：即从推荐流进入短内容页面的过程过于生硬，给用户带来不好的体验。

针对这三个问题，腾讯看点团队进行了深入的探讨和优化。

对于白屏时间长的问题，他们从页面启动和数据加载两个方面进行优化。在页面启动阶段，他们分析了加载bundle的时间与bundle体积的正相关关系，通过减少bundle的体积来加速加载速度。对于数据加载阶段，他们进行了数据预加载，即当短内容页面的被点击时，预先缓存第一刷的数据，从而减少数据拉取的耗时。

至于页面过渡僵硬的问题，他们采用了“侧滑”的过渡动画，即短内容页面从右往左切到浏览器的前台，这样可以使页面间的切换更加流畅，提升用户体验。

深入观察耗时分布的变迁，我们可以发现显著的优化效果。在未进行优化之前，FMP的响应时间在0.5秒以内的访问比例竟为0%，1秒内仅占2%，而2秒内也只占据了39%的比例。当数据预加载功能被引入后，FMP的访问情况得到了极大的改善。具体数据表明，在0.5秒内，FMP的访问占比提升至了44%，1秒内达到了82%，而到了2秒时，已占到了惊人的97%。再进一步地，当bundle预加载也被引入后，FMP的访问速度又得到了进一步的提升。数据显示，在0.5秒内，FMP的访问占比已经达到了59%，在1秒内更是达到了87%，而到了2秒时，几乎所有的访问都得到了响应，占比高达98%。这一系列的数字变化，无疑证明了优化措施的显著效果。