ONEAPM Grand Lecture Hall | 30 tips for improving JavaScript performance

The article is the domestic leading ITOM management platform supplier OneAPM compile renders.

Are you a webmaster or a web developer? Want to create an ultra-fast website?

Today we look at JavaScript, the magic and complexity of technology. It enriches the content of the site, but the performance problems that often occur degrade the user's experience. The best end-user experience has proven to improve website conversion rates, Google search rankings, and visitor satisfaction. High-performance JavaScript means more and better business for you and your company.

Here are some tips for improving JavaScript performance. Likewise, this may help site administrators and site developers create fast sites and provide a first-class user experience.

Tip #1 – Evaluate local variables

(http://blogs.msdn.com/b/ie/archive/2006/08/28/728654.aspx)

Primarily for IE, because local variables are searched from the most specific scope to the largest scope, and can pass through multiple domain hierarchies, this lookup results in a query to a common result. When defining a function scope, if a local variable is not previously declared with a VAR variable, it is important to add the VAR keyword in front of the variable name to define its current scope and prevent the query, thereby increasing the speed of the code.

Tip #2 – Create code shortcuts to speed up coding

For useful code that is frequently used, you can speed up the encoding process by creating shortcuts for longer code, such as document.getElementById. By creating a shortcut, writing a longer script will not take too long and can save the entire process time.

Tip #3 – Implement an element fragment before adding it to the DOM

(http://www.jquery4u.com/dom-modification/improve-javascript-performance)

Before you create the element nodes of the DOM, make sure that you have performed all the operations to improve the performance of JavaScript. This eliminates the need to abandon prepend and Append jQuery APIs.

Tip #4 – Save bytes with minification

(http://sixrevisions.com/web-development/10-ways-to-improve-your-web-page-performance)

Reduce JavaScript documentation by removing characters (tags, source code documents, spaces, and so on) without changing the functionality of the file.

There are many narrowing tools that you can use to complete this process, and you can also reduce the resiliency. Narrowing is the process of removing all unnecessary characters from the source code without altering their functionality.

Tip #5 – Do not use nested loops unless necessary

Reduce unnecessary loops, such as for and while loops, to keep JavaScript linear and avoid the need to traverse thousands of of objects. A useless loop can cause the browser to process code more difficult, slowing down the speed.

Tip #6 – Cache objects to improve performance

Very often, a script is used to access an object repeatedly. Storing repeatedly-accessed objects in user-defined variables, and then using this variable when referencing the object, can immediately achieve performance gains.

Tip #7 – Use a. js file to cache the script

(http://www.javascriptkit.com/javatutors/efficientjs.shtml)

This technique enables performance gains because it allows the browser to load scripts only once, and only needs to invoke the script from the cache when the page is reloaded or re-accessed.

Tip #8 – Place JavaScript at the bottom of the page

Placing the script as far as possible at the bottom of the page speeds up rendering progress and also increases the degree of download parallelism. The result is that the page appears to be loading faster, and in some cases it can also reduce the total amount of code needed.

Tip #9 – Use jquery as a framework

JQuery is used for HTML scripting and is an easy-to-use JavaScript library that can help accelerate any website. JQuery provides a lot of plug-ins that can be used quickly, even for novice programmers.

Tip #10 – Compress files with gzip

(Http://devmoose.com/coding/10-ways-to-instantly-speed-up-your-website)

Using GZIP can significantly reduce the size of JavaScript files, save bandwidth, and speed response times. Sometimes the JavaScript file is very large, and if it is not compressed, it may cause the website to be paralyzed. Smaller files can provide a faster, more satisfying web experience.

Tip #11 – Do not use the WITH keyword

(http://blogs.msdn.com/b/ie/archive/2006/08/28/728654.aspx)

The keyword "with" is considered to be the black sheep, because it has some frustrating flaws in itself. Although the process of using local properties becomes simpler, using with with will increase the cost when looking for variables in other scopes.

Tip #12 – Minimize requests for HTTP

(http://www.websiteoptimization.com/speed/tweak/http)

Minimize requests for HTTP return pages by combining external files and embedding JavaScript directly in the XHTML page. The transmission of each specific HTTP request to the server will result in a significant amount of latency.

Tip #13 – Implementing event proxies

Using the event proxy will make it easier to take advantage of a single event handler to manage an event type for the entire page. If you do not use the event proxy, large WEB applications may stop working due to excessive event handlers. The benefits of implementing event proxies include fewer features that need to be managed, fewer connections between the code and the DOM, and fewer memory requirements for the process.

Tip #14 – do not reuse the same script

(http://www.abhishekbharadwaj.com/2010/12/speed-up-your-website-avoid-duplicate-scripts)

Duplicate scripts can have a significant impact on performance. Duplicate scripts create unwanted HTTP requests, especially in Internet Explorer. Using script tags in HTML pages can help avoid accidentally generating duplicate scripts.

Tip #15 – Remove the double dollar sign $$

(Http://www.mellowmorning.com/2008/05/18/javascript-optimization-high-performance-js-apps)

Using the double dollar sign $$ is not a necessary option when considering the speed of your site.

Tip #16 – Create a variable reference

(http://mondaybynoon.com/2009/04/27/a-couple-of-quick-tips-for-javascript-optimization)

When a node needs to be reused, it is a good idea to define a variable for that node, referencing the variable when the node is used, rather than repeating it back and forth. For a small number of such nodes, this may not significantly improve performance, but this approach can have a noticeable impact when the numbers of nodes are large.

Tip #17 – Increase the speed of the object detection

(HTTP://DEAN.EDWARDS.NAME/WEBLOG/2005/12/JS-TIP1)

A more efficient way to use the object Detection is to use code that is dynamically created based on object detection, rather than performing object detection inside the function.

Tip #18 – Write an effective loop

(http://robertnyman.com/2008/04/11/javascript-loop-performance)

Depending on the browser, different loop implementations can have a significant impact on the performance of the site. Writing an incorrect loop may reduce the responsiveness of those pages that have a large amount of traffic, or cause multiple loops to run at the same time.

Tip #19 – Shorten the scope chain

The global scope is usually slower because it throws a temporary call scope whenever the function is executed, JavaScript searches the scope chain for the first object, and if the variable is not found, it traverses the chain until the global object is searched.

Tip #20 – Direct index to NodeLists

NodeLists are dynamic and consume a lot of memory because they are also updated when the underlying document objects change. Indexing a list directly is faster because the browser does not need to create a node list object at this time.

Tip #21 – Do not use ' eval '

Although the Eval function is a good way to run any code, each string passed to the Eval function needs to be parsed and executed when it is actually run. These time costs are introduced each time the Eval function is called.

Tip #22 – Using function inline

(https://dl.acm.org/citation.cfm?id=844097)

Inline functions help reduce the cost of function calls and replace function calls with called function bodies. Executing a function call in JavaScript is a high-cost operation because there are several preparation steps that need to be performed: allocating space for parameters, copying parameters, and resolving function names.

Tip #23 – Implement Common sub-expression Elimination (CSE)

(HTTP://SUNILKUMARN.WORDPRESS.COM/2010/10/19/COMMON-SUBEXPRESSION-ELIMINATION-CSE)

Common sub-expression Elimination (CSE) is a performance-targeted compiler optimization technique that searches for the same expression objects and replaces them with a single variable that holds the calculated values. It can be argued that using a single local variable for a generic subexpression is always faster than keeping the code constant.

Tip #24 – Build the DOM node and all child nodes offline

When you add complex content to a site, such as a table, you can improve performance by adding complex sub-trees offline.

Tip #25 – Try not to use global variables

Because the scripting engine requires a search scope, when a global variable is referenced from within a function or from another scope, the global variable is destroyed if the local scope is lost. If a variable in the global scope does not always exist in the life cycle of the script, you can improve performance.

Tip #26 – Use the original function operation without using a function call

By using an equivalent primitive function instead of a function call, you can achieve speed gains in loops and functions that have a critical impact on performance.

Tip #27 – Don't keep references to other documents all the time

(http://dev.opera.com/articles/view/efficient-javascript/?page=4#docreferences)

You can achieve faster performance by not retaining references to other documents when the script ends. Because any references to objects in other documents are not saved in the entire DOM tree, and the scripting environment is not persisted in memory. So the document itself is no longer loaded.

Tip #28 – Use XMLHttpRequest

(http://dev.opera.com/articles/view/efficient-javascript/?page=4#docreferences)

XMLHttpRequest helps reduce the amount of content from the server side and avoids the performance impact of destroying and recreating the scripting environment in the space of page loading. Be sure to support XMLHttpRequest, which may cause problems and confusion.

Tip #29 – Avoid using the try-catch-finally structure

(http://dev.opera.com/articles/view/efficient-javascript/?page=2)

Whenever a catch clause is executed, the caught exception object is assigned to a variable, and "try-catch-finally" creates a new variable at run time in the current scope. Many browsers cannot handle this process effectively because the variables are created and destroyed at run time. Avoid using it!

Tip #30 – Do not misuse for-in

(http://dev.opera.com/articles/view/efficient-javascript/?page=2)

Because the "for-in" loop requires the scripting engine to build a list that contains all the enumerable properties, the code within the for loop does not modify the list. Inside the For loop, the length of the list is calculated beforehand and assigned to the variable len, and then iterated.

We'll also post a series on performance management in the future ... Please pay attention!

Browser Insight is a real user-based Web front-end performance monitoring platform, can help you locate site performance bottlenecks, site acceleration effect visualization; Support Browser, App browse HTML and HTML5 page. To read more technical articles, please visit the OneAPM Official technology blog.

Source: http://blog.oneapm.com/apm-tech/802.html

ONEAPM Grand Lecture Hall | 30 tips for improving JavaScript performance