Application Performance Improvement

This topic describes JavaScript coding practices for optimizing your code, which can improve application performance.

To improve the performance of your application, learn how to optimize your JavaScript code, start the application quickly, and run the application efficiently.

Basic JavaScript Tips

The following basic JavaScript best practices can help optimize application performance:

  • Use local variables instead of global variables. You can improve processing performance by storing the value of global variables in local variables.
    var doc = document; 
var a = doc.getElementById('aaa'); 
var b = doc.getElementById('bbb');
  • Improve processing performance by assigning frequently-used HTML elements to variables:
    var trash = document.getElementById('trash'); 
var forms = document.getElementsByTagName('form');
  • Do not use for in loops and with statements.
  • Closure is very useful, but can reduce performance. Use it only when necessary.

Improving Application Launch Speed

To improve application launch speed:

  • Minimize the number of JS files loaded in HTML on application launch.
    You can reduce the time it takes to load the first screen by loading only the files required for it.
  • While communicating with servers or loading JS files, first display the background of the first screen, then load the content incrementally. By loading images quickly, the application appears to launch faster and more smoothly.
  • Reduce loading time by minifying JavaScript files.
  • Use Lazy Load to avoid loading images which are not shown on screen, reducing loading time.
    Lazy Load can be implemented using jQuery:
    <script type='text/JavaScript' src='jquery.js'></script> 
<script type='text/JavaScript' src='jquery.lazyload.js'></script> 
<script> 
  function onLoad() { 
    $('img.lazy').lazyload(); 
  }
</script> 

<body> 
  <img class='lazy' data-original='img/example.jpg' width='765' height='574'>
    For more information, see Lazy Load.
  • Reduce the total time spent communicating with the server as much as possible.
    Start sending requests as soon as possible and process independent data in parallel communications.

For a case study on how application launch speed can be improved by optimizing code, see Launch Time Optimization.

Improving Application Running Performance

To improve performance of the running application:

  • Change CSS classes instead of changing HTML element styles:
    .elm { 
  background-color: #fff; 
  padding-left: 0px; 
} 

    <div class='elm'>...</div>
  • Use GPU acceleration to improve rendering performance. Simply changing the top and left value causes reflow. If you use -webkit-transform, it is rendered through GPU acceleration.
    @-webkit-keyframes 'move' { 
  from {-webkit-transform:translateX(0px);} 
  to {-webkit-transform:translateX(200px);} 
}

JavaScript Resources and Tools

For more detailed and comprehensive information on JavaScript, study the following resources:

  • Web Fundamentals by Google Developers
    A comprehensive guide to Web development, covering all aspects of development, including performance.
  • Airbnb JavaScript Style Guide and A JavaScript Quality Guide
    Examples of well-thought-out JavaScript style guides. There is no single best code style guide, and there is a lot of room for individual preference. However, keeping a consistent code style throughout your application makes it easier to debug and maintain. If you work in a team, make sure all team members follow the same style guide.
  • You Don't Know JS book series by Kyle Simpson
    A series of free e-books about core JavaScript mechanisms as well as useful techniques. The Async & Performance volume is especially recommended.
  • Awesome JavaScript
    A collection of useful JavaScript frameworks, libraries, tools, and utilities.
  • Frontend Development
    A collection of useful tutorials, guides, articles, and podcasts.
  • Must-Watch Videos About JavaScript
    A collection of JavaScript and Web development-related videos.

Maintaining application code and keeping it clean can be repetitive and tedious. However, tasks, such as optimizing graphics, building sprites, concatenating and minifying the code, building CSS files, aligning the code, and parsing CoffeeScript, can be automated. The following automation tools are popular among JavaScript developers, and can be customized with plugins and extensions:

The following additional tools can be useful:

  • Compass CSS Authoring Framework is an open source toolchain that enables easier creation of CSS files, including CSS file concatenation. It can also optimize images and generate sprites, and integrates with Grunt and Gulp.
  • ESLint and JSHint are tools for enforcing a defined style of JavaScript code. Both can be configured to work with Grunt and Gulp.
  • YUI Compressor is a JavaScript minifier developed by Yahoo.