Description

Noticed while reviewing #41986

In the navigation and submenu view.js there's room for performance improvements. See for example the packages/block-library/src/navigation/view.js file:

• The load event callback: load is fired when the page and all assets (e.g. images) are fully loaded. On a page with large images, that could be a bit late. Using the domReady package would be a better option.
• The 'Close on click outside' callback selects all the navigation blocks at any click on the page again and again. ideally, querySelectorAll should run only once.
• The 'Close on focus outside or escape key' callback does the same thing: querySelectorAll runs at any key press on the page for example at any Tab key press or any other key press, even when users type into a form field (e.g. the Comment textarea)
• The remaining part of the keyup event callback runs at any key press. I'm not sure attaching a keyup event to the document is the best option in the first place.

Similar improvements should be considered for the submenu view.js as well.

Step-by-step reproduction instructions

• Log something to the console at the beginning of the 'Close on click outside.' callback.
• Build.
• Go to the front end. Make sure you added a navigation menu.
• Observe the console and see the click callback runs at any click on any part of the page.
• Do the same for the 'Close on focus outside or escape key.' callback. Test by pressing any key on any part of the page.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes