-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Performance issues with complex content #4023
Comments
And these are some the styles which cause the problem:
Hint for the future: function parseInlineStyles( stylesMap, stylesString ) {
const d = new Date();
const regex = /\s*([^:;\s]+)\s*:\s*([^;]+)\s*(?=;|$)/g;
let matchStyle;
stylesMap.clear();
while ( ( matchStyle = regex.exec( stylesString ) ) !== null ) {
stylesMap.set( matchStyle[ 1 ], matchStyle[ 2 ].trim() );
}
if ( new Date() - d > 100 ) {
console.log( stylesString );
}
} It really did the job :D. |
Now, some regexp analysis. I'm not an expert in this (ask @fredck for verification), but for me the problem here is that we use too many variable length exclusion groups and that the regexp tries to match the longest piece possible at once (the groups are greedy). This means that on first "go" it captures as long content as possible but if something doesn't match at the end ( BTW, there's also a bug which will break with the CSSes that I provided – Now, the solution will depend on how good we need the parser to be. I think that we don't have to care about |
PS. I think it's called backtracking: http://www.regular-expressions.info/catastrophic.html. |
I guess we need some workshops on regular expressions (@fredck? :)). Anyway I guess it would be profitable to check all the expressions we use, there might be more such places. |
I've checked the regex and it is indeed buggy, as it doesn't support
|
Doesn't this regexp have the same performance issue as the previous one? |
No, it should not have that performance issue. I've checked with both cases you posted previously. Btw, I've just edited the regex, removing the |
So, I've worked further on the regex, to see if there is anything that could be enhanced. I've figured out that the previous proposal was buggy because it ignores cases like I've fixed that and optimized a few bits. Here is a new proposal then:
|
Btw, this new regex already trims spaces from the value, which should simplify the post-processing code. |
OK, I checked that the performance is fixed. And it passes the existing tests too. Thanks, @fredck :) |
Fix: Improved performance of the `view.Element` inline styles parser. Big property values (like based64 encoded images) should not crash the editor anymore. Closes #881.
Update – we removed the regexp because even the improved ones turned to be very unstable. A naive linear state-machine turned to behave much better and there's still a room for improvements if we'll ever need them. |
I've been testing pasting some really complex websites (like https://gazeta.pl) and I noticed that it often causes browser to freeze.
I've been curious whether this is related to some problems with conversion (a potential inf loop) but I got something interesting once I asked Firefox to stop that heavy script execution:
I noticed that styles are mostly inlined on gazeta.pl and that there are images included there as base64 encoded strings (in
background-image
, I presume). This would nicely connect with theparseInlineStyles()
being the last call in that stack trace.There are two options:
The text was updated successfully, but these errors were encountered: