Skip to content
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 deoptimization in generateCSS() #204

Merged
merged 1 commit into from
Mar 6, 2017

Conversation

lencioni
Copy link
Collaborator

@lencioni lencioni commented Mar 5, 2017

I was profiling the css() function and Chrome raised a flag on this
function:

Not optimized: Bad value context for arguments value

More info on this warning:
GoogleChrome/devtools-docs#53 (comment)

Looking at the warning and the compiled version of this code, it seems
to do some things with arguments when using the default values
here, which is causing this deoptimization.

var selectorHandlers = arguments.length <= 2 || arguments[2] === undefined ? [] : arguments[2];
var stringHandlers = arguments.length <= 3 || arguments[3] === undefined ? {} : arguments[3];
var useImportant = arguments.length <= 4 || arguments[4] === undefined ? true : arguments[4];

By removing the default values for the arguments, the deoptimization
disappears. I thought about adding logic that would provide values for
these arguments if they aren't defined, but since the only thing that
relies on that is tests I decided to just update the tests to always
pass all of the arguments.

In my benchmark, this does not seem to make much of a difference but it
still seems like a good idea to avoid things that the browser tells us
is deoptimized.

I was profiling the css() function and Chrome raised a flag on this
function:

> Not optimized: Bad value context for arguments value

More info on this warning:
GoogleChrome/devtools-docs#53 (comment)

Looking at the warning and the compiled version of this code, it seems
to do some things with `arguments` when using the default values
here, which is causing this deoptimization.

```js
var selectorHandlers = arguments.length <= 2 || arguments[2] === undefined ? [] : arguments[2];
var stringHandlers = arguments.length <= 3 || arguments[3] === undefined ? {} : arguments[3];
var useImportant = arguments.length <= 4 || arguments[4] === undefined ? true : arguments[4];
```

By removing the default values for the arguments, the deoptimization
disappears. I thought about adding logic that would provide values for
these arguments if they aren't defined, but since the only thing that
relies on that is tests I decided to just update the tests to always
pass all of the arguments.

In my benchmark, this does not seem to make much of a difference but it
still seems like a good idea to avoid things that the browser tells us
is deoptimized.
Copy link
Contributor

@xymostech xymostech left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting! Changes LGTM. Does this mean that we shouldn't use default argument values anywhere?

@xymostech xymostech merged commit 41b3e17 into Khan:master Mar 6, 2017
@lencioni lencioni deleted the generate-deoptimization branch March 6, 2017 22:54
@lencioni
Copy link
Collaborator Author

lencioni commented Mar 6, 2017

Possibly, or maybe the Babel transform can be modified in a way that avoids this? In any case, it was hard for me to see what the real world performance impact of this actually is. Maybe @twokul or @paulirish can point us in the right direction here?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants