Generic font families lead to a reflow performance hit
Reported by
philipp....@gmail.com,
Nov 3 2017
|
|||||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.30 Safari/537.36 Steps to reproduce the problem: 1. Go to https://bl.ocks.org/Herst/raw/d5db2d3d1ea51a8ab8740e22ebaa16aa/ (or alternatively load the attached HTML file). 2. Enter the Developer Tools. 3. Start a performance recording session. 4. Run demoGood(), this function sets the font-family of the body to just a single font and then runs the demo. 5. End the profiling and remember the time "Rendering" category. 6. Repeat for demoBad(), this function sets the font-family of the body to multiple font-families, including generic font families such as -apple-system and BlinkMacSystemFont, and then runs the demo. 7. Compare the profiling results and observe that the Layout activity takes much more effort in the case with the multiple font-families. (This are also steps followed in the attached video.) What is the expected behavior? There should not be any performance difference between demoGood() and demoBad(). A different font-family style shouldn't lead to more expensive layouting. What went wrong? There is a significant performance hit when (certain?) generic font families are referenced. Did this work before? N/A Does this work in other browsers? N/A Chrome version: 63.0.3239.30 Channel: beta OS Version: Flash Version: I came across this when porting a large project from Bootstrap 3 to Bootstrap 4 with which the default font setting changed. In the demo the problem is much less pronounced than in the project where the SVG has much more going on, especially many more <text> elements. There the FPS drop from 60 to sometimes one-digit numbers and the performance inspector gives warnings such as: [Violation] 'requestAnimationFrame' handler took 95ms [Violation] Forced reflow while executing JavaScript took 95ms ("Forced reflow"?!)
,
Nov 3 2017
,
Nov 4 2017
I created another testcase and reproduced it in Google Canary (64.0.3258.0) on Windows 10 (see screenshots). I changed the font in "demoGood()" for the font which would be chosen on Windows ("Segoe UI" instead of "Roboto"). I don't think it's relevant but it's also a different machine, e.g. it has an Intel+nVidia instead of an AMD GPU.
(A note concerning the first testcase, it assumes that the "Roboto" font gets chosen [I have it on my Linux installation but not every distribution ships with it], this is why in the video the visible font is the same for the "demoGood()" and "demoBad()" runs.)
,
Nov 4 2017
Also worth noting, as a workaround setting "font-family" of the SVG element to some generic font-family like "serif" seems to work.
,
Nov 5 2017
I created another testcase, one where changing the font-family style isn't part of the benchmark (first run "setupDemoGood()"/"setupDemoBad()", then "demo()"), also I drastically increased the number of family names prepended in the bad demo which lead to a more dramatic difference.
,
Nov 6 2017
For what it's worth, the problem does not appear in Mozilla Firefox or Microsoft Edge (and probably Microsoft Internet Explorer but its performance profiler does not work for me ATM).
,
Nov 10 2017
Thanks for the detailed report, we'll take a look.
,
Nov 20 2017
The title I originally gave this bug report is wrong, it does not matter whether there are references to generic or specific font families. It would also be nice it it was made clear that the performance hit is indeed significant. So maybe the title should be changed into "Font families lead to a significant reflow performance hit" or alternatively "Huge reflow performance hit depending on number of font families". Also, any OS is affected, not just Linux.
,
Dec 5 2017
BTW, unless I did something wrong when changing and recompiling Chrome, short-cutting FontPlatformData::hasSpaceInLigaturesOrKerning as mentioned in issue 664114 does NOT make the difference between the case with many and few font families go away (or at least not in a way where I would notice it).
,
Feb 7 2018
Bootstrap 4 has been released now. I guess this will make it more likely that on certain pages (with interactive SVGs) people will see sudden slowdowns like I did. |
|||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||
Comment 1 Deleted