Skip to content

Reduce unnecessary DOM attribute reads#2486

Merged
marvinhagemeister merged 5 commits intomasterfrom
improve-attributes-check
Apr 21, 2020
Merged

Reduce unnecessary DOM attribute reads#2486
marvinhagemeister merged 5 commits intomasterfrom
improve-attributes-check

Conversation

@andrewiggins
Copy link
Copy Markdown
Member

I think there are 4 different "modes" of diffing that Preact can be in (ignoring things like suspense for now).

  1. Hydration with existing DOM: We skip all attribute diffing. Already handled by !isHydrating check
  2. Render with existing DOM: Currently we support calling render when the container contains existing DOM. This behavior compares the existing DOM with the specified VNodes including attributes.
  3. ReplaceNode: Basically the same the number 2, but the user specifies which node in the container to begin the diff with.
  4. Render without existing DOM: For example, using preact-router and rendering an entirely new route client side. Preact creates the DOM from scratch. Because the DOM is created entirely from scratch, there are no attributes to be read.

This PR fixes a bug where the attributes property was being read in case 4. Since this is a fairly common situation, I figured skipping the attributes read would be beneficial.

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 20, 2020

Size Change: -8 B (0%)

Total Size: 39.3 kB

Filename Size Change
dist/preact.js 3.83 kB -2 B (0%)
dist/preact.min.js 3.83 kB -2 B (0%)
dist/preact.module.js 3.84 kB -2 B (0%)
dist/preact.umd.js 3.89 kB -2 B (0%)
ℹ️ View Unchanged
Filename Size Change
compat/dist/compat.js 3.12 kB 0 B
compat/dist/compat.module.js 3.14 kB 0 B
compat/dist/compat.umd.js 3.17 kB 0 B
debug/dist/debug.js 3 kB 0 B
debug/dist/debug.module.js 2.98 kB 0 B
debug/dist/debug.umd.js 3.08 kB 0 B
devtools/dist/devtools.js 185 B 0 B
devtools/dist/devtools.module.js 194 B 0 B
devtools/dist/devtools.umd.js 260 B 0 B
hooks/dist/hooks.js 1.1 kB 0 B
hooks/dist/hooks.module.js 1.12 kB 0 B
hooks/dist/hooks.umd.js 1.18 kB 0 B
test-utils/dist/testUtils.js 437 B 0 B
test-utils/dist/testUtils.module.js 439 B 0 B
test-utils/dist/testUtils.umd.js 515 B 0 B

compressed-size-action

Copy link
Copy Markdown
Member

@JoviDeCroock JoviDeCroock left a comment

Choose a reason for hiding this comment

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

That's a really good find! We could make it shorter by just doing if (excessDomChildren) but yes nothing major, awesome work!

@github-actions
Copy link
Copy Markdown

Coverage Status

Coverage remained the same at 99.8% when pulling ce0a034 on improve-attributes-check into 6a2bcec on master.

expect(style.zIndex.toString()).to.equal('');
});

it('should remove existing attributes', () => {
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

These tests were under the "style attribute" describe block. I just moved them to the bottom of this file out of the "style" describe block since they don't have anything to do with the style attribute.

expect(serializeHtml(scratch)).to.equal('<div><span>Bye</span></div>');
});

it('should not read DOM attributes on render without existing DOM', () => {
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

This is the new test for this PR

Copy link
Copy Markdown
Member

@developit developit left a comment

Choose a reason for hiding this comment

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

Oh wow, this is a great find. Likely a nontrivial performance win for client side routing and also for our suspense resumption

Copy link
Copy Markdown
Member

@marvinhagemeister marvinhagemeister left a comment

Choose a reason for hiding this comment

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

Sweet! 💯

@marvinhagemeister marvinhagemeister merged commit da93237 into master Apr 21, 2020
@marvinhagemeister marvinhagemeister deleted the improve-attributes-check branch April 21, 2020 08:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants