ASP.NET Tips #81 - Use fastest HTML DOM .textContent property to write text to any HTML element

Referring back to the previous blog, many were asking about the performance speed to write text to any HTML element.

Hence, I did some research and found that there are many ways to write text to any HTML element, but I'm concerned about the overall performance in terms of speed & browser compatibility, so, I created a JavaScript Benchmark Test based on 7 common methods and tested on 5 popular browsers.

Test - Environment

• CPU: Intel i7-4770 @3.4GHz (8 cores)
• Memory: 8GB DDR3
• Hard Disk: Intel 535 120GB SSD (Read: 540MBps, Write: 450MBps)
• Network Card: Gigabit
• Internet Bandwidth: 100Mbps (Download: 100Mbps, Upload: 100Mbps)
• Platform: Windows 10 (64-bit)

Test - HTML DOM property/method (Pure JavaScript vs jQuery)

1. Pure JS .innerText
2. Pure JS .innerHTML
3. Pure JS .textContent
4. jQuery .text()
5. jQuery .html()
6. jQuery .find().text()
7. jQuery .find().html()

Test - Modern Browsers

1. IE 11 on Windows 10
2. Edge 14 on Windows 10
3. Google Chrome 55 on Windows 10
4. Mozilla Firefox 50.1 on Windows 10
5. Opera 42 on Windows 10

Test - Modern Browsers (Updated on 15 Feb 2017)

1. Google Chrome 56 on Windows 10
2. Mozilla Firefox 51.0.1 on Windows 10
3. Opera 43 on Windows 10

Test Result

Test Result (Updated on 15 Feb 2017)

Conclusion

Based on the test result, Pure JavaScript .textContent property is proven to be the fastest HTML DOM text writer on the planet so far.
You may perform the same test on your own environment at: https://www.measurethat.net/Benchmarks/Show/850

Browser Support

.textContent is fully compatible with all browsers except IE8 and below.

To learn more about .textContent, kindly visit http://www.w3schools.com/jsref/prop_node_textcontent.asp

ASP.NET Tips #80 - Use fastest HTML DOM .textContent property to read text from any HTML element

Referring back to the previous blog, many were asking about the performance speed to read text from any HTML element.

Hence, I did some research and found that there are many ways to read text from any HTML element, but I'm concerned about the overall performance in terms of speed & browser compatibility, so, I created a JavaScript Benchmark Test based on 7 common methods and tested on 5 popular browsers.

Test - Environment

• CPU: Intel i7-4770 @3.4GHz (8 cores)
• Memory: 8GB DDR3
• Hard Disk: Intel 535 120GB SSD (Read: 540MBps, Write: 450MBps)
• Network Card: Gigabit
• Internet Bandwidth: 100Mbps (Download: 100Mbps, Upload: 100Mbps)
• Platform: Windows 10 (64-bit)

Test - HTML DOM property/method (Pure JavaScript vs jQuery)

1. Pure JS .innerText
2. Pure JS .innerHTML
3. Pure JS .textContent
4. jQuery .text()
5. jQuery .html()
6. jQuery .find().text()
7. jQuery .find().html()

Test - Modern Browsers

1. IE 11 on Windows 10
2. Edge 14 on Windows 10
3. Google Chrome 55 on Windows 10
4. Mozilla Firefox 50.1 on Windows 10
5. Opera 42 on Windows 10

Test - Modern Browsers (Updated on 15 Feb 2017)

1. Google Chrome 56 on Windows 10
2. Mozilla Firefox 51.0.1 on Windows 10
3. Opera 43 on Windows 10

Test Result

Test Result (Updated on 15 Feb 2017)

Conclusion

Based on the test result, Pure JavaScript .textContent property is proven to be the fastest HTML DOM text reader on the planet so far.
You may perform the same test on your own environment at: https://www.measurethat.net/Benchmarks/Show/849

Browser Support

.textContent is fully compatible with all browsers except IE8 and below.

To learn more about .textContent, kindly visit http://www.w3schools.com/jsref/prop_node_textcontent.asp

ASP.NET Tips #79 - Use fastest HTML DOM getElementById() method to access any HTML element

