Welcome!

Machine Learning Authors: Colin Ritchie, Pat Romanski, Ed Featherston, Elizabeth White, 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
SYS-CON Events announced today that Fusic will exhibit at the Japan External Trade Organization (JETRO) Pavilion 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. Fusic Co. provides mocks as virtual IoT devices. You can customize mocks, and get any amount of data at any time in your test. For more information, visit https://fusic.co.jp/english/.
Most of the time there is a lot of work involved to move to the cloud, and most of that isn't really related to AWS or Azure or Google Cloud. Before we talk about public cloud vendors and DevOps tools, there are usually several technical and non-technical challenges that are connected to it and that every company needs to solve to move to the cloud. In his session at 21st Cloud Expo, Stefano Bellasio, CEO and founder of Cloud Academy Inc., will discuss what the tools, disciplines, and cultural...
SYS-CON Events announced today that Enroute Lab will exhibit at the Japan External Trade Organization (JETRO) Pavilion 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. Enroute Lab is an industrial design, research and development company of unmanned robotic vehicle system. For more information, please visit http://elab.co.jp/.
SYS-CON Events announced today that Mobile Create USA will exhibit at the Japan External Trade Organization (JETRO) Pavilion 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. Mobile Create USA Inc. is an MVNO-based business model that uses portable communication devices and cellular-based infrastructure in the development, sales, operation and mobile communications systems incorporating GPS capabi...
SYS-CON Events announced today that Interface Corporation will exhibit at the Japan External Trade Organization (JETRO) Pavilion 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. Interface Corporation is a company developing, manufacturing and marketing high quality and wide variety of industrial computers and interface modules such as PCIs and PCI express. For more information, visit http://www.i...
SYS-CON Events announced today that Ryobi Systems will exhibit at the Japan External Trade Organization (JETRO) Pavilion 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. Ryobi Systems Co., Ltd., as an information service company, specialized in business support for local governments and medical industry. We are challenging to achive the precision farming with AI. For more information, visit http:...
SYS-CON Events announced today that N3N will exhibit at SYS-CON's @ThingsExpo, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. N3N’s solutions increase the effectiveness of operations and control centers, increase the value of IoT investments, and facilitate real-time operational decision making. N3N enables operations teams with a four dimensional digital “big board” that consolidates real-time live video feeds alongside IoT sensor data a...
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...
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...
SYS-CON Events announced today that SourceForge has been named “Media 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. SourceForge is the largest, most trusted destination for Open Source Software development, collaboration, discovery and download on the web serving over 32 million viewers, 150 million downloads and over 460,000 active development projects each and every month.
Today most companies are adopting or evaluating container technology - Docker in particular - to speed up application deployment, drive down cost, ease management and make application delivery more flexible overall. As with most new architectures, this dream takes significant work to become a reality. Even when you do get your application componentized enough and packaged properly, there are still challenges for DevOps teams to making the shift to continuous delivery and achieving that reducti...
Today traditional IT approaches leverage well-architected compute/networking domains to control what applications can access what data, and how. DevOps includes rapid application development/deployment leveraging concepts like containerization, third-party sourced applications and databases. Such applications need access to production data for its test and iteration cycles. Data Security? That sounds like a roadblock to DevOps vs. protecting the crown jewels to those in IT.
SYS-CON Events announced today that mruby Forum will exhibit at the Japan External Trade Organization (JETRO) Pavilion 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. mruby is the lightweight implementation of the Ruby language. We introduce mruby and the mruby IoT framework that enhances development productivity. For more information, visit http://forum.mruby.org/.
In his session at @ThingsExpo, Greg Gorman is the Director, IoT Developer Ecosystem, Watson IoT, will provide a short tutorial on Node-RED, a Node.js-based programming tool for wiring together hardware devices, APIs and online services in new and interesting ways. It provides a browser-based editor that makes it easy to wire together flows using a wide range of nodes in the palette that can be deployed to its runtime in a single-click. There is a large library of contributed nodes that help so...
What is the best strategy for selecting the right offshore company for your business? In his session at 21st Cloud Expo, Alan Winters, U.S. Head of Business Development at MobiDev, will discuss the things to look for - positive and negative - in evaluating your options. He will also discuss how to maximize productivity with your offshore developers. Before you start your search, clearly understand your business needs and how that impacts software choices.
IBM helps FinTechs and financial services companies build and monetize cognitive-enabled financial services apps quickly and at scale. Hosted on IBM Bluemix, IBM’s platform builds in customer insights, regulatory compliance analytics and security to help reduce development time and testing. In his session at 21st Cloud Expo, Lennart Frantzell, a Developer Advocate with IBM, will discuss how these tools simplify the time-consuming tasks of selection, mapping and data integration, allowing devel...
SYS-CON Events announced today that Cedexis 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. Cedexis is the leader in data-driven enterprise global traffic management. Whether optimizing traffic through datacenters, clouds, CDNs, or any combination, Cedexis solutions drive quality and cost-effectiveness.
While some developers care passionately about how data centers and clouds are architected, for most, it is only the end result that matters. To the majority of companies, technology exists to solve a business problem, and only delivers value when it is solving that problem. 2017 brings the mainstream adoption of containers for production workloads. In his session at 21st Cloud Expo, Ben McCormack, VP of Operations at Evernote, will discuss how data centers of the future will be managed, how th...
Why Federal cloud? What is in Federal Clouds and integrations? This session will identify the process and the FedRAMP initiative. But is it sufficient? What is the remedy for keeping abreast of cutting-edge technology? In his session at 21st Cloud Expo, Rasananda Behera will examine the proposed solutions: Private or public or hybrid cloud Responsible governing bodies How can we accomplish?
SYS-CON Events announced today that MIRAI Inc. will exhibit at the Japan External Trade Organization (JETRO) Pavilion 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. MIRAI Inc. are IT consultants from the public sector whose mission is to solve social issues by technology and innovation and to create a meaningful future for people.