Skip to content

perf(table): Reduce calls to updateStickyColumnStyles#19739

Merged
jelbourn merged 2 commits intoangular:masterfrom
kseamon:table-optimize-sticky-cols
Jul 29, 2020
Merged

perf(table): Reduce calls to updateStickyColumnStyles#19739
jelbourn merged 2 commits intoangular:masterfrom
kseamon:table-optimize-sticky-cols

Conversation

@kseamon
Copy link
Contributor

@kseamon kseamon commented Jun 24, 2020

Tested with the dev app, clicking "add table" in the "Table with sticky headers, footers and columns" example.

Before:
image
100ms scripting + 59ms rendering

After:
image
75ms scripting + 39ms rendering

The effect is greater in more complex tables. More optimization PRs to come.

@kseamon kseamon requested a review from andrewseguin as a code owner June 24, 2020 02:49
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Jun 24, 2020
Copy link
Contributor

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add some comments that explain what's happening with forced throughout?

// connection has already been made.
if (this.dataSource && this._rowDefs.length > 0 && !this._renderChangeSubscription) {
this._observeRenderChanges();
} else if (forced) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This else if requires a bit of extra thinking for me to understand - this should only occur if !(this.dataSource && this._rowDefs.length > 0 && !this._renderChangeSubscription) && forced? Does it need to be coupled to this particular condition, or can we add an additional if` statement that shows exactly what condition we are trying to meet?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can add a comment - the else if is because if the table has not rendered any rows yet (the first condition, basically), then this will be taken care of the first time that the table receives row data.

Without this, we'd compute sticky columns and then have to throw that out and do it again when that data arrives.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Comment added

@andrewseguin
Copy link
Contributor

Awesome thanks for catching this optimization - looks good to me, just small nits on readability

Copy link
Contributor

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@jelbourn jelbourn added lgtm action: merge The PR is ready for merge by the caretaker target: patch This PR is targeted for the next patch release labels Jun 24, 2020
kseamon added a commit to kseamon/material2 that referenced this pull request Jul 22, 2020
@jelbourn jelbourn added G This is is related to a Google internal issue P2 The issue is important to a large percentage of users, with a workaround labels Jul 27, 2020
jelbourn pushed a commit that referenced this pull request Jul 27, 2020
#19750)

* perf(table) Coalesces style updates after style measurements to reduce layout thrashing Exposes the CoalescedStyleScheduler for use by other related components in a table such as column resize.

* Add license

* Fix column resize tests

* Fixed mdc-table tests

* jsdoc

* more comments

* lint

* lint

* Added _

* lint

* -override

* update api

* prevent resource leaks

* api

* readonly

* remove changes that are part of #19739

* Change to onStable to work around downstream test failures

* api update
jelbourn pushed a commit that referenced this pull request Jul 27, 2020
#19750)

* perf(table) Coalesces style updates after style measurements to reduce layout thrashing Exposes the CoalescedStyleScheduler for use by other related components in a table such as column resize.

* Add license

* Fix column resize tests

* Fixed mdc-table tests

* jsdoc

* more comments

* lint

* lint

* Added _

* lint

* -override

* update api

* prevent resource leaks

* api

* readonly

* remove changes that are part of #19739

* Change to onStable to work around downstream test failures

* api update

(cherry picked from commit ef8fc4f)
@jelbourn jelbourn merged commit f484e96 into angular:master Jul 29, 2020
jelbourn pushed a commit that referenced this pull request Jul 29, 2020
* perf(table): Reduce the number of times sticky column positioning is computed.

* Applied suggested readability improvements.

(cherry picked from commit f484e96)
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Aug 29, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement G This is is related to a Google internal issue P2 The issue is important to a large percentage of users, with a workaround target: patch This PR is targeted for the next patch release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants