This repository has been archived by the owner on Sep 11, 2024. It is now read-only.
Safeguards to prevent layout trashing for window dimensions #6092
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
It is better to access the device orientation using media queries as it will not force a reflow compared to accessing innerWidth/innerHeight
This helper should hold data related to the UI and access save in a smart to avoid performance pitfalls in other parts of the application
t3chguy
approved these changes
May 25, 2021
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Accessing mundane things like
window.innerWidthcan have a devastating impact on performance. This pull request tries to alleviate this to end this once and for all by caching the window dimensions in a newly createdUIStoreand forcing everyone to use it over the native browser primitives (thanks to ESLint).This pull request also cleans up a few old event listeners that were not needed during resize as well as only scheduling work if it needs to happen
Overall there is a net decrease of the frame rendering time, with less JavaScript being executed for every frame allowing the application to hit slightly higher FPS
Before 🐌
After 🐎