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

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

I'll break down the benchmark and its options for you.

**Benchmark Definition:**

The benchmark measures the performance of three different approaches to cleaning up font family styles in HTML elements.

**Script Preparation Code:**

There are two main script functions:

1. `CleanUpFontFamilyStyles1(node)`: This function iterates over all `<span>` elements within a given node (in this case, `#testRoot`). For each element, it extracts the font family style and checks if it's not an empty string. If so, it creates a new CSS object with only the first character of the font family removed from both quotes. It then updates the span element's style with the new CSS.
2. `CleanUpFontFamilyStyles2(node)`: Similar to the previous function, but uses the `each` method provided by jQuery to iterate over the elements.
3. `CleanUpFontFamilyStyles3(node)`: This function also iterates over all `<span>` elements within a given node, but uses the `getComputedStyle` API to get the font family style and then updates the span element's style.

**Options Compared:**

The three options being compared are:

1. `CleanUpFontFamilyStyles1` (iterating over elements using jQuery)
2. `CleanUpFontFamilyStyles2` (using the `each` method provided by jQuery)
3. `CleanUpFontFamilyStyles3` (using the `getComputedStyle` API)

**Pros and Cons of Each Approach:**

1. `CleanUpFontFamilyStyles1`:
	* Pros: Efficient use of jQuery's iteration methods, potentially faster execution.
	* Cons: May require additional setup or dependencies due to its reliance on jQuery.
2. `CleanUpFontFamilyStyles2`:
	* Pros: Uses built-in jQuery functionality, may be more straightforward to understand and maintain.
	* Cons: Might be slower than the first option due to the overhead of calling `each`.
3. `CleanUpFontFamilyStyles3`:
	* Pros: Utilizes the efficient `getComputedStyle` API for getting font family styles.
	* Cons: Requires understanding of the DOM and CSSOM, may not be as efficient due to the overhead of accessing external stylesheets.

**Other Considerations:**

* The benchmark is run on a Windows 7 machine with Chrome 52, which might affect performance results.
* The `cleanUpFontFamilyStyles` functions are executed multiple times ( indicated by the "ExecutionsPerSecond" value), suggesting that each execution has a negligible impact on overall performance.

**Benchmark Results:**

The latest benchmark results show that:

1. `CleanUpFontFamilyStyles2` (optimized) performs best, with an executions per second of 72364.5078125.
2. `CleanUpFontFamilyStyles3` (with getComputedStyle) is the next closest, with approximately half the performance of the optimized version.
3. `CleanUpFontFamilyStyles1` (iterating over elements using jQuery) performs worst, with an executions per second of 10298.228515625.

Overall, the results suggest that using the built-in jQuery iteration methods can provide a performance advantage over manually iterating over elements or relying on external APIs like `getComputedStyle`.

Related benchmarks:

CleanUpFontFamilyStyles optimization (version: 7)

Comparing performance of: Test 1 vs Optimized vs with getComputedStyle

Created: 9 years ago by: Registered User

Jump to the latest result

Test 1

Optimized

with getComputedStyle

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):