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

Fix race and speed up amp-list/amp-bind interaction #22938

Merged
merged 16 commits into from Jun 25, 2019

Conversation

dreamofabear
Copy link

@dreamofabear dreamofabear commented Jun 20, 2019

Fixes #22341, partial for #21901.

  • Bug: Fix race condition between amp-list[binding=refresh] and amp-bind's initial DOM scan.
  • Optimization: Skip Bind.rescan in amp-list if new children have no binding marker attributes ([i-amphtml-binding]).
  • Optimization: Significantly speed up initial render for amp-list[binding=always] by changing Bind.rescan to only wait for a small part of Bind's initialization.
  • Bug: Refactor Bind.rescan to fix/support amp-date-picker's usage.

@dreamofabear dreamofabear changed the title [WIP] Fix and speed up amp-list/amp-bind interaction Fix race and speed up amp-list/amp-bind interaction Jun 21, 2019
@dreamofabear
Copy link
Author

/to @jridgewell

Services.bindForDocOrNull(this.element).then(bind => {
if (bind) {
return bind.scanAndApply([this.element], [this.element]);
return bind.rescan([this.element], [this.element], {'apply': true});
Copy link
Author

Choose a reason for hiding this comment

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

@cvializ I think this was broken for awhile. 🤷‍♂

Copy link
Contributor

@cvializ cvializ Jun 21, 2019

Choose a reason for hiding this comment

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

Time to write an integration test 😬

Copy link
Contributor

@jridgewell jridgewell left a comment

Choose a reason for hiding this comment

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

This looks fine, but the interactions are too complicated for me to really follow.

// Scan `addedElements` and their children for elements with bindings.
const elementsToScan = addedElements.slice();
const elementsToScan = addedElements.filter(el =>
el.hasAttribute('i-amphtml-binding')
Copy link
Contributor

Choose a reason for hiding this comment

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

Why are you filtering here?

Copy link
Author

Choose a reason for hiding this comment

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

Minor optimization. We only want to scan elements with [i-amphtml-binding] attribute, and elements in addedElements may not have it.

scanElement_() iterates over an element's attributes, so this should be a small perf win.

@dreamofabear dreamofabear merged commit 37417d9 into ampproject:master Jun 25, 2019
@dreamofabear dreamofabear deleted the bind-refresh-bug branch June 25, 2019 15:31
thekorn pushed a commit to edelight/amphtml that referenced this pull request Sep 11, 2019
* Refactor scanAndApply and rename to rescan.

* Fix types.

* Remove old skip.

* Use string keys to be safe, add early returns.

* rescan() should wait for macros in fast mode.

* Fix a few bugs.

* Fix tests, clean up.

* Lint.

* Fix types.

* More readability changes.

* Skip rescan in amp-list if elements have no binding attributes.

* Add amp-list tests (WIP).

* Only skip scan of children, update example.

* Better comments.

* Add tests for new Bind.rescan options.

* Improve perf of binding limit detection and early-out.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Slow Rendering for amp-list when binding="always" enabled
4 participants