- [Narrator] To improve responsiveness of our app,…we need to understand frames.…So the browser is rendering frames all the time.…We want to achieve 60 frames per second…for better performance, unless we are doing VR,…virtual reality or augmented reality.…In those cases, we might want more frames per second,…but on a normal screen, 60 frames per second is enough.…And to achieve 60 frames per second,…we need to understand how the system works.…At least, at a high level overview…and then use a new approach.…
So, this is a simplified version of the architecture…of how the browser is rendering frames.…Each frame, so 60 frames per second.…So this diagram will try to be executed 60 times per second.…So a frame starts.…In that case, the browser will start…processing your input demands.…So if you have an on click handler, on scroll,…or something like that, after you do some changes,…there might be some new HTML that needs to be parsed.…The browser will calculate the styles, the layout,…new CSS that you have changed in the input events,…
- Understanding the Performance APIs
- Navigation Timing
- Calculate milestones in the Performance Timeline
- Measuring the timing of navigation, resources, servers, and more
- Reading network and device information
- Optimizing code
Skill Level Advanced
Designing Websites for Performancewith Brian Wood43m 32s Intermediate
1. Reactive Web Performance
2. Performance Basics
3. Measure Performance
4. Decision-Making Helpers
5. Execute Code More Efficiently
Next steps1m 31s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.