Welcome!

Machine Learning Authors: Elizabeth White, Liz McMillan, Jack Jachner, Pat Romanski, Progress Blog

Related Topics: Machine Learning , Java IoT, Microservices Expo

Machine Learning : Article

How Bad Outdated JavaScript Libraries Are for Page Load Time

Make sure you stay up-to-date with your library versions.

Last week at Velocity we hosted a Birds of a Feather Session (BoF) and offered the attendees to analyze their web sites using dynaTrace Ajax Edition. Besides finding the typical performance problems (no cache settings, too many images, not minimized content, …) we found several sites that had one interesting problem in common: OLD VERSIONS of  JavaScript libraries such as YUI, jQuery or SPRY.

Why are outdated JavaScript Libraries a problem?
JavaScript libraries such as jQuery provide functions that make it easy for web developers to achieve certain things, e.g.: change the style of certain DOM elements. Most of these libraries therefore provide methods called $, $$ or find that allow finding DOM elements by ID, Tag Name, CSS Class Name or specific DOM attribute values.

The following is a screenshot of the Performance Report analyzing the Boston Bruins Page on msn.foxsports.com using Firefox 3.6. The Performance Report highlights 3 interesting things:

  • High Client Time (3.5 seconds in JavaScript execution until the Page was Fully Loaded)
  • 39 JavaScript! blocks that executed longer than 20ms
  • 38 calls to Spry.$$ for looking up an element by Class Name with an average of 80ms execution time
Long running CSS Class Name Lookups contribute about 80% to the Client Side Load Time

Long running CSS Class Name Lookups contribute about 80% to the Client Side Load Time

Looking up elements by class name takes 80ms on average. We see 38 calls with a total JavaScript execution time of 3 seconds. Is that normal? Even on Firefox?

The History on CSS Class Name Lookups
Looking up elements by CSS Class Name is a very popular lookup method. Browsers such as Firefox or Chrome supported this lookup natively with a method called getElementsByClassName. Older versions of Internet Explorer don’t support this.

The lack of this native implementation in IE caused many JS libraries to implement this missing feature using JavaScript. The implementations traverse through the complete DOM Tree and perform a string match on the CSS Class Name property. This works well and allows web developers to use one library that works across all browsers and browser versions. The down side of this approach is that traversing the DOM is one of the slowest operations you can do in the browser. The larger the DOM, the longer these lookup methods take to execute. I’ve blogged about this several times: 101 on jQuery Selector Performance, 101 on Prototype CSS Selectors, Top 10 Client-Side Performance Problems.

Good news is that newer versions of Internet Explorer now support the Selector API allowing JavaScript frameworks to leverage this native implementation and with that optimizing lookup performance.

Why is Spry.$$ so slow on Firefox?
Let’s get back to our example from above. We learned that newer browsers support lookups by class name natively and we also learned that Firefox, Chrome, Safari, Opera, …  had the native lookup methods implemented for a while. Does this mean that 80ms for looking up elements by class name is normal? No – it is not!! It should take a fraction of that. And here is why.

The following screenshot shows the JavaScript PurePath of Spry.$$(“.prev_label”). The PurePath shows us what happens internally in this method and why it takes 170ms for that call to complete:

Spry.$$ iterates through all DOM Elements and matches the CSS Class Name

Spry.$$ iterates through all DOM Elements and matches the CSS Class Name

Instead of leveraging the native getElementsByClassName method of Firefox the implementation of Spry.$$ uses its own implementation. Using getElementsByTagName with no specific tag name returns ALL DOM Elements – 2787 in total on that page. The library then iterates through all of these DOM elements, reading the className DOM Property and matching it against “prev_label”. Accessing 2787 DOM Properties is a costly operation and takes 170ms in that instance. That’s why Spry.$$ takes that long.

Solve this problem by upgrading your Libraries
Older versions of JavaScript libraries didn’t necessarily check the browsers capabilities for looking up DOM Elements. These libraries always used their own implementation. Newer versions of libraries do check the capabilities and take advantage of any performance enhancement they can get by using the native available implementations.

On this particular website – and also the others we looked at during the BoF session – an older version of the JavaScript library was used. Upgrading to a newer version would solve this problem. I know – upgrading is not always as easy as it sounds. Lots of testing is involved to ensure that your web site still works as expected. On the other side – speeding Page Load Time by 3 seconds by “just” updating your JavaScript library is a good argument in doing so.

