A very simple webtoy to visualize pipeline hazards
https://peace.uber.space/hazardtoy
src | ||
.gitignore | ||
.htmlnanorc.js | ||
package-lock.json | ||
package.json | ||
postcss.config.js | ||
README.md | ||
tailwind.config.js |
Hazardtoy
Hazardtoy is a small webtoy meant to demonstrate how pipeline hazards work.
It shows data-hazards like read-after write as well as branch hazards.
Allowed Instructions
To keep the code to a minimum because i am lazy, the "cpu" only supports four different instructions:
nop
does nothingj <address>
jumps unconditionally to an absolute addressaddi <destination> <source> <immediate>
adds an immediate value (a number) to register<source>
and stores the result in<destination>
add <destination> <source1> <source2>
likeaddi
but adding two registers
Registers
The cpu supports 6 registers which are normal javascript numbers.
Building
Hazardtoy is based on Parcel, tailwindcss, and Alpine.js
To start a development server, run:
npm install
npm start
To build for production:
npm ci
npm run build