Welcome!

Java IoT Authors: Elizabeth White, Pat Romanski, Derek Weeks, Stackify Blog, Yeshim Deniz

Related Topics: Java IoT

Java IoT: Article

101 on jQuery Selector Performance

jQuery selectors and their performance Impact

Java Developer Magazine on Ulitzer

Last week I analyzed a web page that spent 4.8 seconds in the onLoad event handler of a custom script file. It turned out that 2.8 seconds were consumed by applying a dynamic menu library (will blog about this one separately). The remaining 2 seconds were spent in jQuery selectors. The analysis showed that most of the selectors didn’t return any object and those that returned objects can be improved by using different selectors.

About jQuery Selectors
There are some great blog articles about jQuery Selectors and their Performance Impact. As you can see you can select elements by ID, TagName or ClassName. Depending on the select jQuery can use the native browser methods to query elements by id or tag or needs to manually iterate through the DOM in case of class names (as there is not getElementsByClassName in IE).

Analyzing the 2 seconds in my page time
The onLoad handler uses jQuery to set hide, show, change style sheets, … for certain elements on the page. Here is a code snippet:

Sample jQuery Script exected in onLoad

Sample jQuery Script exected in onLoad
The onLoad event handler was full of these calls. Using the free dynaTrace AJAX Edition you can see the individual $ calls that resolves the selector and the following method call in case the selector resolved at least one object. The following PurePath of the onLoad event handler not only shows me how much time was spent in those selector calls – but also how many of these actually didn’t find a single object (the lack of the following method call indicates that no object was found):

Unnecessary jQuery Selector Calls causing massive overhead

Unnecessary jQuery Selector Calls causing massive overhead

All calls marked in red are calls that didn’t return an element because there was no DOM element based on the selection criteria. The JS column shows the execution time of each individual method call – ranging from 1ms to > 100ms per call. The size column tells us how many JavaScript/DOM calls were made by an individual call. Here we can also see why certain $ calls took so much longer as they made many calls to fulfil the request. The Invocation column tells me how often a method was invoked by its parent. We can see here that some objects were actually resolved multiple times, e.g.: “.pop-cart”. It would have been better to only resolve it once and cache the object.

The first lesson learned from this is that most of these calls were not necessary and just caused massive overhead. If you happen to know which elements are on a page you should only resolve those objects and don’t try to resolve others. I know – having global java script files that handle different pages with different content cause a situation like this – but – do you really want to live with this overhead?

Analyzing difference in jQuery Selectors
The first problem on the analyzed page was that too many unnecessary $ calls were made. The other question that came up was why certain $ methods respond very fast (some milliseconds) where others take rather long (up to 100ms). The theoretical answer can be found in the jQuery Best Practice Blog. Coming back to my page shows me the following:

Selector by ID is the fastest using getElementById

Following image shows a selector using an ID. It uses getElementById and therefore returns very fast.

jQuery Selector by ID

jQuery Selector by ID

Selector by TagName using getElementsByTag
The following example selects elements by TagName and ClassName. jQuery first uses the getElementsByTagName which is a native implementation to retrieve all elements for the specified tag. jQuery then iterates through these items to filter for the ClassName.

jQuery Selector by Tag and ClassName

jQuery Selector by Tag and ClassName

Selector by ClassName needs to iterate through ALL DOM elements
If you use a selector by ClassName only – jQuery needs to iterate through EVERY element in the DOM as there is no native implementation for getElementsByClassName in Internet Explorer (its a different story for FireFox). Following image shows the overhead of a selector on a page with 3460 DOM Elements:

jQuery Selector by Class Name

jQuery Selector by Class Name

Conclusion
Depending on the size of your web site (number of DOM elements) you should consider the overhead of individual selector methods. Instead of selecting by classname you may want to think about using TagName and ClassName or by using unique IDs in case you only have a handful of objects on your page. Also – make sure you cache already resolved objects to avoid the overhead for subsequent resolving calls. And – last but not least – avoid calls that are not necessary. As seen in the page that I analyzed – more than 1.5 seconds of the 2 seconds can be saved by not making those calls.

Related reading:

  1. 101 on Prototype CSS Selectors Performance implications of certain CSS Selectors are not specific to...
  2. Performance Analysis of dynamic JavaScript Menus In my previous post I talked about the impact of...
  3. How to Speed Up sites like vancouver2010.com by more than 50% in 5 minutes Many Web Sites that use JavaScript frameworks to make the...
  4. How to test jQuery enabled Apps using JSON with Visual Studio Visual Studio Team System offers a nice Web- and Load-Testing...
  5. Ensuring Web Site Performance – Why, What and How to Measure Automated and Accurately It is a fact that end user response time is...

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

