Tuesday, 3 January 2017

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

4 comments :

  1. This is a great information...

    2017 is a promising year for graphic designers to take design to a fresher, bolder level. Discover graphic design trends to follow this year.

    Graphic Design Agency in Delhi, Graphic Design Agency in Gurgaon, Creative Agency in Gurugram, PR Agency in Delhi


    ReplyDelete



  2. with your entire process to setup office product online. Have you Just bought Microsoft Office product ? If yes then you can complete your Office Setup online with your product key code. You just need open office.com/setup , Install Office , Install Microsoft Office or setup.office.com into your web browser.

    office setup
    www.office.com/setup
    office.com/setup

    ReplyDelete


  3. In case any message saying ‘Stop’ pops up while installing Microsoft Office 365 due to a compatibility issue, contact our live chat support.Our online Experts through live chat will guide you through the entire process of Office setup, covering all steps and issues.Keep your 25 characters long product key with you.


    Office Com Setup
    office com/setup
    www.office.com/setup

    ReplyDelete