Run results for: Toggle Classses

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.89 Safari/537.36

Browser: Chrome 62

Operating system: Linux

Device Platform: Other

Date tested: 7 years ago

Test name	Executions per second
Toggle	10299.3 Ops/sec
ClassName + remove	3078.4 Ops/sec
My way	2141.2 Ops/sec

HTML Preparation code:

<!DOCTYPE html>
<html>
<head>
	<title>Color Changer</title>
	<style type="text/css">
		.purple {
			background: purple;
		}
	</style>
</head>
<body>
	<button>CLICK ME!</button>
	<script type="text/javascript" src="exercise1.js"></script>
</body>
</html>

Tests:

Toggle
document.querySelector("button").addEventListener("click", function(){ document.body.classList.toggle("purple") });
ClassName + remove
document.querySelector("button").addEventListener("click", function(){ document.body.className = "purple" document.body.classList.remove = "purple" });
My way
var isWhite = true; document.querySelector("button").addEventListener("click", function (){ if (isWhite){ document.body.style.background = "purple"; } else { document.body.style.background = "white"; } isWhite = !isWhite; });

Run results for: Toggle Classses

Toggle

ClassName + remove

My way