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.
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:
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.
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:
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.
Manage Your Cookies
We use cookies to improve your experience on our website and to show you relevant
advertising. Manage you settings for our cookies below.
Essential Cookies
These cookies are essential as they enable you to move around the website. This
category cannot be disabled.
Company
Domain
Samsung Electronics
.samsungdeveloperconference.com
Analytical/Performance Cookies
These cookies collect information about how you use our website. for example which
pages you visit most often. All information these cookies collect is used to improve
how the website works.
Company
Domain
LinkedIn
.linkedin.com
Meta (formerly Facebook)
.samsungdeveloperconference.com
Google Inc.
.samsungdeveloperconference.com
Functionality Cookies
These cookies allow our website to remember choices you make (such as your user name, language or the region your are in) and
tailor the website to provide enhanced features and content for you.
Company
Domain
LinkedIn
.ads.linkedin.com, .linkedin.com
Advertising Cookies
These cookies gather information about your browser habits. They remember that
you've visited our website and share this information with other organizations such
as advertisers.
Company
Domain
LinkedIn
.linkedin.com
Meta (formerly Facebook)
.samsungdeveloperconference.com
Google Inc.
.samsungdeveloperconference.com
Preferences Submitted
You have successfully updated your cookie preferences.