-
Notifications
You must be signed in to change notification settings - Fork 46.9k
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
Avoid adding trailing semicolons to inline styles. #9550
Conversation
CSS styles is a hot path and you've changed it from basic string concatenation into multiple array manipulations which should intuitively have a significant impact on performance. |
Thanks @syranide. I can change it with that in mind. Is there a good system for testing performance? |
Could we just keep the existing code and use return serialized.slice(0, serialized.length - 1) || null |
Maybe return serialized ? serialized.substring(0, serialized.length - 2) : null https://jsperf.com/slice-vs-substr-vs-substring-methods-long-string/2 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This feels like super overkill and I can't promise we won't go back on this in the future but I guess we can take this change. Instead of calling .substring, can we avoid appending the last semicolon? Something like:
var first = true;
for (...) {
if (first) {
first = false;
} else {
s += ';';
}
s += x + ':' + y;
}
(That's probably faster and might avoid a string copy (depending on the VM), although I'm not in love with the extra branching.)
@aweary feel free to merge after that change
@spicyj How about this? var delimiter = '';
for (...) {
s += delimiter + x + ':' + y;
delimiter = ';';
} |
I've updated with that change after comparing approaches here: https://jsperf.com/semicoloning-approaches |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great, good work @gunn! Very elegant solution.
@aweary This failed CI. |
@sebmarkbage hmm, it shows that CI passed on my end |
Here's why CI failed on master #9864 (comment) |
I think this may need to be re-opened. I am getting a Warning because the Client is missing the trailing semi-colon and there are no spaces between the CSS properties and values. In our development environment we are not minifying the HTML code. We only minify in production. warning.js:33 Warning: Prop |
@dustin-page You should not be minifying React-generated HTML, it can affect the visual rendering. |
@syranide Thanks for the tip regarding production minification of HTML. The warning I'm seeing is in development with the string concatenation in the createDangerousStringForStyles method. The HTMLElement.style returns "animation-duration: 3s; height: 123px;" and calling createDangerousStringForStyles on line 7910 of the react-dom.development.js file returns a string without spaces or the trailing semicolon: "animation-duration:3s;height:123px". I believe the createDangerousStringForStyles should return a string with spaces and a trailing semicolon. |
For #9353.