Improve importantify() performance
#201
Conversation
|
This looks great! Thanks for looking in to this. On my computer, the jsperf says that the hoisted function replacement is the fastest for both chrome and firefox:
What are you seeing? |
|
But then I noticed my Firefox was pretty old so I updated. Here's the latest:
So maybe function is the way to go? |
|
On my phone (Pixel), function hoisted is the winner with function and string being slowest. |
|
I think we can also simplify the regex here. If we change the code to this: const IMPORTANT_RE = /(?: !important)?;$/;
// Given a single style rule string like "a: b;", adds !important to generate
// "a: b !important;".
export const importantify = (string /* : string */) /* : string */ =>
string.replace(IMPORTANT_RE, " !important;");it drops the runtime of |
|
FYI, I'm trying out all of my optimization PRs at the same time, and together they seem to speed up |
|
FYI, I also dug into inline-style-prefixer a little, and opened some PRs over there that should really help out as well. |
src/util.js
Outdated
| export const importantify = (string /* : string */) /* : string */ => ( | ||
| string.slice(-11) === ' !important' | ||
| ? string | ||
| : `${string} !important` |
There was a problem hiding this comment.
nit: we use 4 space indents
lencioni
force-pushed
the
important-re
branch
2 times, most recently
from
99fbfec
to
bd0a575
Compare
src/util.js
Outdated
| // Given a single style value string like the "b" from "a: b;", adds !important | ||
| // to generate "b !important". | ||
| export const importantify = (string /* : string */) /* : string */ => ( | ||
| string[string.length - 10] === '!' && string.slice(-11) === ' !important' |
There was a problem hiding this comment.
hehe this is great! Could you maybe add a comment explaining why this check looks so funky? Also maybe wrap these checks in parens because I can never remember the precedence of ?:? :P
src/generate.js
Outdated
| @@ -286,8 +286,7 @@ export const generateCSSRuleset = ( | |||
|
|
|||
| const rules = prefixedRules.map(([key, value]) => { | |||
| const stringValue = stringifyValue(key, value); | |||
| const ret = `${kebabifyStyleName(key)}:${stringValue};`; | |||
| return useImportant === false ? ret : importantify(ret); | |||
| return `${kebabifyStyleName(key)}:${useImportant === false ? stringValue : importantify(stringValue)};`; | |||
There was a problem hiding this comment.
This line is a bit long. :( Maybe split it up into two?
I was rolling through the code here looking for some opportunities to speed it up and I noticed that there is a capture group in this regex that isn't being used. By changing `(` to `(?:` we can avoid capturing this group while still being able to use the parens for grouping.
I was curious about the performance characteristics of various options here, and using a string in this way seems to have the edge, at least in Firefox (35% faster) and Safari (12% faster)--Chrome performance seems pretty similar for all possibilities. I also find this version more readable, so it seems like we may as well go with this option. https://jsperf.com/replace-string-vs-function/
I don't think we actually need a capture group at all here and can accomplish the same thing by just anchoring on the end of the string. This reduces the runtime of this function in my benchmark from ~105ms to ~35ms.
Since we only call this function from one place, and we already have the CSS property name and value split out, we can further optimize this hot path by only running importantify on the CSS property value. In my benchmark, this change speeds up this map by ~22% (~128ms to ~100ms).
Now that this has been sufficiently simplified, we can easily remove the regex entirely.
In our microbenchmark, adding this optimization performs a good amount better. Since it is a simple optimization to add, it seems like we may as well do it. https://jsperf.com/slice-vs-bracket-string-check-with-imporant I considered using bracket notation for the whole check, but I decided that was too verbose. So instead, I decided to just check for one character and follow up with a more thorough but concise check afterward. This optimization favors the case where the style does not already have `!important` on it, which is by and large likely to be the general case.
This cleans up the code a bit, and is also faster! https://jsperf.com/if-vs-extra-function/1
I was rolling through the code here looking for some opportunities to
speed it up and I noticed that there is a capture group in this regex
that isn't being used. By changing
(to(?:we can avoid capturingthis group while still being able to use the parens for grouping.
I was also curious about the performance characteristics of various
replacearguments, and using a string in this way seems to have the edge, at least in
Firefox (35% faster) and Safari (12% faster)--Chrome performance seems
pretty similar for all possibilities. I also find this version more
readable, so it seems like we may as well go with this option.
https://jsperf.com/replace-string-vs-function/
I don't think we actually need a capture group at all here and can
accomplish the same thing by just anchoring on the end of the string.
This reduces the runtime of this function in my benchmark from ~105ms to
~35ms.