JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testPanel">
	<input id="clear" type="button" value="Clear">
	<input id="autoscroll" type="button" value="Autoscroll">
	<br>
	<input type="radio" name="test" value="unoptimized" checked> Unoptimized<br>
	<input type="radio" name="test" value="cachingObjects"> Caching objects<br>
	<input type="radio" name="test" value="improvedLoop"> Improve loop<br>
	<input type="radio" name="test" value="mapSections"> Map sections<br>
	<input type="radio" name="test" value="optimized"> Optimize all<br>
	<input type="radio" name="test" value="throttleUnoptimized"> Unoptimized (throttle)<br>
	<input type="radio" name="test" value="throttleOptimized"> Optimize all (throttle)<br>
	<div id="results"></div>
</div>
<div id="navigation">
	<ul>
	    <li><a href="#section1">Section 1</a></li>
	    <li><a href="#section2">Section 2</a></li>
	    <li><a href="#section3">Section 3</a></li>
	    <li><a href="#section4">Section 4</a></li>
	    <li><a href="#section5">Section 5</a></li>
	</ul>
</div>
<div id="sections">
	<div id="section1" class="section">
	    I'm section 1
	</div>
	<div id="section2" class="section">
	    I'm section 2
	</div>
	<div id="section3" class="section">
	    I'm section 3
	</div>
	<div id="section4" class="section">
	    I'm section 4
	</div>
	<div id="section5" class="section">
	    I'm section 5
	</div>
</div>

CSS

#testPanel {
	font-size: 10px;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 250px;
	overflow: auto;
	padding: 10px;
	box-sizing: border-box;
}
#navigation {
	position: fixed;
	top: 0;
	left: 250px;
}
#sections {
	position: absolute;
	top: 0;
	left: 400px;
}
.section {
	height: 200px;
	margin: 10px;
	padding: 10px;
	border: 1px dashed black;
}
#section5 {
	height: 1000px;
}
.active {
	background: red;
}

JavaScript

function TestPerformance(callback, resultsContainer) {

	var ITERATIONS = 1;

	var returnedValue;
	var numberOfCalls = 0;
	var totalTime = 0;
	var $results, $calls, $totalTime, $avgTime;

	this.measureTime = function() {
		var start = performance.now();
		for (var i = 0; i < ITERATIONS; i++) {
		    returnedValue = callback();
		}
		if (returnedValue != 'aborted') {
		    var time = performance.now() - start;
		    totalTime += time;
		    numberOfCalls++;
		    this.printResults();
		}
	}

	this.printResults = function() {
		if (!$calls) {
		    resultsContainer.prepend(
		        '<div id="' + callback.name + '">' +
				    '<h2>' + callback.name + '</h2>' +
				    '<p>' +
						'<span><b>Calls</b>: <span class="calls"></span> - </span>' +
						'<span><b>Time</b>: <span class="totalTime"></span> - </span>' +
						'<span><b>Avg.</b>: <span class="avgTime"></span></span>' +
				    '</p>' +
		        '</div>'
		    );
		    $results = $('#' + callback.name);
		    $calls = $results.find('.calls');
		    $totalTime = $results.find('.totalTime');
		    $avgTime = $results.find('.avgTime');
		}
		$calls.html(numberOfCalls);
		$totalTime.html(Math.round(100 * totalTime) / 100 + 'ms');
		$avgTime.html(Math.round(100 * totalTime / numberOfCalls) / 100 + 'ms');
	}
}

// modified throttle function to adapt it to the test  
var lastCall, timeoutId;
function throttle(fn, interval) {
	var now = new Date().getTime();
	if (lastCall && now < lastCall + interval) {
		clearTimeout(timeoutId);
		timeoutId = setTimeout(function () {
			lastCall = now;
			fn.call();
		}, interval - (now - lastCall) );
		return 'aborted';
	} else {
		lastCall = now;
		fn.call();
	}
}

$(document).ready(function() {

	var $navigationLinks = $('#navigation > ul > li > a');
	var $sections = $(".section");
	var $sectionsReversed = $($(".section").get().reverse());
	var sectionIdTonavigationLink = {};

	$sections.each(function() {
		sectionIdTonavigationLink[$(this).attr('id')] = $('#navigation > ul >...