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
refactor: layout performance #897
Merged
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…on in nested layout
…nto refactor/constraints-compute
…out-performance # Conflicts: # kraken/lib/src/rendering/box_model.dart # kraken/lib/src/rendering/flex.dart # kraken/lib/src/rendering/flow.dart
…ncestors to stretch width.
…entBoxLogicalHeight
temper357
requested review from
andycall,
yuanyan,
wssgcg1213 and
answershuto
and removed request for
andycall and
yuanyan
November 25, 2021 05:50
temper357
changed the title
[WIP] refactor: layout performance
refactor: layout performance
Nov 25, 2021
需要结合这个 PR #878 编写有关性能优化场景的测试用例,将理论上的优化通过测试沉淀下来。毕竟后续更改有可能会 break 掉优化 |
andycall
requested changes
Nov 25, 2021
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
需要编写 profile 测试
应该是把样式放到 dart 侧来生效,这样才是区别才只剩下传输 |
yuanyan
reviewed
Nov 25, 2021
yuanyan
previously approved these changes
Nov 26, 2021
我们需要先建立起性能beachmark建立起基线,这块 @wssgcg1213 回在 github actions上建立一套 |
…out-performance # Conflicts: # kraken/lib/src/css/render_style.dart # kraken/lib/src/rendering/box_model.dart
yuanyan
approved these changes
Dec 6, 2021
andycall
approved these changes
Dec 7, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
通过重构 layout constraints 逻辑,减少不必要的 constraints 计算,提升 layout 性能。
优化策略
性能数据
构造了一个贴近实际业务场景的 benchmark,包含 1500 个 Flex 容器,样式与 rax-view 组件中的样式对齐,容器最大嵌套层级为 10 层。
下表记录了优化前后 layout 时间与渲染总时间的 5 次数据的平均值:
测试结果:通过对比发现优化后 layout 时间减少约 45%,渲染总时间减少约 6%。
从上面结论看出渲染总时间的提升幅度远小于 layout 时间提升幅度,怀疑时间主要由消耗在指令的传输上,修改上面的 benchmark 将 rax-view 组件中自带的一些默认样式删除,删除的样式占原来样式的 50% 左右。
测试结果:优化后渲染总时间下降到约 235 ms,相对于样式删除前时间减少约 26% 。因此下一步优化的重点策略需要放在公共样式的复用上。