@ThingsExpo Stories
IoT is at the core or many Digital Transformation initiatives with the goal of re-inventing a company's business model. We all agree that collecting relevant IoT data will result in massive amounts of data needing to be stored. However, with the rapid development of IoT devices and ongoing business model transformation, we are not able to predict the volume and growth of IoT data. And with the lack of IoT history, traditional methods of IT and infrastructure planning based on the past do not app...
Internet-of-Things discussions can end up either going down the consumer gadget rabbit hole or focused on the sort of data logging that industrial manufacturers have been doing forever. However, in fact, companies today are already using IoT data both to optimize their operational technology and to improve the experience of customer interactions in novel ways. In his session at @ThingsExpo, Gordon Haff, Red Hat Technology Evangelist, shared examples from a wide range of industries – including en...
To get the most out of their data, successful companies are not focusing on queries and data lakes, they are actively integrating analytics into their operations with a data-first application development approach. Real-time adjustments to improve revenues, reduce costs, or mitigate risk rely on applications that minimize latency on a variety of data sources. Jack Norris reviews best practices to show how companies develop, deploy, and dynamically update these applications and how this data-first...
Intelligent Automation is now one of the key business imperatives for CIOs and CISOs impacting all areas of business today. In his session at 21st Cloud Expo, Brian Boeggeman, VP Alliances & Partnerships at Ayehu, will talk about how business value is created and delivered through intelligent automation to today’s enterprises. The open ecosystem platform approach toward Intelligent Automation that Ayehu delivers to the market is core to enabling the creation of the self-driving enterprise.
Consumers increasingly expect their electronic "things" to be connected to smart phones, tablets and the Internet. When that thing happens to be a medical device, the risks and benefits of connectivity must be carefully weighed. Once the decision is made that connecting the device is beneficial, medical device manufacturers must design their products to maintain patient safety and prevent compromised personal health information in the face of cybersecurity threats. In his session at @ThingsExpo...
"We're a cybersecurity firm that specializes in engineering security solutions both at the software and hardware level. Security cannot be an after-the-fact afterthought, which is what it's become," stated Richard Blech, Chief Executive Officer at Secure Channels, in this SYS-CON.tv interview at @ThingsExpo, held November 1-3, 2016, at the Santa Clara Convention Center in Santa Clara, CA.
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...
Detecting internal user threats in the Big Data eco-system is challenging and cumbersome. Many organizations monitor internal usage of the Big Data eco-system using a set of alerts. This is not a scalable process given the increase in the number of alerts with the accelerating growth in data volume and user base. Organizations are increasingly leveraging machine learning to monitor only those data elements that are sensitive and critical, autonomously establish monitoring policies, and to detect...
SYS-CON Events announced today that Massive Networks 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. Massive Networks mission is simple. To help your business operate seamlessly with fast, reliable, and secure internet and network solutions. Improve your customer's experience with outstanding connections to your cloud.
Everything run by electricity will eventually be connected to the Internet. Get ahead of the Internet of Things revolution and join Akvelon expert and IoT industry leader, Sergey Grebnov, in his session at @ThingsExpo, for an educational dive into the world of managing your home, workplace and all the devices they contain with the power of machine-based AI and intelligent Bot services for a completely streamlined experience.
Because IoT devices are deployed in mission-critical environments more than ever before, it’s increasingly imperative they be truly smart. IoT sensors simply stockpiling data isn’t useful. IoT must be artificially and naturally intelligent in order to provide more value In his session at @ThingsExpo, John Crupi, Vice President and Engineering System Architect at Greenwave Systems, will discuss how IoT artificial intelligence (AI) can be carried out via edge analytics and machine learning techn...
With tough new regulations coming to Europe on data privacy in May 2018, Calligo will explain why in reality the effect is global and transforms how you consider critical data. EU GDPR fundamentally rewrites the rules for cloud, Big Data and IoT. In his session at 21st Cloud Expo, Adam Ryan, Vice President and General Manager EMEA at Calligo, will examine the regulations and provide insight on how it affects technology, challenges the established rules and will usher in new levels of diligence a...
In the enterprise today, connected IoT devices are everywhere – both inside and outside corporate environments. The need to identify, manage, control and secure a quickly growing web of connections and outside devices is making the already challenging task of security even more important, and onerous. In his session at @ThingsExpo, Rich Boyer, CISO and Chief Architect for Security at NTT i3, discussed new ways of thinking and the approaches needed to address the emerging challenges of security i...
SYS-CON Events announced today that Datera, that offers a radically new data management architecture, has been named "Exhibitor" 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. Datera is transforming the traditional datacenter model through modern cloud simplicity. The technology industry is at another major inflection point. The rise of mobile, the Internet of Things, data storage and Big...
An increasing number of companies are creating products that combine data with analytical capabilities. Running interactive queries on Big Data requires complex architectures to store and query data effectively, typically involving data streams, an choosing efficient file format/database and multiple independent systems that are tied together through custom-engineered pipelines. In his session at @BigDataExpo at @ThingsExpo, Tomer Levi, a senior software engineer at Intel’s Advanced Analytics ...
SYS-CON Events announced today that Datera 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. Datera offers a radically new approach to data management, where innovative software makes data infrastructure invisible, elastic and able to perform at the highest level. It eliminates hardware lock-in and gives IT organizations the choice to source x86 server nodes, with business model option...
With 10 simultaneous tracks, keynotes, general sessions and targeted breakout classes, Cloud Expo and @ThingsExpo are two of the most important technology events of the year. Since its launch over eight years ago, Cloud Expo and @ThingsExpo have presented a rock star faculty as well as showcased hundreds of sponsors and exhibitors! In this blog post, I provide 7 tips on how, as part of our world-class faculty, you can deliver one of the most popular sessions at our events. But before reading the...
SYS-CON Events announced today that CA Technologies has been named "Platinum Sponsor" of SYS-CON's 21st International Cloud Expo®, which will take place October 31-November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. CA Technologies helps customers succeed in a future where every business - from apparel to energy - is being rewritten by software. From planning to development to management to security, CA creates software that fuels transformation for companies in the applic...
SYS-CON Events announced today that GrapeUp, the leading provider of rapid product development at the speed of business, will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place October 31-November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Grape Up is a software company, specialized 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 acr...
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...