Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React Profiler for Rax #2042

Open
hanxu317317 opened this issue Nov 27, 2020 · 5 comments
Open

React Profiler for Rax #2042

hanxu317317 opened this issue Nov 27, 2020 · 5 comments
Labels
Feature Long Term 短期内无法解决的 Issue

Comments

@hanxu317317
Copy link

参考: https://zh-hans.reactjs.org/docs/profiler.html

我们需要知道raxView的页面. 整体渲染的代价, 每一个模块节点的渲染速度 . 这样才能不会因为某个节点的冗余导致整个页面首屏时间过长.

@SoloJiang
Copy link
Collaborator

这个需要和 rax-devtools 联动,时间不确定

@SoloJiang SoloJiang added the Long Term 短期内无法解决的 Issue label Dec 16, 2020
@SoloJiang
Copy link
Collaborator

1)Rax App:
在页面初次渲染开始时和结束时 mark一下,并计算所用时长。
目的:了解页面的初次渲染的情况,提供比FP、FCP等更准确的页面情况数据。

2)Rax Core:
在生产环境中,用户可以自定义收集某段时间内,各组件的:

  • 触发渲染的时间戳
  • 渲染次数
  • 每次渲染的时长

目的:方便的获得各组件的渲染情况,对于渲染频率过高或渲染耗时过长的组件可针对性的用 useMemo 之类的手段进行优化。可参考 react Profile API

@SoloJiang
Copy link
Collaborator

关于 DSL、框架 和 devtools 的联动关系,近期规划是,可能不仅仅是 chrome 插件,而是一个面向多端的调试工具

@cryzzchen
Copy link
Collaborator

1)Rax App:
在页面初次渲染开始时和结束时 mark一下,并计算所用时长。
目的:了解页面的初次渲染的情况,提供比FP、FCP等更准确的页面情况数据。

2)Rax Core:
在生产环境中,用户可以自定义收集某段时间内,各组件的:

  • 触发渲染的时间戳
  • 渲染次数
  • 每次渲染的时长

目的:方便的获得各组件的渲染情况,对于渲染频率过高或渲染耗时过长的组件可针对性的用 useMemo 之类的手段进行优化。可参考 react Profile API

在开发环境中收集数据

@SoloJiang
Copy link
Collaborator

renderToString 方法也可以提供组件渲染时间等信息

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature Long Term 短期内无法解决的 Issue
Projects
None yet
Development

No branches or pull requests

3 participants