Home > Developer > JavaScript
Presumably we all know, Javascrip is the full stack development language, browser, mobile phone, server can see JS figure. This article will share some of the best practices in efficient JavaScript to improve your understanding of JS's underlying and implementation principles.
Data storageA classic problem in computer science is that by changing the location of data storage to get the best read and write performance, the location of the data store can have a significant impact on code performance in JavaScript. – You can use {} to create an object without using new object, and you can use [] to create an array without using the new array. The access speed of the literal in JS is higher than the object. – The deeper the variable is positioned in the scope chain, the longer the practice required to access it. For such variables, it is possible to save by using local variables in the cache, reducing the number of access to the scope chain – using dot notation (object.name) and operator (Object[name]) operations without much difference, only Safari will be different, point always faster
CycleThere are several common loops in JS:
for(var i = 0; i < 10; i++) { // do something} for(var prop in object) { // for loop object} [1,2].forEach(function(value, index, array) { // 基于函数的循环})
Needless to doubt, the first approach is native, with the lowest performance consumption and the fastest speed. The second way for-in each iteration to produce more overhead (local variables), it's only the first 1/7 of the third way to clearly provide a more convenient way to loop, but his speed is only 1/8 of the normal loop. Therefore, according to their own project situation, choose the appropriate cycle.
Event delegateImagine adding an event to each of the A tags on the page, and we will not add an onclick to each tag. This can affect performance when there are a large number of elements in the page that need to be bound to the same event handling. Each bound event increases the burden on the page or during the run. For a rich front-end application, excessive binding can consume too much memory on pages that are heavily interactive. A simple and elegant way to do this is to delegate events. It is an event-based workflow: Capturing layers, reaching targets, bubbling over layers. Now that the event has a bubbling mechanism, we can handle all the child elements from the event by binding the event to the outer layer.
Redraw and rearrangedocument.getElementById(‘content‘).onclick = function(e) { e = e || window.event; var target = e.target || e.srcElement; //如果不是 A标签，我就退出 if(target.nodeNmae !=== ‘A‘) { return } //打印A的链接地址 console.log(target.href) }
When the browser finishes downloading HTML,CSS,JS, it generates two trees: the DOM tree and the render tree. When the geometry of the DOM changes, such as the width of the DOM, or the color, position, the browser needs to recalculate the geometry of the element and rebuild the render tree, a process called redrawing reflow.
document.body.style; bodystyle.color = red; bodystyle.height = 1000px; bodystyke.width = 100%;
By modifying three properties in the above way, the browser performs three reflow redraws, and in some cases, reducing this rearrangement can improve browser rendering performance. The recommended method is as follows, only one operation, complete three steps:
JavaScript loadingdocument.body.style; bodystyle.cssText ‘color:red;height:1000px;width:100%‘;
Ie8,firefox3.5,chrome2 allows a required line to download JavaScript files. So it <script> does not block other label downloads. Unfortunately, the JS download process will still block the download of other resources, compared to tablets. Although the latest browsers improve performance by allowing parallel downloads, scripting blocking is still a problem. Therefore, it is recommended to <script> put all the tags at the bottom of the <body> label to minimize the impact on the entire page rendering, to avoid the user to see a blank
Since you already know that multiple <script> tags can affect page rendering speed, it's not difficult to understand that "reducing the amount of HTTP required for page rendering" is a classic rule for speeding up your site. Therefore, merging all JS files in a product environment reduces the number of requests, which speeds up page rendering. In addition to merging JS files, we can also compress JS files. Compression is the stripping of files that are unrelated to the run. The stripped content includes whitespace characters, and comments. The process can typically halve the file size. There are also some compression tools that reduce the length of local variables, such as:
Cache js Filevar myName = "foo" + "bar"; //压缩后变成 var a = "foobar";
Caching HTTP components can greatly improve the user experience of site visits. The Web server uses the Expires HTTP response header to tell the client how long a resource should be cached. Of course, the cache also has its own flaw: When the app is upgraded, you need to make sure that the user downloads to the latest static content. This problem can be solved by changing the file name of the static resource. You may see in the Product Environment Browser reference JS application-20151123201212.js , this is a timestamp to save the new JS file, so as to resolve the cache does not update the problem.
Of course, efficient JS is more than just these improvements, if you can reduce the loss of some performance, we can more efficient use of javascript for development.
High-performance JavaScript you don't know
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
