Pau Sanchez
Programming, technology & business

Win98 defrag simulation in vanilla javascript

Back in the day (25+ years ago?) Windows 95/98 disk defrag/defragmenter tool was used in order to rearrange blocks of data in the disk and make applications run faster. Disks were crazy slow and running a defrag tool needed hours and hours to finish. On top of that, you could not use any program in the computer since any write operation would alter the disk composition and the whole process would need to be resatarted.

I remember looking at this screen for hours back then, trying to understand what was going on. There was no internet at the time (at least not widespread), so there was not much left to do than staring at the screen of the computer from time to time while defrag tool was rearranging disk blocks.

I’m feeling a little bit nostalgic, so I decided to spend some time trying to recreate the visuals in vanilla javascript. I used canvas for rendering and Uint32Array to represent the blocks in disk. No jQuery/Vue/React/Svelte/… just regular HTML & JS for the controls.

Below you have several parameters you can play with.

  • The ones with an exclamation mark (⚠️) will reset the state of the disk and will restar the animation. They alter the disk structure/composition.

  • The rest of parameters can be changed without any side-effect

Feel free to tweak and play with the parameters:

Defrag Finished! 🎉🎉🎉
Visual size of blocks:
Animation Delay:
Max Blocks To Process:
Disk Size ⚠️
Regular Blocks Percentage ⚠️
Sytem Blocks Percentage ⚠️
Random Seed ⚠️

This is just a visual representation, not a full-blown simulation of disk block behavior/fragmentation. Here I’m defining fragmentation as the number of empty blocks at the start. I know, I know, this is a poor/inadequate definition, but it still gives a general idea for the purpose of this visual simulation.

There are three types of blocks: Empty, Regular, System

The “defrag” algorithm here just fills empty blocks by picking random sequences of regular blocks ahead of the current position and moves them to fill those empty blocks, thus, creating more gaps ahead that would need to be filled. System blocks are never moved.

I thought on creating an actual FAT32 fragmented blocks but the algorithm would have had its complexity, since I’m guessing there might have been situations where files could not be placed contiguosly and I would need to get creative in rearranging things several times to reach a 0% fragmentation (e.g moving them to the end of the disk if enough space available, swapping blocks, …).

In this simulation I just tried to replicate the look & feel.

Have fun.