铅中毒事件

首页 » 常识 » 诊断 » 腾讯新闻React同构直出优化实践
TUhjnbcbe - 2021/4/6 18:32:00
北京治疗白癜风哪最好 https://jbk.39.net/yiyuanzaixian/bjzkbdfyy/

开发者(KaiFaX)

面向开发者、程序员的专业平台!为什么做直出

就是为了“性能”!!!

按照经验来说,直出,能够减少0%-50%不等的首屏时间,因此尽管增加一定维护成本,前端们还是前赴后继地在搞直出。

除此之外,有些特定的业务做直出能够弥补前后端分离带来的SEO问题。像这次选取的腾讯新闻,大多数页面首屏其实都是直出的(但肯定不是React直出)。

性能指标

刚提到的首屏时间,只是单纯内容的渲染,另外还有首屏可交互时间,即除了内容渲染之余,还能够让用户能够对首屏的内容进行交互,如点击、滚动等等。现在市面上有关React的性能报告,尤其是那些截了Chrome渲染映像的,都归到首屏时间。

为什么选择腾讯新闻

我并非腾讯新闻的业务相关方,可以比较大胆地作为例子使用

腾讯新闻页面更为丰富,可以做更多场景的实践

验证全套脱胎手Q家校群react的优化策略、实践方案和开发工具

由于只是实验,数据都是拉取腾讯新闻现网提供的,而样式简单地仿照了一下,做得略粗糙,请见谅。

参考的资料和使用的工具

做这次实践阅读了不少文章,文章提到过的内容我这里就不再赘述了,后文主要是做补充。

这次同构直出实践,我们使用的是脱胎于手Q家校群的reactstartkit,名曰steamer-react。目前可以试用。它有个分支,一个是react分支,目前只是提供纯前端的boilerplate。另一个是react-isomorphic,同时包括前端和后台的boilerplate。有什么问题可以给我提issue。

文章:

React+Redux同构应用开发:

1
查看完整版本: 腾讯新闻React同构直出优化实践