The document.getElementById() or jQuery(#id) method returns the element that has the ID attribute with the specified value.

This method is one of the most common methods in the HTML DOM, and is used almost every time you want to manipulate, or get info from, an element on your document.

Recently I did some research and found that there are many ways to access HTML element, but I'm concerned about the overall performance in terms of speed & browser compatibility. Hence, I created a JavaScript Benchmark Test based on 13 common methods and tested on 5 popular browsers.

Test - Environment

• CPU: Intel i7-4770 @3.4GHz (8 cores)
• Memory: 8GB DDR3
• Hard Disk: Intel 535 120GB SSD (Read: 540MBps, Write: 450MBps)
• Network Card: Gigabit
• Internet Bandwidth: 100Mbps (Download: 100Mbps, Upload: 100Mbps)
• Platform: Windows 10 (64-bit)

Test - HTML DOM methods (Pure JavaScript vs jQuery)

1. getElementById()
2. getElementsByClassName()
3. getElementsByTagName()
4. querySelector(#id)
5. querySelector(.id)
6. querySelectorAll(#id)
7. querySelectorAll(#id)
8. jQuery(#id)
9. jQuery(.id)
10. jQuery(tag#id)
11. jQuery(tag.id)
12. jQuery + getElementById
13. jQuery + getElementByClassName

Test - Modern Browsers

1. IE 11 on Windows 10
2. Edge 14 on Windows 10
3. Google Chrome 54 on Windows 10
4. Mozilla Firefox 49.0.2 on Windows 10
5. Opera 41 on Windows 10

Test - Modern Browsers (Updated on 27 Dec 2016)

1. Google Chrome 55 on Windows 10
2. Mozilla Firefox 50.1 on Windows 10
3. Opera 42 on Windows 10

Test - Modern Browsers (Updated on 15 Feb 2017)

1. Google Chrome 56 on Windows 10
2. Mozilla Firefox 51.0.1 on Windows 10
3. Opera 43 on Windows 10

Test Result

Test Result (Updated on 27 Dec 2016)

Test Result (Updated on 15 Feb 2017)

Conclusion

Based on the test result, Pure JavaScript document.getElementById() is proven to be the fastest HTML DOM on the planet so far.
You may perform the same test on your own environment at: https://www.measurethat.net/Benchmarks/Show/554

Browser Support

document.getElementById() is fully compatible with all browsers.

To learn more about document.getElementById(), kindly visit http://www.w3schools.com/jsref/met_document_getelementbyid.asp

ASP.NET Tips #78 - Dispose of unmanaged resources

File I/O, network resources, database connections, etc, should be disposed of once their usage is complete, rather than waiting for the Garbage Collector to handle them. This can take anything from milliseconds to minutes, depending on the rate you consume memory in your code. If you don't use a lot of, it will take a long time.

These types of resources typically implement the IDisposable interface so that unmanaged resources can be released once use of the object is complete.

Ideally, use a 'using' {...} block to automatically dispose the object once out of scope, or ensure you manually call Dispose().

For more information, see: https://msdn.microsoft.com/en-us/library/498928w2.aspx

ASP.NET Tips #77 - Avoid duplicate string reference issues

String referencing duplication is one of the major memory hogging performance issues. String interning is a useful solution if you're generating a lot of strings at runtime that are likely to be the same. It calls IsInterned to see if an interned string exists as follows:

class Program
{
   static void Main()
   {
      // A.
      // String generated at runtime.
      // Is not unique in string pool
      string s1 = new StringBuilder().Append("cat").Append(" and dog").ToString();
      // B.
      // Interned string added at runtime.
      // Is unique in string pool.
      string s2 = string.Intern(s1);
   }
}

My own benchmarking showed that string interning can improve performance by more than four times when the string comparison is always true.

ASP.NET Tips #76 - Preallocate sizes on things if you can

Many objects like memory stream, list, and dictionary will double their size as needed causing wasteful copying and allocations. If you know your list will have 100,000 items, initialize it as such to avoid problems in the future.

ASP.NET Tips #75 - Learn about the .NET Garbage Collector (GC) and when it can cause pauses that slow your application down

Over time the .NET GC has become more advanced (most notably the Background Server GC Mode in .NET 4.5), but there are still situations where the GC can have an adverse effect on your application's performance.

Understanding how to detect these situations and more importantly how to fix them is a useful skill. For example, in many applications there are some actions which are more performance-critical than others, and it would be preferable for Garbage Collection to run during the less critical periods. Setting a GCLatencyMode is a useful way of asking the Garbage Collector to be more conservative about choosing to run during these times.