使用react,如何提高首屏时间?

#1

请教大家,
在最近一个项目中使用了react,页面的数据依赖ajax请求,在首次ajax请求发起之前,有大概700ms-800ms的延迟,包含下载react,执行webpack(require - ensure)的打包文件,等等。大家有遇到首屏时间比较慢的问题吗?请教,请教 万分感谢

#2

简聊用了两个策略,

  1. code splitting, 减少首次加载的文件体积
  2. 整个 Store 存进 localStore, 在合适的条件下触发渲染, 对, 打开页面马上开始渲染旧数据
  3. 服务端渲染首屏(跟前面一个 localStorage 冲突, 另一个站当中做的)

细节要看具体项目的条件和需求

#3

万分感谢您的回复!
第一个策略我们一直在关注,也试过用webpack改变打包策略等等。第三个策略目前还没开始尝试。您说的第二个策略,缓存旧数据?用户登录到页面之后首先看到的是旧数据,然后在发起请求,重新渲染新数据?这个数据要是不是很实时的其实可以尝试尝试。 主要问题在于 我们加了一些统计数据之后 发现平均下来,首次componentDidMount 大概就会到900ms左右 看控制台里的时间轴表现,这900ms感觉react执行和打包文件的执行时间就很长 想请教您简聊也会有这样的问题吗?

#4

实际上简聊的时间是非常长的… 特别我在 Air 上, 即便我们把整个优化做了还是有点慢:

#5

首屏服务端渲染会比较好吧,对seo也有好处。

#6

谢谢您的回复
所以您看,结论是不是可以归结为,用户真正看到了ajax请求渲染出的数据,之前react的下载时间,和执行时间都占了很大的比例,尤其是这个执行时间,感觉归根结底还是因为这个库有点大,虽然gzip之后会变小,但是执行时间还是比较长?

#7

谢谢您的回复
这块目前还没尝试呢哈哈

#8

React 下载时间是可以通过 CDN 的 Cache 方案降低影响的,
执行时间有点大, 一部分是读取代码到内存的时间, 更大的一部分是渲染 React 首屏的时间.
这个执行时间和用户的 CPU 性能有关系, 但对于简聊这么大的前端代码, 影响还是有不小.

#9

谢谢您的回复,能和您交流觉得很棒
所以要使用react,并且想提高首屏时间还是把重点放在 服务端渲染吗? 这个您之前说有在别的项目使用了?效果很显著吗?

#10

要求真的高的话就尽量服务端渲染吧, 不然成本也比较高, 渲染代码和数据抓取的代码都要在 Node 环境能够正常运行, 门槛其实挺高的. 另外还有个问题是 React 在后端渲染如果应用太大, 可能有性能的瓶颈, 毕竟 React renderToString 性能不是非常高. 一般不要在大的项目里用, 而且技术上有一些地方其实不成熟的. 我们用在了体型较小的站点上, 可以看 https://account.jianliao.com/signin

我其实推荐的是存 localStorage 然后快速渲染首屏的方案, 简聊现在是这么做的, 虽然有门槛但是还算可靠.

#11

参考medium,首屏数据可以直接放在页面中不通过ajax获取。React库gzip之后也就50多KB,加上浏览器会缓存,几乎可以忽略。

#12

1、按需加载:split coding或动态路由;
2、GZIP压缩:效果很显著;
3、服务端渲染。

#13

了解了 谢谢您的回复 很有收获 万分感谢 哈哈

#14

看了下你的站点

发现vendor这个js :u6307:设了626005的max-age :joy:

#15

8 天不到, 失算了…

#16

您好,请问您是如何通过 localStorage 来优化 react 首屏渲染的时间的呢?

#17

都很早的事情了 - - 当时我是把 Store 里的数据存储在 localStorage, 然后启动通过 Store 渲染旧数据的. 现在看来比较局限, 而且一年多了新的方案也出来了… 不知道更好的是什么样