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.
The following basic JavaScript best practices can help optimize application performance:
var doc = document; var a = doc.getElementById('aaa'); var b = doc.getElementById('bbb');
var trash = document.getElementById('trash'); var forms = document.getElementsByTagName('form');
for in
with
To improve application launch speed:
<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.
For a case study on how application launch speed can be improved by optimizing code, see Launch Time Optimization.
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-transform
@-webkit-keyframes 'move' { from {-webkit-transform:translateX(0px);} to {-webkit-transform:translateX(200px);} }
For more detailed and comprehensive information on JavaScript, study the following resources:
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: