Performance Flashcards
Based on Google Dev docs about performance, https://developers.google.com/web/fundamentals/performance/rail
1
Q
Aim to have animations render each frame in under how many milliseconds?
A
10ms or less
2
Q
Respond to user input in how much time?
A
under 100ms
3
Q
What are the major segments of the “pixel” pipeline — the things you have most control over in terms of rendering to screen quickly?
A
JavaScript > Styles > Layout > Paint > Composite
4
Q
How can you make CSS non render-blocking?
A
- Use media queries in the link tag, eg media=”(min-width: 40em)”. The styles will still load but won’t block.
2: inline css.
5
Q
What does the domContentLoaded event signify?
A
The DOM is ready and there aren’t any render-blocking stylesheets or js. We can (potentially) build the render tree.
6
Q
What is the render tree?
A
It combines the DOM tree and the CSSOM tree and it used to compute layout and painting for visible elements.