Conclusion
Make sure you stay up-to-date with your library versions. Library providers are focusing a lot on performance and they make sure to optimize these libraries for the different browsers out there.

Tips and Tricks
The dynaTrace Performance Report identifies slow running JavaScript handlers and also identifies the jQuery $ method. In the case of Spry.$$ (or maybe other lookup methods that your library provides) the report won’t list these methods in the Contributor list. A little trick helps though to identify how much performance impact these methods have on your page. Simply Drill into the Hotspot View. Then type “Spry.$$” and sort by Total Sum. This will show you all invocations of Spry.$$ and how much time it takes to execute them:

Analyzing your JavaScript Lookup methods in the Hotspot View

Analyzing your JavaScript Lookup methods in the Hotspot View

Learn how to use the different views and features of dynaTrace Ajax Edition by watching the 15 available Video Tutorials

Related reading:

  1. Slow Page Load Time in Firefox caused by old versions of YUI, jQuery, … We blogged a lot about performance problems in Internet Explorer...
  2. Uncover JavaScript JSON Parsing errors with IE Compatibility Mode We just launched our new corporate web site. Right after...
  3. Testing and Optimizing Single Page Web 2.0/AJAX Applications – Why Best Practices alone don’t work any more // Testing and Optimizing of what I call “traditional” page-based...
  4. Top 10 Client-Side Performance Problems in Web 2.0 Inspired by the Top 10 Performance Problems post which focuses...
  5. Antivirus Add-On for IE to cause 5 times slower page load times The dynaTrace AJAX Community has been really active lately –...

More Stories By Andreas Grabner

Andreas Grabner has been helping companies improve their application performance for 15+ years. He is a regular contributor within Web Performance and DevOps communities and a prolific speaker at user groups and conferences around the world. Reach him at @grabnerandi

