[stable20] Fix Chromium performance hit in calls due to blur filter #4780
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
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The CSS blur filter in the video background causes Chromium's UI to be very slow. The performance hit is larger when the element to blur is larger, and also when the blur radius is larger, so a promoted speaker with a blurred image seems to be the worst case (even worse than a grid with several rows and columns). However, even if the CSS blur filter is slow, applying the blur filter on a canvas is much more performant (maybe the blur filter itself has the same performance in both cases, but the UI uses it several times in a row when rendering the element, but that is just a guess). Due to this now a blurred background image is generated from the original background image whenever the blur size changes, and that blurred image is the one used in the image element without any CSS filter. Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Until now a new source image was loaded every time that the blurred image had to be generated. Now the source image is loaded only when the URL of the background image changes and that "cached" image is reused to generate any blurred image. The source image is loaded using a watcher instead of a computed property because the "complete" read-only property of HTMLImageElement is not reactive. Due to this it is not possible to set "blurredBackgroundImageSource" as a computed property and then check its "complete" attribute in "generatedBackgroundBlur" to know if the image is loaded or not. Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The cache id needs to be generated from the background image URL rather than the image itself (as checksuming the image would require drawing it to a canvas, which although still faster than drawing a blurred image would defeat the use of a cache). For simplicity the images are cached locally in the VideoBackground element rather than in a central store. Due to this the images will be regenerated again if the component is created again (for example, when changing between speaker mode or grid view), but minimizes the posibility of using a wrong cached blurred image if the image returned by the URL changed. Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
As the "blur" operation returns a promise it needs to be ensured that the elements will not be used after the component was destroyed. Similarly the background should be restored after getting the "raw" size of the image element to prevent an empty background to be shown while the new background is being generated (although in practice this will not happen due to "blur" still generating the image in the UI thread, but it will be needed once moved to a worker) Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
If several blurred backgrounds are requested while a previous one is being generated only the last requested background will be generated once the previous one finished, as the intermediate ones would be no longer needed. Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Until now the generation of the blurred backgrounds was done in a normal canvas, so it happened in the main thread and made the UI unresponsive while the image was being generated. Now, to solve that, the blurred background is generated in an OffscreenCanvas in a worker (if supported by the browser). Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
nickvergessen
approved these changes
Dec 17, 2020
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
backport of #4678