Improving Front End Performance

take this coursetake this course

course overview

You’ve seen the seamless browser demos: shimmering scatterplots, maps projected on the fly, smoothly scrolling tables with endless data, in-browser arcade games, single-page apps that feel like a desktop app. But on your project, when you press a button it takes more like a second or two to get a response. Your grids stutter. Animations just don’t fire at the right time. How can you make your front-end code fly? Modern browsers are quite powerful, but without understanding their strengths and weaknesses, it’s easy to write stodgy web pages. In this course, you'll learn how browsers are constructed (network communication, rendering algorithms, event handlers and JavaScript engines) and how to write code to play to those strengths and work around the weaknesses. In tandem with learning how to leverage your browsers’ strengths and weaknesses, you’ll work through a series of hands-on exercises in JavaScript, HTML, and CSS to take a typical data display from a non-interactive 6-second render time to an animatable 80ms render time—i.e., your render time will increase by almost two orders of magnitude.Note: Students should be fluent in JavaScript. No back-end knowledge is necessary.

LENGTH: 1 - 2 Days

FORMAT: Lecture with independent exercises and Q&A

intended audience

  • Front-end developers
  • UI developers
  • Product owners
  • Product managers
  • UX designers
  • Executive management with oversight responsibility

customizable highlights

  • Learn the anatomy of a browser (including layout and text rendering, graphics rendering, and caches)
  • Discover the most common performance issues
  • Diagnose your own browser’s performance issues
  • Learn how to use profiling/debugging tools
  • Understand rendering and reflow issues (including server vs. client rendering)
  • Know when it pays to be clever in JavaScript
  • Get savvy on DOM manipulation, event handling and caching
  • Target efficient client/server communication
  • See how even apparently heavy third-party frameworks can help you with speed
  • Learn the fundamentals of ReactJS