@CloudExpo Stories
The question before companies today is not whether to become intelligent, it’s a question of how and how fast. The key is to adopt and deploy an intelligent application strategy while simultaneously preparing to scale that intelligence. In her session at 21st Cloud Expo, Sangeeta Chakraborty, Chief Customer Officer at Ayasdi, will provide a tactical framework to become a truly intelligent enterprise, including how to identify the right applications for AI, how to build a Center of Excellence to ...
Internet of @ThingsExpo, taking place October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 21st Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The Internet of Things (IoT) is the most profound change in personal and enterprise IT since the creation of the Worldwide Web more than 20 years ago. All major researchers estimate there will be tens of billions devic...
While some vendors scramble to create and sell you a fancy solution for monitoring your spanking new Amazon Lambdas, hear how you can do it on the cheap using just built-in Java APIs yourself. By exploiting a little-known fact that Lambdas aren’t exactly single-threaded, you can effectively identify hot spots in your serverless code. In his session at @DevOpsSummit at 21st Cloud Expo, Dave Martin, Product owner at CA Technologies, will give a live demonstration and code walkthrough, showing how ...
SYS-CON Events announced today that Elastifile will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Elastifile Cloud File System (ECFS) is software-defined data infrastructure designed for seamless and efficient management of dynamic workloads across heterogeneous environments. Elastifile provides the architecture needed to optimize your hybrid cloud environment, by facilitating efficient...
As DevOps methodologies expand their reach across the enterprise, organizations face the daunting challenge of adapting related cloud strategies to ensure optimal alignment, from managing complexity to ensuring proper governance. How can culture, automation, legacy apps and even budget be reexamined to enable this ongoing shift within the modern software factory?
There is only one world-class Cloud event on earth, and that is Cloud Expo – which returns to Silicon Valley for the 21st Cloud Expo at the Santa Clara Convention Center, October 31 - November 2, 2017. Every Global 2000 enterprise in the world is now integrating cloud computing in some form into its IT development and operations. Midsize and small businesses are also migrating to the cloud in increasing numbers. Companies are each developing their unique mix of cloud technologies and service...
SYS-CON Events announced today that Golden Gate University will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Since 1901, non-profit Golden Gate University (GGU) has been helping adults achieve their professional goals by providing high quality, practice-based undergraduate and graduate educational programs in law, taxation, business and related professions. Many of its courses are taug...
@DevOpsSummit at Cloud Expo taking place Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center, Santa Clara, CA, is co-located with the 21st International Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The widespread success of cloud computing is driving the DevOps revolution in enterprise IT. Now as never before, development teams must communicate and collaborate in a dynamic, 24/7/365 environment. There is ...
DevOps at Cloud Expo, taking place October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 21st Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The widespread success of cloud computing is driving the DevOps revolution in enterprise IT. Now as never before, development teams must communicate and collaborate in a dynamic, 24/7/365 environment. There is no time to w...
SYS-CON Events announced today that DXWorldExpo has been named “Global Sponsor” of SYS-CON's 21st International Cloud Expo, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Digital Transformation is the key issue driving the global enterprise IT business. Digital Transformation is most prominent among Global 2000 enterprises and government institutions.
SYS-CON Events announced today that Grape Up will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct. 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Grape Up is a software company specializing in cloud native application development and professional services related to Cloud Foundry PaaS. With five expert teams that operate in various sectors of the market across the U.S. and Europe, Grape Up works with a variety of customers from emergi...
With Cloud Foundry you can easily deploy and use apps utilizing websocket technology, but not everybody realizes that scaling them out is not that trivial. In his session at 21st Cloud Expo, Roman Swoszowski, CTO and VP, Cloud Foundry Services, at Grape Up, will show you an example of how to deal with this issue. He will demonstrate a cloud-native Spring Boot app running in Cloud Foundry and communicating with clients over websocket protocol that can be easily scaled horizontally and coordinate...
From 2013, NTT Communications has been providing cPaaS service, SkyWay. Its customer’s expectations for leveraging WebRTC technology are not only typical real-time communication use cases such as Web conference, remote education, but also IoT use cases such as remote camera monitoring, smart-glass, and robotic. Because of this, NTT Communications has numerous IoT business use-cases that its customers are developing on top of PaaS. WebRTC will lead IoT businesses to be more innovative and address...
21st International Cloud Expo, taking place October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA, will feature technical sessions from a rock star conference faculty and the leading industry players in the world. Cloud computing is now being embraced by a majority of enterprises of all sizes. Yesterday's debate about public vs. private has transformed into the reality of hybrid cloud: a recent survey shows that 74% of enterprises have a hybrid cloud strategy. Me...
In his session at 20th Cloud Expo, Scott Davis, CTO of Embotics, discussed how automation can provide the dynamic management required to cost-effectively deliver microservices and container solutions at scale. He also discussed how flexible automation is the key to effectively bridging and seamlessly coordinating both IT and developer needs for component orchestration across disparate clouds – an increasingly important requirement at today’s multi-cloud enterprise.
DevOps at Cloud Expo, taking place October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 21st Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The widespread success of cloud computing is driving the DevOps revolution in enterprise IT. Now as never before, development teams must communicate and collaborate in a dynamic, 24/7/365 environment. There is no time to w...
Recently, WebRTC has a lot of eyes from market. The use cases of WebRTC are expanding - video chat, online education, online health care etc. Not only for human-to-human communication, but also IoT use cases such as machine to human use cases can be seen recently. One of the typical use-case is remote camera monitoring. With WebRTC, people can have interoperability and flexibility for deploying monitoring service. However, the benefit of WebRTC for IoT is not only its convenience and interopera...
Vulnerability management is vital for large companies that need to secure containers across thousands of hosts, but many struggle to understand how exposed they are when they discover a new high security vulnerability. In his session at 21st Cloud Expo, John Morello, CTO of Twistlock, will address this pressing concern by introducing the concept of the “Vulnerability Risk Tree API,” which brings all the data together in a simple REST endpoint, allowing companies to easily grasp the severity of t...
Any startup has to have a clear go –to-market strategy from the beginning. Similarly, any data science project has to have a go to production strategy from its first days, so it could go beyond proof-of-concept. Machine learning and artificial intelligence in production would result in hundreds of training pipelines and machine learning models that are continuously revised by teams of data scientists and seamlessly connected with web applications for tenants and users.
When shopping for a new data processing platform for IoT solutions, many development teams want to be able to test-drive options before making a choice. Yet when evaluating an IoT solution, it’s simply not feasible to do so at scale with physical devices. Building a sensor simulator is the next best choice; however, generating a realistic simulation at very high TPS with ease of configurability is a formidable challenge. When dealing with multiple application or transport protocols, you would be...