Machine Learning Authors: Pat Romanski, Stackify Blog, Yeshim Deniz, William Schmarzo, Liz McMillan

Related Topics: Machine Learning

Machine Learning : Article

Fast Scalable AJAX Apps

Finding and eliminating bottlenecks and bloat

Successful AJAX-based applications provide a better end-user experience than traditional Web sites. Fast performance is absolutely essential to deliver on this potential. The large number of technologies and the additional complexity that AJAX adds to the mix creates significant headaches in tracking down performance bottlenecks and related issues.

So where do you start tracking down performance-related problems? The answer is logical: by delving into the raw performance data of your application. Perhaps a pedantic suggestion, but by not adequately analyzing and measuring the data, you're relying only on hunches and past experience. Fortunately, we now have a number of highly useful open source and commercial tools available to assist us in this tedious process.

The best place to begin a thorough search & destroy mission is with HTTP-level performance problems that can be resolved in server configuration and fine-tuning. Is the caching configured properly? Are there issues with load balancing? How many concurrent requests per server before performance suffers? AJAX applications typically reduce the data size per request, but highly aggressive polling can saturate your servers with too many requests.

When using the Apache Web server, two useful open source tools are Apache Bench, which is great for concurrency testing, and Tsung, which provides a replay proxy mode to monitor system performance under a variety of scenarios. Similar commercial and open source tools exist for other Web servers as well. Push the limits of your servers and find out what makes them fall down.

As AJAX applications become increasingly common, users expect real-time updates to accompany their real-time experience. To be effective, real-time or highly collaborative applications require a significant amount of AJAX polling to make the application work. If this is simply too demanding on your Web server, you may want to consider switching to a Comet server implementation such as Cometd, Lightstreamer, KnowNow, or lighttpd. Comet servers are optimized for longer-lived connections and higher volumes of concurrency than typical Web servers.

A general rule of thumb with polling: if the response time for a request is comparable to that of your polling interval, you're either polling too frequently, or your server is taking too long to return useful information.

The performance of SQL queries is essential to any AJAX application as is the Input/Output (I/O) performance of your database. Bonnie++ is a useful tool that helps you quickly track down disk I/O issues. SQL query performance is the topic of hundreds of articles, but sometimes simple EXPLAIN statements and a healthy dose of query log analysis will suffice to slow or eradicate performing queries.

Analyzing performance over the Internet and verifying that you're getting the correct data from the server to the browser is the next step in your quest. A number of tools exist to assist with this analysis. Wireshark, formerly known as Ethereal, is a network protocol analyzer that provides complete insight into all data across the wire for your computer or network. LiveHTTPHeaders, a Firefox extension, allows easy viewing of all normal HTTP traffic, XMLHttpRequests, and Comet traffic, including the viewing of full headers in the Firefox browser. Firebug, a debugging extension for Firefox, among its many capabilities, lets you view not only script errors and XMLHttpRequest information, but also measures the load times of various resources such as script and image files.

For those of you waiting for me to get to the JavaScript-specific performance optimization techniques, we've arrived. With AJAX applications, many of our performance issues happen before we even get to the code that's executed in the browser. Now that you have effectively ruled out issues outside the scope of the Web browser, it's time to take a closer look at your JavaScript code. If you're using an AJAX toolkit such as Dojo, you may already have profiling code to supplement Firebug. For example, a Dojo contributor recently found an instance where the code to create a chart was calling attr.nodeName.toLowerCase() 540,000 times, consuming 15s of time at page load! Moving this one line of code inside a loop drastically fixed the performance of the Dojo Charting component.

Looking specifically for code that's called a lot of times or that takes a lot of time per call are the first places to investigate. Seemingly harmless calls to code in your libraries can be expensive operations, especially when iteration, recursion, and/or large data sets come into play, and a quick performance profile will expose these resource hogs.

It's easy to get caught up in the excitement of using a solid JavaScript toolkit, and forgetting that your application doesn't have to use every feature provided in your toolkit of choice! And even if the toolkit or browser lets you do something, it doesn't mean it's an effective use of system resources. For example, Dojo provides an excellent aspect-oriented programming (AOP) advice system for method-to-method event connection. However, you should only be using this when necessary, not in every instance that one method needs to call another one, since the cost for each connect instance is more than a simple method-to-method call.

Assuming that your toolkit has helped you avoid memory leak issues prevalent in Internet Explorer 6, and to a lesser extent Firefox 1.5, there's still a limit on the number of objects that can be instantiated in memory at once in any browser before you experience a significant drag on performance. Our general experience is that Safari 1.2/2 allows the fewest number of objects, Internet Explorer 6/7 are better, and Opera and Firefox are significantly better than that. It would be great to see a quantitative study that compares the memory consumption and relative performance limits of object instantiation.

