Benchmark: CleanUpFontFamilyStyles optimization

HTML Preparation code:

<script type="text/javascript" src="https://publicstatic.tableausoftware.com/vizql/v_100001608191615/javascripts/mscorlib.js"></script>
<script type="text/javascript" src="https://publicstatic.tableausoftware.com/vizql/v_100001608191615/javascripts/vqlui.debug.js"></script>

<div id="testRoot">
  <span>1</span>
  <span>1</span>
  <span>1</span>
  <span>1</span>
  <span>1</span>
  <span>1</span>
  <span>1</span>
</div>

Script Preparation code:

function CleanUpFontFamilyStyles1(node) {
		var fontOjects = node.find('span');
		for (var ii = 0; ii < fontOjects.length; ++ii) {
			var obj = fontOjects.eq(ii);
			var fontFamily = obj.css('font-family');
			if (!ss.isNullOrEmptyString(fontFamily)) {
				var newCss = {};
				var fontFaces = [];
				fontFaces.push(fontFamily);
				if (ss.startsWithString(fontFamily, "'") || ss.startsWithString(fontFamily, '"')) {
					fontFamily = fontFamily.substr(1, fontFamily.length - 2);
				}
				if (fontFaces.length > 1) {
					newCss['font-family'] = fontFaces.join(',');
					obj.css(newCss);
				}
			}
		}
	};

function CleanUpFontFamilyStyles2(node) {
		var fontOjects = node.find('span');
  		
  		fontOjects.each(function( index, obj ) {
			var fontFamily = obj.style.fontFamily;
			if (!ss.isNullOrEmptyString(fontFamily)) {
				var newCss = {};
				var fontFaces = [];
				fontFaces.push(fontFamily);
				if (ss.startsWithString(fontFamily, "'") || ss.startsWithString(fontFamily, '"')) {
					fontFamily = fontFamily.substr(1, fontFamily.length - 2);
				}
				if (fontFaces.length > 1) {
					newCss['font-family'] = fontFaces.join(',');
					obj.css(newCss);
				}
			}
        });
	};

function CleanUpFontFamilyStyles3(node) {
		var fontOjects = node.find('span');
  		
  		fontOjects.each(function( index, obj ) {
			var fontFamily = window.getComputedStyle(obj).fontFamily;
			if (!ss.isNullOrEmptyString(fontFamily)) {
				var newCss = {};
				var fontFaces = [];
				fontFaces.push(fontFamily);
				if (ss.startsWithString(fontFamily, "'") || ss.startsWithString(fontFamily, '"')) {
					fontFamily = fontFamily.substr(1, fontFamily.length - 2);
				}
				if (fontFaces.length > 1) {
					newCss['font-family'] = fontFaces.join(',');
					obj.css(newCss);
				}
			}
        });
	};

Tests:

Test 1
CleanUpFontFamilyStyles1($("#testRoot"));
Optimized
CleanUpFontFamilyStyles2($("#testRoot"));
with getComputedStyle
CleanUpFontFamilyStyles3($("#testRoot"));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Test 1
Optimized
with getComputedStyle

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 7 years ago)

User agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36

Browser/OS: Chrome 52 on Windows 7

View result in a separate tab

Test name	Executions per second
Test 1	10298.2 Ops/sec
Optimized	72364.5 Ops/sec
with getComputedStyle	24684.0 Ops/sec

CleanUpFontFamilyStyles optimization (version: 7)

Comparing performance of: Test 1 vs Optimized vs with getComputedStyle

Created: 7 years ago by: Registered User

Jump to the latest result

Test 1

Optimized

with getComputedStyle

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A