JS vs JPG
TL;DR: sometimes processing of JS file can be faster than the processing of JPG of the same size in bytes, you’d better check your own project before optimizing it.
Several days ago I’ve read an article by Addy Osmani The Cost Of JavaScript. It’s a great explanation about the importance of optimization of JS, especially for mobile resources. The main idea of the article is that JS processing consists of not only network data transferring but also decompression, parsing, compiling and executing. These operations can take a lot of time, especially on slow mobile devices. So to make fast and convenient web application it’s important to track JS files size and content.
I agree with Addy’s ideas but one thing which confused me is this picture:
Addy wants to show us that it’s faster to load an image than process a JS file of the same size. It looks logical because everyone knows that JS parsing and compilation is a very sophisticated process and image parsing is not. Unfortunately, I haven’t found any source code or images which were used to make this picture and that is why I have a question: Is JS processing always slower than images processing for the files of the same size?
Let’s talk a bit about images processing. JPEG is a method of lossy compression for digital images. This statement leads to several consequences:
- two files of the same size can be images of different resolution (e.g. 20x20 and 400x400);
- the browser has to convert JPEG into some sort of BMP to render an image.
Let’s check two cases:
- the normal image I used classic Lenna image from
Wikipedia converted to 320x320 JPEG using ImageMagick command
convert Lenna.png -resize 320x320 Lenna.jpg. It produced 43KB file; - edge case image I used ImageMagick command
convert -size 3000x3000 xc:white empty.jpgto create 3000x3000 image filled with white color. It produced 35KB file.
These files have a similar size. I want to check if it will be processed for the same period of time.
Now I want to write several words about JS. JS compilation is very complicated and it’s obvious that two different JS files of the same size can be processed for a different time. To see this difference let’s take a look at two examples:
- React.js Hello World app stored in GitHUb repo. I used create-react-app to build it. It produced 37KB file;
- syntactically correct useless JS. I used the script from this gist to produce 37KB file.
Hardware and software
- MacBook Pro Retina 15" Mid 2014 2,5 GHz Core i7 16 GB RAM
- Node.js v10.15.1
- nginx 1.15.8
- Google Chrome 74.0.3729.157
Results
| Use case | Processing time |
|---|---|
| Normal image 320x320 34KB | 1.32ms |
| Blank synthetic image 3000x3000 35KB | 37.18ms |
| React Hello world 37KB | 19.19ms |
| Simple synthetic JS 37KB | 1.39ms |
Coming to a conclusion I want to mention the following:
- It’s important to describe all code and tools which can be used to reproduce experiment;
- The browser can spend different time to process pictures of the same size in bytes;
- The browser can spend different time to process JS files of the same size in bytes;
- The browser can spend more time process some pictures than to process some JS of the same size in bytes;
- Optimization is important.