In further evaluating browser performance, you should be looking for expensive operations that cause CPU spikes, excessive memory consumption, or leaks, and seek out alternative or more efficient approaches. Unfortunately, each major browser's JavaScript and DOM implementations are different, and what works well in one browser doesn't necessarily perform well in another.

When looking at the initial page load time, significant consideration should be given to the number of requests and the size of each request being made on the server. One large file is preferable to a large number of small files, provided that you aren't preloading a large amount of code that's rarely used by your application. The Dojo package system and build tools solve this problem for Dojo users, and Dojo ShrinkSafe is useful with any JavaScript code. For image files, it's worth considering the construction of image sprites to reduce the number of requests for small image files.

Predictive auto-fetching of images is another optimization technique. This technique was made popular by the Google Maps team. In this application, images of locations just outside the boundaries of the currently viewable map region are loaded in the background after the application has finished loading.

In analysis, it's important to note that synchronous requests to a Web server block execution and give the user the perception of a hanging browser. So embracing best practices for asynchronous application development is crucial in creating sophisticated Web applications. That said, too many concurrent asynchronous requests can lead to similar issues, so appropriate queuing of requests is a good practice.

Browser-specific issues are a significant reason for the proliferation of AJAX toolkits. Unfortunately, not every browser inconsistency is solved by your toolkit alone. For example, Internet Explorer by default enforces a two-connection limit per server, but it's possible to work around this issue with the clever wildcard-masking of aliases. Additionally, caching of images loaded by JavaScript in Internet Explorer requires significant workarounds when your application design contains many image files. Browsers literally have thousands of quirks and idiosyncrasies, so starting with a good toolkit and regularly reading developer blogs and Web sites will keep you "in the know" on the latest workarounds.

Given that AJAX applications are intended to be faster and more feature-rich than traditional Web sites, it's imperative that speed and performance aren't lost in the excitement of adding new capabilities to your existing app. I've only scratched the surface of what's required and what's possible in optimizing performance, but with a little patience, a good set of tools, and an understanding of HTTP and current browser issues, you'll have a good process to begin eliminating performance issues before they turn into performance nightmares.

More Stories By Dylan Schiemann

Dylan Schiemann, CEO, SitePen Inc., co-creator of Dojo Toolkit

It all started in 1999 when Dylan dropped out of the PhD program at UCLA and left the fascinating world of statistics of shear-induced rearrangements in a two-dimensional model foam and the accumulation of glucosaminyl(acyl)phosphatidylinositol in an S3 HeLa subline expressing normal dolicholphosphomannose synthase activity to refocus his efforts on the future of the web. As CEO of SitePen and co-founder of the Dojo Toolkit, Dylan is best known for building web applications that make use of JavaScript/Ajax, Dojo, and other standard web development technologies. He has helped develop web apps for companies including Renkoo, Informatica, Security FrameWorks, and Vizional Technologies.

Dylan is an avid Oakland A's fan, a lover of the hammer throw, devoted husband, father to three obnoxious dogs and resides on JetBlue Airways.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.

