search

alibaba / rax

🐰 Rax is a progressive framework for building universal application. https://rax.js.org
Other
7.99k stars 627 forks source link

React Profiler for Rax #2042

Open hanxu317317 opened 3 years ago

hanxu317317 commented 3 years ago

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

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

SoloJiang commented 3 years ago

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

SoloJiang commented 3 years ago

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

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

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

SoloJiang commented 3 years ago

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

cryzzchen commented 3 years ago

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

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

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

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

在开发环境中收集数据

SoloJiang commented 3 years ago

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