Home > Developer > JavaScript
High-performance JAVASCRIPT, high-performance javascript
This article will share some efficient JavaScript best practices to improve your understanding of the underlying and implementation principles of JavaScript.
Data Storage
One typical problem in computer science is that you can change the location of data storage to achieve the best read/write performance. In JavaScript, the location of data storage has a major impact on code performance. -If you can use {} to create an Object, do not use new Object. If you can use [] to create an Array, do not use new Array. In JS, the literal access speed is higher than the object speed. -The deeper the variable is in the scope chain, the longer the access practice is required. This type of variable can be saved by using local variables in the cache to reduce the number of accesses to the scope chain-using dot notation (object. name) and operator (object [name]) operations are not much different, only Safari will have a difference, points are always faster
Loop
Common loops in JS include the following:
For (var I = 0; I <10; I ++) {// do something} for (var prop in object) {// for loop object} [1, 2]. forEach (function (value, index, array) {// function-based loop })
Undoubtedly, the first method is native, with the lowest performance consumption and the fastest speed. The second method, for-in, generates more overhead (local variables) for each iteration. The speed is only 1/7 of the first method, and the third method obviously provides a more convenient loop method, however, the speed is only 1/8 of the normal cycle. Therefore, you can select an appropriate loop method based on your project situation.
Event Delegate
Imagine adding an event to each A tag on the page. Will we add an onClick to each tag. When a large number of elements on the page need to be bound to the same event for processing, this situation may affect the performance. Every event bound increases the page or running burden. For a rich front-end application, too many bindings on pages with heavy interaction will occupy too much memory. Event delegation is a simple and elegant method. It is an event-based workflow: layer-by-layer capturing, reaching the target, layer-by-layer bubbling. Since the event has a bubble mechanism, we can bind an event to the outer layer to handle all the events starting from the child element.
Document. getElementById ('content '). onclick = function (e) {e = e | window. event; var target = e.tar get | e. srcElement; // if it is not A, I will exit if (target. nodeNmae! === 'A') {return} // print the link address of A. console. log (target. href )}
Repainting and rearranging
After the browser downloads HTMl and CSS, JS will generate two trees: DOM tree and rendering tree. When the Dom's geometric attributes change, such as the width and height of the Dom, or the color and position, the browser needs to re-calculate the element's geometric attributes and re-build the rendering tree, this process is called re-painting and re-arrangement.
bodystyle = document.body.style; bodystyle.color = red; bodystyle.height = 1000px; bodystyke.width = 100%;
If you modify the three attributes in the preceding method, the browser will re-paint three times. In some cases, reducing this re-arrangement can improve the rendering performance of the browser. The recommended method is as follows. Perform only one operation and complete three steps:
bodystyle = document.body.style; bodystyle.cssText 'color:red;height:1000px;width:100%';
JavaScript Loading
IE8, Firefox3.5, and Chrome2 both allow mandatory JavaScript file downloads. Therefore, <script> does not block downloading other tags. Unfortunately, the JS download process will still block the download of other resources, such as slice. Although the latest browser improves performance by allowing parallel downloads, script blocking is still a problem. Therefore, we recommend that you put all the <script> labels at the bottom of the <body> label to minimize the impact on the rendering of the entire page and avoid a blank area.
High-performance deployment of JS files
As you already know that multiple <script> tags will affect page rendering speed, it is hard to understand that "Reducing the HTTP required for page rendering" is a classic rule for website acceleration. Therefore, merging all JS files in the product environment reduces the number of requests and accelerates page rendering. In addition to merging JS files, we can also compress JS files. Compression is used to strip parts of the file that are not related to running. The stripped content includes white space characters and comments. The file size can be halved. Some compression tools reduce the length of local variables, such:
Var myName = "foo" + "bar"; // compress the file to var a = "foobar ";
Cache JS files
Caching HTTP components can greatly improve the user experience of website return visits. The Web server uses the "Expires HTTP Response Header" to tell the client how long a resource should be cached. Of course, cache also has its own drawbacks: When an application is upgraded, you need to ensure that the user downloads the latest static content. This problem can be solved by changing the file name of the static resource. You may see the browser reference jsapplication-20151123201212.js in the product environment, this is to save the new JS file in the way of Timestamp, so as to solve the problem of cache not updating.
Summary
Of course, highly efficient JavaScript is not only about these improvements. If we can reduce some performance loss, we can use JavaScript for development more efficiently.
High-performance JAVASCRIPT you don't know. Now you know it!
Articles you may be interested in:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
