Performance

Question 1

Aim to have animations render each frame in under how many milliseconds?

Answer 1

10ms or less

Question 2

Respond to user input in how much time?

Answer 2

under 100ms

Question 3

What are the major segments of the “pixel” pipeline — the things you have most control over in terms of rendering to screen quickly?

Answer 3

JavaScript > Styles > Layout > Paint > Composite

Question 4

How can you make CSS non render-blocking?

Answer 4

1. Use media queries in the link tag, eg media=”(min-width: 40em)”. The styles will still load but won’t block.
   2: inline css.

Question 5

What does the domContentLoaded event signify?

Answer 5

The DOM is ready and there aren’t any render-blocking stylesheets or js. We can (potentially) build the render tree.

Question 6

What is the render tree?

Answer 6

It combines the DOM tree and the CSSOM tree and it used to compute layout and painting for visible elements.