请教大家,
在最近一个项目中使用了react,页面的数据依赖ajax请求,在首次ajax请求发起之前,有大概700ms-800ms的延迟,包含下载react,执行webpack(require - ensure)的打包文件,等等。大家有遇到首屏时间比较慢的问题吗?请教,请教 万分感谢
使用react,如何提高首屏时间?
简聊用了两个策略,
- code splitting, 减少首次加载的文件体积
- 整个 Store 存进 localStore, 在合适的条件下触发渲染, 对, 打开页面马上开始渲染旧数据
- 服务端渲染首屏(跟前面一个 localStorage 冲突, 另一个站当中做的)
细节要看具体项目的条件和需求
万分感谢您的回复!
第一个策略我们一直在关注,也试过用webpack改变打包策略等等。第三个策略目前还没开始尝试。您说的第二个策略,缓存旧数据?用户登录到页面之后首先看到的是旧数据,然后在发起请求,重新渲染新数据?这个数据要是不是很实时的其实可以尝试尝试。 主要问题在于 我们加了一些统计数据之后 发现平均下来,首次componentDidMount 大概就会到900ms左右 看控制台里的时间轴表现,这900ms感觉react执行和打包文件的执行时间就很长 想请教您简聊也会有这样的问题吗?
谢谢您的回复
所以您看,结论是不是可以归结为,用户真正看到了ajax请求渲染出的数据,之前react的下载时间,和执行时间都占了很大的比例,尤其是这个执行时间,感觉归根结底还是因为这个库有点大,虽然gzip之后会变小,但是执行时间还是比较长?
React 下载时间是可以通过 CDN 的 Cache 方案降低影响的,
执行时间有点大, 一部分是读取代码到内存的时间, 更大的一部分是渲染 React 首屏的时间.
这个执行时间和用户的 CPU 性能有关系, 但对于简聊这么大的前端代码, 影响还是有不小.
要求真的高的话就尽量服务端渲染吧, 不然成本也比较高, 渲染代码和数据抓取的代码都要在 Node 环境能够正常运行, 门槛其实挺高的. 另外还有个问题是 React 在后端渲染如果应用太大, 可能有性能的瓶颈, 毕竟 React renderToString 性能不是非常高. 一般不要在大的项目里用, 而且技术上有一些地方其实不成熟的. 我们用在了体型较小的站点上, 可以看 https://account.jianliao.com/signin
我其实推荐的是存 localStorage 然后快速渲染首屏的方案, 简聊现在是这么做的, 虽然有门槛但是还算可靠.
都很早的事情了 - - 当时我是把 Store 里的数据存储在 localStorage, 然后启动通过 Store 渲染旧数据的. 现在看来比较局限, 而且一年多了新的方案也出来了… 不知道更好的是什么样