►
From YouTube: Let’s Crank Up the Volume: A Deep Dive into the Crankshaft Compiler by Safia Abdella, nteract
Description
Let’s Crank Up the Volume: A Deep Dive into the Crankshaft Compiler - Safia Abdalla, nteract
Crankshaft is the V8 JavaScript engine’s optimizing compiler, a helpful little fellow built into the V8 engine that is designed to improve the performance of our JavaScript applications. But how does it work? In this talk, we’ll deconstruct the internals of the Crankshaft compiler, discuss the process it goes through to optimize our code and the results of these optimizations, and examine how we might leverage our understanding of the internals in our day to day development work.
About Safia Abdella
Safia a data scientist and software engineer with an interest in open source software and data science for social good. She is one of the maintainers of nteract, a desktop-based interactive computing experience and the organizer of PyData Chicago. In her free time, she enjoys running, working out, and drinking tea.
A
Thanks
everyone
and
good
morning
welcome
to
the
second
day
of
note.
Interactive
I
figured
that
since
I'm
the
first
talk
of
the
day
and
there's
a
few
of
you
here,
we
can
do
a
little
fun
exercise
together
to
energize
everyone's
morning.
So
if
everyone
could
close
our
laptops
and
put
away
their
phones
for
just
a
few
seconds
and
then
if
you
could
all
stand
up.
A
Don't
worry,
this
will
be
fun,
it'll,
just
reach
for
the
sky,
I'm
a
short
person.
So
this
is
like
a
tough
task
for
me
and
you're,
going
to
lean
to
one
side.
Whichever
side
you
want
go
with
the
crowd,
follow
yourself
and
then
you're
going
to
lean
to
the
opposite
side
and
then
you're
going
to
drop
your
hands
and
like
shake
it
all
off.
A
So
hopefully,
everyone's
energized,
my
name,
is
Sofia.
It
rhymes,
with
mafia
I'm,
a
JavaScript
developer
and
I'm
one
of
the
open-source
maintainer
on
a
project
called
interact,
which
is
a
desktop-based
interactive
computing
environment.
If
you're
curious
as
to
what
that
is,
or
you
already
know,
what
interact
is
and
are
a
fan,
I
have
a
couple
of
stickers
to
share
with
you.
So
if
you
come
up
to
me
afterwards,
I'd
be
glad
to
give
you
some
so
few
disclaimers
before
I
start
my
talk.
A
A
Another
disclaimer
is
that
this
is
my
first
time
presenting
this
talk.
I
present
to
talks
that
were
deep
dives
on
JavaScript
engine
internals
before
I
did
one
on
garbage
collection
in
the
v8
engine
and
I'm
doing
one
on
crankshaft
now,
and
one
thing
I
can
say
is
that
writing
really
good
talks
is
kind
of
a
collaborative
effort
between
me
and
you.
So
if
you
don't
understand
something
out
the
duration
of
this
talk,
it's
not
your
fault,
it's
my
fault
for
not
making
the
material
clear.
A
So
let's
talk
about
crankshaft,
which
is
the
optimizing
compiler
that's
found
in
the
v8
JavaScript
engine,
which
is
used
by
node.
Whenever
you
run
code
in
node,
it
passes
through
the
crankshaft
compiler,
unless
you
explicitly
set
the
crankshaft
flag
to
pulse
at
the
command
line.
So
it's
important
to
understand
these
internals.
A
This
is
kind
of
the
computationally
fundamental
aspects,
it's
beyond
syntax
and
the
inner
workings
of
a
particular
library.
It's
the
stuff
that
you
can
take
with
you,
wherever
you
go,
whether
you
decide
to
stay
in
the
JavaScript
world
or
whether
you
start
to
use
another
language
more
often
or
like
wherever
software
takes
us
in
the
next
20
years
I.
A
Thirdly,
there's
not
a
lot
of
great
content
out
there
that
explains
the
internals
of
the
JavaScript
v8
engine.
You
have
to
do
a
lot
of
deep
digging
and
kind
of
already
have
a
lot
of
experience
in
this
field
to
get
good
content.
So
part
of
me
doing
this
is
to
get
more
content
out
there
into
the
community
and,
as
I
mentioned
earlier,
I
want
you
to
help
me
do
that.
A
So,
if
you
have
any
feedback,
be
sure
to
provide
it
and
finally,
it's
fun:
it's
not
fun
in
the
way
that
javascript
is
usually
fun,
which
is
very
accelerated.
Building
it's
fun
because
there's
like
a
certain
satisfaction
that
comes
when
you
understand
the
inner
workings
of
something
that
makes
all
of
our
work
possible
and
now,
hopefully,
with
all
of
those
reasons.
You're
like
super
jazzed,
to
learn
more
about
this,
so
I'm
just
going
to
dive
right
in
note
that
this
is
a
very
beginner
friendly
talk.
A
So
the
first
couple
of
questions
we're
going
to
need
to
answer
our:
what
is
the
compiler
and
specifically,
what
is
an
optimizing
compiler?
So,
let's
start
off
with
answering
the
first
question:
a
compiler
is
a
program
that
translates
source
in
one
language
to
source
in
another
language.
That's
its
most
simplest
definition
with
that
we
can
ask
some
answer
the
question:
what
is
an
optimizing
compiler,
so
an
optimizing
compiler
is
one
that
more
intelligently
looks
at
the
code
that
it's
translating
to
try
to
improve
some
aspect
of
the
code.
A
So,
in
addition
to
the
crankshaft,
which
is
the
optimizing
compiler
v8
does
have
an
on
optimizing
compiler,
it's
not
going
to
be
the
focus
of
this
talk,
but
I'm
going
to
mention
it
briefly.
Here
we're
going
to
do
a
brief
comparison
of
the
two
compilers
that
are
found
in
v8
the
optimizing
and
not
optimizing
compilers.
A
So
the
non
optimizing
compiler
is
known
as
the
full
codegen
compiler
and
the
optimizing
compiler
is
known
as
crankshaft
so
really
quickly.
The
full
codegen
compiler
runs
much
faster
and
that's
because
it
doesn't
perform
any
optimizations
on
the
source.
So
you
get
slower
and
an
optimized
code
at
the
end,
and
it
directly
creates
machine
language
code
from
the
abstract
syntax
tree.
If
I'm
saying
a
lot
of
words
that
you
don't
understand,
don't
worry
I'm
going
to
explain
them
as
we
get
deeper
into
our
talk.
A
A
This
is
because
the
crankshaft
compiler
is
much
slower
because
it
needs
to
produce
some
optimizations
on
the
code
and,
as
a
result,
it
produces
faster
and
hence
optimized
code,
and
it
does
not
directly
create
machine
language
code
from
the
abstract
syntax
tree.
It
has
two
intermediary
representations
that
I'm
going
to
talk
about
in
this
talk.
So
all
code
goes
through
the
full
codegen
compiler,
but
only
some
code
goes
through
the
crankshaft
compiler
and
in
a
way
they're
like
best
friends
in
the
JavaScript
world.
A
They
allow
us
to
write,
perform
a
JavaScript
by
working
in
tandem,
and
so
with
that
in
mind,
we
want
to
answer
the
question
of
how
crankshaft
works
and
we're
going
to
go
through
this
in
a
step-by-step
process,
and
the
first
step
is
the
parsing
of
the
code.
So
poor
Singh
is
the
process
of
converting
the
source
code
that
you
write
in
JavaScript
into
what's
called
an
abstract
syntax
tree
abbreviated
as
a
st.
It's
an
action,
that's
shared
by
both
the
optimizing
and
non
optimizing.
A
Compilers
NVA,
even
though
it's
shared
by
both
of
those
compilers,
the
abstract
syntax
tree
for
a
particular
piece
of
source,
is
never
stored
in
memory.
It's
something
that's
translated
as
it's
needed.
So
every
time
you
need
to
get
the
abstract
syntax
tree
for
a
chunk
of
code.
You
call
the
parser
to
get
it
and
the
process
of
parsing
code
into
an
abstract.
Syntax
tree
is
one
of
those
fundamentals
that
I
discussed
earlier.
It
happens
in
every
compiler
and
interpreter
in
every
programming
language.
And
what
happens
is
you
have
the
grammar
of
a
programming
language?
A
This
is
the
key
words
and
phrases
that
define
the
syntax
of
that
language
and
they're
used
to
generate
an
intermediary
data
structure.
That's
known
as
a
parse
tree,
and
the
parse
tree
is
then
converted
to
an
abstract
syntax
tree
and
the
abstract.
Syntax
tree
is
a
tree
data
structure.
It
has
one
special
property
in
that
the
roots
or
the
parent
nodes
are
operand
operators
and
their
children
are
operands,
so
it
ends
up
looking
something
like
this.
This
is
the
abstract
syntax
tree
for
the
operation
2
times,
4
minus
5,
you'll
notice.
A
A
Once
you
have
the
abstract
syntax
tree,
it's
translated
to
one
of
the
higher-level
intermediary
data
structures
that
I
mentioned
earlier.
This
data
structure
is
known
as
the
hydrogen
graph.
So,
in
addition
to
having
the
abstract
syntax
tree,
hydrogen
is
also
going
to
need
some
information
about
variable
definitions
and
they're
in
the
program
they're
types
in
their
scope
to
perform
some
optimizations
and
in
the
process
of
building
this
hydrogen
graph
representation.
Crankshaft
is
going
to
do
some
optimizations
to
the
code
as
its
building
the
graph.
A
One
of
the
optimizations
that
will
do
is
notice,
function,
inlining
and
I'll
elaborate
on
that
in
just
a
little
bit.
So
this
representation
has
one
special
property.
It's
known
as
the
static
single
assignment
property.
Try
saying
that
10
times
really
fast.
It's
lingo
that's
used
often
in
the
compiler
design
world,
and
it
basically
means
that
there's
an
intermediate
representation
of
the
source
that
assigns
each
variable
only
once
and
defines
variables
before
they're
used
and
this
property
makes
it
easier
to
optimize
code.
So,
as
a
quick
example,
let's
take
a
look
at
this
piece
of
code.
A
We
define
two
variables.
My
first
bar
in
my
second
bar
specifically,
my
first
bar
is
instantiated
1,
1st
2,
0
1
and
then
redefined
2,
a
3.
If
we
were
to
convert
this
code
so
that
it
satisfies
the
requirements
of
the
SS,
a
property,
it
would
look
something
like
this
in
this
particular
style.
It's
much
easier
for
the
computer
to
see
that
the
first
definition
of
my
first
bar
is
it
really
necessary
because
it's
eventually
overridden
before
it's
used.
A
Once
the
hydrogen
representation
has
been
generated,
it
needs
to
be
optimized
and
I'm
going
to
go
through
a
couple
of
optimizations.
Here
there
are
tons
of
them.
It
builds
on
the
work
of
like
compiler
design.
That's
been
going
on
for
the
past
30
40
50
years.
Maybe
but
I'll
cover
just
a
few
here,
and
the
first
is
the
one
I
mentioned
earlier.
That
happens
when
the
hydrogen
representation
is
being
constructed
and
it's
known
as
function
inlining
function.
Inlining
is
something
that
happens
when
function
calls
are
expanded
into
their
actual
function
body.
A
So
what
does
that
look
like?
So,
for
example,
we
might
start
with
two
functions:
add
and
subtract
like
they're
written
out
here
we
have
an
odd
function
and
a
subtract
function
that
invokes
the
add
function
using
a
function.
Call
within
the
subtract
function
takes
up
a
lot
of
operations
at
the
very
low
level
in
the
stack
involved,
calling
the
function,
putting
on
the
stack
getting
its
return
value.
A
Instead,
we
can
inline
the
function
that
is
directly
replace
the
call
with
the
source
that
would
have
been
executed
and
we
can
simplify
even
further,
so
something
that
would
have
taken
many
operations
at
the
low
level
in
the
machine
now
takes
just
a
few.
Because
of
this
so
note
that
you
can't
in
line
every
function
as
you're
building
the
hydrogen
representation.
One
example
of
a
function
that
can't
be
inlined
is
functions
that
call
themselves
due
to
their
obvious
recursive
nature.
A
You
can't
like
be
in
lining
that,
because
you
just
have
a
terrible
time
and
another
optimization
involves
killing
off,
what's
known
as
dead
code,
this
happens
after
the
hydrogen
representation
has
been
constructed
and
it's
used
to
eliminate
code
fragments
in
the
hydrogen
representation
that
don't
have
any
side
effects
or
purpose
these
code.
Fragments
can
be
ones
that
were
introduced
in
the
optimization
process.
That
happened
during
the
construction
of
the
hydrogen
representation,
or
they
can
be
useless
code
chunks
that
were
introduced
by
you
as
the
developer
and
didn't
weren't
optimized
out
when
the
graph
was
constructed.
A
Semi-Related
to
removing
dead
code,
we
also
want
to
go
through
a
process
of
what
is
known
as
common,
sub-expression,
elimination
or
CSE,
because
we
love
acronyms
here
in
the
tech
world,
and
this
process
replaces
expressions
that
are
similar
to
previous
expressions
that
were
encountered
in
our
hydrogen
representation
with
the
expression
that
was
encountered
first,
essentially,
a
method
of
D
duplicating
code.
That's
present
in
the
hydrogen
graph
and
there's
many
more
optimizations
to
talk
about
that
happen
both
when
the
hydrogen
graph
is
being
constructed,
and
afterwards
the
money's
I
mentioned
below.
A
A
The
main
distinction
between
the
hydrogen
representation
and
the
lithium
representation
is
that
the
code
expressions
represented
in
the
lithium
representation
of
your
source,
our
platform
dependent.
So
those
instructions
are
dependent
on
the
processor
that
your
machine
is
using.
Every
processor
generally
has
its
own
kind
of
machine
language
that
it
uses
at
the
low
level,
and
once
you
have
the
low-level
lithium
representation,
it's
translated
directly
into
native
code
that
runs
on
your
machine
to
power.
All
the
JavaScript
that
you
write.
This
translation
might
be
very
to
rock.
A
You
might
already
have
something
in
the
elysium
representation
that
can
be
directly
translated
to
machine
code
without
having
to
do
any
work,
but
sometimes
you
might
need
to
do
some
work
to
get
it
to
a
more
granular
granular
level
on
the
machine.
After
all
of
that
is
done,
you
finally
have
JavaScript
code
that
you
can
run
that's
kind
of
like
the
insane
process
of
what's
going
on
under
the
hood.
A
As
you
write
your
JavaScript
code,
but
it's
also
not
totally
true
I
said
there
was
a
lot
going
under
the
hood
of
JavaScript
engines
and
that's
absolutely
true,
I
kind
of
touched
on
a
small
portion,
but
a
fundamental
portion
of
the
crankshaft
compiler,
because
I
only
have
20
minutes,
unfortunately,
and
there's
plenty
more
to
read
about,
including
all
of
the
stuff
that
I'm
going
to
cover
now.
The
first
thing
is
something
known
as
the
optimization
so
I
mentioned
a
while
back,
sat
in
addition
to
getting
the
abstract
syntax
tree
for
your
source.
A
The
crankshaft
compiler
also
has
some
information
about
the
types
of
variables
and
their
scopes,
and
it
uses
this
information
to
make
some
optimizations
and
make
some
optimistic
assumptions
about
the
types
of
data
that
it'll
get
in
certain
code
blocks
and
optimizes
specifically
for
those
types
now.
Sometimes
those
optimistic
assumptions
might
be
invalidated
when
your
code
is
running
and
the
optimized
version
of
the
code
might
not
be
ready
to
handle
the
type
of
data
that
it's
given.
A
A
So
thanks
for
having
me
as
I
mentioned
earlier,
this
is
a
first
draft
of
the
talk
is
my
first
time
presenting
it
in
front
of
an
audience.
If
you
didn't
understand
anything,
it's
not
your
fault,
it's
mine!
So
please
do
email
me
at
Sofia,
at
Sofia,
at
Sofia,
dot
rocks
so
mouthful
and
I'll
be
sure
to
incorporate
your
feedback
into
future
versions
of
the
talk
so
that
we
can
get
really
quality
content.
A
As
I
give
this
presentation
more
and
more,
and
so
with
that
I'll
open
the
floor
up
to
questions,
there's
a
mic
in
the
middle
of
the
room.
So
if
you
have
any
questions,
just
come
up
and
say
them
instead
of
like
yelling
them
at
me,
and
also
so
they
can
be
captured
on
video
I
do
have
one
restriction
that
I've
started
to
place
when
I
do
conference
talks
and
there's
a
QA
and
that's
you
could
only
ask
questions
if
this
is
your
first
time
attending
a
tech
conference
or
you're
a
nun
to
underrepresented
minority.
A
If
you
don't
fit
any
of
those
categories
feel
free
to
come
up
to
me
afterwards
during
the
conference
I'll
be
hanging
around
and
just
talk
to
me,
one-on-one
and
I'd
be
happy,
sir.
Your
questions
I
have
no
one,
has
any
questions
or
is
too
shy.
I
can
step
down
and
come
off
to
the
side
and
have
one-on-one
conversations
with
folks
and
then
let
the
next
speaker
get
ready,
did
I
just
blow.
All
of
your
minds
with
my
talk
is
that
is
that
the
effect
that's
going
on
right
now,
you
guys
are
just
like
whoa.
A
This
is
how
JavaScript
happens.
That's
a
good
effect.
That's
the
effect
I
like,
so
that
I
will
be
off
to
the
side.
If
you
want
to
ask
me
something
what
on
one
right
over
there,
as
I
mentioned
earlier,
I
do
have
interact
stickers
for
those
of
you
who
are
interested
in
interact
or
use
it
hopefully
or
just
like
having
stickers
on
their
laptop
thanks.
So
much
everybody.