- [Instructor] If we want to execute code on each frame,…we shouldn't be using set interval or set timeout anymore.…We need to use request animation frame,…because it's the only way to guarantee…that our code will be executed after each frame has started.…It's part of the latest HTML5 spec,…so it's in standard in HTML5.…It will let us execute code on the next frame…before actually painting and parsing that frame,…and it's guaranteed to be executed on the next frame.…
So request animation frame,…will execute code in the next frame.…It's much better than timers,…and we should always keep that code small anyway,…because if you're taking more than ten milliseconds…to execute that code,…we are going to push the next frame,…so we will have frame drop anyway.…But this is the only way that we have…to guarantee that our code, for example,…to ablate the UI to move elements on the screen…will be executed on time before rendering…and parsing the next frame.…
The API is really simple.…It's just requestAnimationFrame,…and we sent a call back as an argument.…
- 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 Appropriate for all
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.