@CloudExpo Stories
Digital Transformation and Disruption, Amazon Style - What You Can Learn. Chris Kocher is a co-founder of Grey Heron, a management and strategic marketing consulting firm. He has 25+ years in both strategic and hands-on operating experience helping executives and investors build revenues and shareholder value. He has consulted with over 130 companies on innovating with new business models, product strategies and monetization. Chris has held management positions at HP and Symantec in addition to ...
Enterprises have taken advantage of IoT to achieve important revenue and cost advantages. What is less apparent is how incumbent enterprises operating at scale have, following success with IoT, built analytic, operations management and software development capabilities - ranging from autonomous vehicles to manageable robotics installations. They have embraced these capabilities as if they were Silicon Valley startups.
René Bostic is the Technical VP of the IBM Cloud Unit in North America. Enjoying her career with IBM during the modern millennial technological era, she is an expert in cloud computing, DevOps and emerging cloud technologies such as Blockchain. Her strengths and core competencies include a proven record of accomplishments in consensus building at all levels to assess, plan, and implement enterprise and cloud computing solutions. René is a member of the Society of Women Engineers (SWE) and a m...
When talking IoT we often focus on the devices, the sensors, the hardware itself. The new smart appliances, the new smart or self-driving cars (which are amalgamations of many ‘things'). When we are looking at the world of IoT, we should take a step back, look at the big picture. What value are these devices providing. IoT is not about the devices, its about the data consumed and generated. The devices are tools, mechanisms, conduits. This paper discusses the considerations when dealing with the...
DXWordEXPO New York 2018, colocated with CloudEXPO New York 2018 will be held November 11-13, 2018, in New York City. Digital Transformation (DX) is a major focus with the introduction of DXWorldEXPO within the program. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term.
To Really Work for Enterprises, MultiCloud Adoption Requires Far Better and Inclusive Cloud Monitoring and Cost Management … But How? Overwhelmingly, even as enterprises have adopted cloud computing and are expanding to multi-cloud computing, IT leaders remain concerned about how to monitor, manage and control costs across hybrid and multi-cloud deployments. It’s clear that traditional IT monitoring and management approaches, designed after all for on-premises data centers, are falling short in ...
Mobile device usage has increased exponentially during the past several years, as consumers rely on handhelds for everything from news and weather to banking and purchases. What can we expect in the next few years? The way in which we interact with our devices will fundamentally change, as businesses leverage Artificial Intelligence. We already see this taking shape as businesses leverage AI for cost savings and customer responsiveness. This trend will continue, as AI is used for more sophistica...
With privacy often voiced as the primary concern when using cloud based services, SyncriBox was designed to ensure that the software remains completely under the customer's control. Having both the source and destination files remain under the user?s control, there are no privacy or security issues. Since files are synchronized using Syncrify Server, no third party ever sees these files.
"We are an integrator of carrier ethernet and bandwidth to get people to connect to the cloud, to the SaaS providers, and the IaaS providers all on ethernet," explained Paul Mako, CEO & CTO of Massive Networks, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
I believe that this may finally be the year that the CIO role ‘crosses the Rubicon,' leaving behind its traditional, IT-focused orientation. But I don't believe that either of the previous predictions of this outcome — fading into oblivion or rising to a business executive level — is correct. Instead, I think this is the year that we will see the role of the CIO transformed into something altogether different.
Cloud-enabled transformation has evolved from cost saving measure to business innovation strategy -- one that combines the cloud with cognitive capabilities to drive market disruption. Learn how you can achieve the insight and agility you need to gain a competitive advantage. Industry-acclaimed CTO and cloud expert, Shankar Kalyana presents. Only the most exceptional IBMers are appointed with the rare distinction of IBM Fellow, the highest technical honor in the company. Shankar has also receive...
"Calligo is a cloud service provider with data privacy at the heart of what we do. We are a typical Infrastructure as a Service cloud provider but it's been designed around data privacy," explained Julian Box, CEO and co-founder of Calligo, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
"NetApp is known as a data management leader but we do a lot more than just data management on-prem with the data centers of our customers. We're also big in the hybrid cloud," explained Wes Talbert, Principal Architect at NetApp, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
In his session at 21st Cloud Expo, Carl J. Levine, Senior Technical Evangelist for NS1, will objectively discuss how DNS is used to solve Digital Transformation challenges in large SaaS applications, CDNs, AdTech platforms, and other demanding use cases. Carl J. Levine is the Senior Technical Evangelist for NS1. A veteran of the Internet Infrastructure space, he has over a decade of experience with startups, networking protocols and Internet infrastructure, combined with the unique ability to it...
"Cloud Academy is an enterprise training platform for the cloud, specifically public clouds. We offer guided learning experiences on AWS, Azure, Google Cloud and all the surrounding methodologies and technologies that you need to know and your teams need to know in order to leverage the full benefits of the cloud," explained Alex Brower, VP of Marketing at Cloud Academy, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clar...
Andi Mann, Chief Technology Advocate at Splunk, is an accomplished digital business executive with extensive global expertise as a strategist, technologist, innovator, marketer, and communicator. For over 30 years across five continents, he has built success with Fortune 500 corporations, vendors, governments, and as a leading research analyst and consultant.
Andrew Keys is Co-Founder of ConsenSys Enterprise. He comes to ConsenSys Enterprise with capital markets, technology and entrepreneurial experience. Previously, he worked for UBS investment bank in equities analysis. Later, he was responsible for the creation and distribution of life settlement products to hedge funds and investment banks. After, he co-founded a revenue cycle management company where he learned about Bitcoin and eventually Ethereal. Andrew's role at ConsenSys Enterprise is a mul...
CI/CD is conceptually straightforward, yet often technically intricate to implement since it requires time and opportunities to develop intimate understanding on not only DevOps processes and operations, but likely product integrations with multiple platforms. This session intends to bridge the gap by offering an intense learning experience while witnessing the processes and operations to build from zero to a simple, yet functional CI/CD pipeline integrated with Jenkins, Github, Docker and Azure...
"Space Monkey by Vivent Smart Home is a product that is a distributed cloud-based edge storage network. Vivent Smart Home, our parent company, is a smart home provider that places a lot of hard drives across homes in North America," explained JT Olds, Director of Engineering, and Brandon Crowfeather, Product Manager, at Vivint Smart Home, in this SYS-CON.tv interview at @ThingsExpo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
Sanjeev Sharma Joins November 11-13, 2018 @DevOpsSummit at @CloudEXPO New York Faculty. Sanjeev Sharma is an internationally known DevOps and Cloud Transformation thought leader, technology executive, and author. Sanjeev's industry experience includes tenures as CTO, Technical Sales leader, and Cloud Architect leader. As an IBM Distinguished Engineer, Sanjeev is recognized at the highest levels of IBM's core of technical leaders.