Performance: save components are called for *every* block on *every* keystroke

[ellatrix]

Describe the bug

This happens after the initial autosave, from then on every keystroke (or any attribute change) will trigger serialisation of the whole post content. I would expect (partial) serialisation of the content to only happen once the post has to be saved, ideally only for the parts that have changed.

The issue seems to happen where we try to determine whether the post is auto saveable?

gutenberg/packages/editor/src/store/selectors.js

Lines 390 to 406 in cc5bf5c

	export function isEditedPostAutosaveable( state ) {
	// A post must contain a title, an excerpt, or non-empty content to be valid for autosaving.
	if ( ! isEditedPostSaveable( state ) ) {
	return false;
	}
	// If we don't already have an autosave, the post is autosaveable.
	if ( ! hasAutosave( state ) ) {
	return true;
	}
	// If the title, excerpt or content has changed, the post is autosaveable.
	const autosave = getAutosave( state );
	return [ 'title', 'excerpt', 'content' ].some( ( field ) => (
	autosave[ field ] !== getEditedPostAttribute( state, field )
	) );
	}

Looking further into this, but reporting now because it seems high priority.

[ellatrix]

Seems to be introduced in #6257 with changes to AutosaveMonitor. Cc @adamsilverstein @danielbachhuber @aduth.

[ellatrix]

Issue seems to be generally with the check for saveable post content, which causes serialisation on every change. This check should be made more performant somehow, maybe shallowly comparing the raw state vs comparing the the serialised content.

[ktmn]

Relevant #9624

[aduth]

This could be potentially resolved in parallel with #7409, in splitting a simple hasDirtyContent boolean value which could be used in place of the content serialization in isEditedPostAutosaveable.

[aduth]

Alternative pull request (also closing #7409) at #10844

[mtias]

Nice work debugging and addressing this issue.