Optimization

May 29, 2020 ยท View on GitHub

Projected Time

About 30-45 minutes

  • 20 mins Lesson
  • 10 mins Independent Practice
  • 10 mins Challenge

Prerequisites

Understand that JavaScript goes into websites and that when you go to a website on a browser, the code needs to get sent to the browser and loaded, likely needing to make API calls to retrieve data.

Motivation

Users are fickle: website performance matters.

Objectives

Participants will be able to:

  • explain caching and minification

Materials

Lesson

  • Caching

    • What is caching?

      • temporarily saving small chunks of data locally

    • How does caching make a website faster?

      • reduces the number of API network requests, which are slow compared to retrieving the data locally

    • What are some tips for implementing caching?

      • cache consistency: data will be fast, but not necessarily up to date
      • complexity: maintaining the code will be more difficult
      • memory: caching takes up memory (RAM)

  • Minification

    • What is minification?

      • Making JavaScript files smaller without changing the logic in them
      • for example, white spaces are removed, variable names are shortened...

    • How does minification make a website faster?

      • Large files take longer to download. Minification makes the files smaller.

    • What are some tips for implementing minification?

      • You can find free tools to minify your code before it gets deployed to users and developers on the non-minified version.
      • CSS files can also be minified.

  • Read through lesson slides Optimization

  • Watch Minifying JS and CSS video (6 mins watch)

  • Watch Caching techniques video (6 mins watch)

  • Utilize Live JavaScript minifier tool

Common Mistakes / Misconceptions

Code on the server-side (ie. backend code) doesn't benefit from being minified because that code is not delivered to the user's browser.

Independent Practice

Find a minifier online and test it out with some JavaScript code, like this JavaScript minifier.

Challenge

Look up the advanced optimization concepts introduced in the slides:

  1. Algorithm optimization
  • What is "big O" notation?
  1. Asynchronous I/O (input/output)
  • What are JavaScript Promises? How do they improve performance?

  1. Precaching

  2. Concurrency

  • Do different languages have different concurrency models? How does JavaScript one work?
  • What are stack, heap, and queue?
  • What is the JavaScript event loop?