Home > Developer > JavaScript
Read Catalogue
It is well known that browsers use a single process to handle multiple tasks, such as UI updates and JavaScript runs, while only one task can be executed at a time, so how long does it take for a user to wait for the browser to respond?
From a cognitive point of view, the parser parses an interface from top to bottom, which means how many <script> tags appear on the interface (whether inline or external), page download and parsing must stop waiting for the script to download and run to completion (note that this includes running), In this process, page parsing and user interaction are completely blocked.
Go back to the top JavaScript first rule: Put the script at the bottom.As we all know, the browser does not render any part of the page until it encounters the <body> tag, and if we put the <script> tag all before the <body> tag, let's think about whether the interface is blank. The browser will not render the page until all JS is downloaded and executed, which is why all <script> tags are placed as close to the <body> as possible to the bottom of the </body>.
Back to top JavaScript the second law: Pack scripts into groups.By reducing the number of references to external script files, it is believed that some large sites will need to request JavaScript files more than once to consolidate this file into a single file, because it requires only a <script> tag to reduce the performance penalty.
The book describes the run a <script> tag to load two JS files (but I did not test success, if there is know how to use, you can tell me, thank you!) ）
Here to illustrate
The bottom line is that when loading JS will block the page rendering, how to let the script does not block the page rendering, the only way is to start after the window.onload has been downloaded JS
JavaScript Third Law: Use non-blocking way to download JS.
The first method: Adds a defer property to script, and the script specified by the Defer property indicates that the scripts do not intend to modify the DOM, so the code can be executed later. But defer is not supported by all browsers. When the script file specified by defer is downloaded, it does not block other browser processing, so in fact defer the specified script file can be downloaded in parallel with other resources on the page. Any script file that is designated as defer must be executed before the DOM is loaded, that is, before the OnLoad event.
The second way: The dynamic creation of the script is to create a script by JS to specify its src to load the scripts file, this method makes the script download and run does not block other page handlers, so you can even put this dynamic script file in the head tag does not matter.
The dynamically created script JS looks like this:
The dynamic script created above will automatically execute the code in it if it is specified as SRC and append to document, so how do I get it to load and execute the callback function or if I want to load multiple JS files to qualify them in order?
Look at the code! Haha (because the dynamically loaded JS, the browser does not guarantee the order of loading)
Another way to get a script file in a non-blocking way is to use XHR (XMLHttpRequest script injection)
The main advantage of this approach is that you can download script files that are not executed immediately, but the downside is that the JS file you want to load dynamically must be in the same domain as the currently running page .
Here are a few dynamically loaded script libraries
lazyload-Multiple script files can be downloaded and guaranteed to be executed sequentially on all browsers. (although multiple files can be loaded dynamically, it is recommended to reduce the number of files as much as possible, as each download is still a separate HTTP request)
Labs.js Its script method is used to load the JS file, the Wait method is used to wait for the file to download and run after the execution of the callback function, through the Wait method allows you which files should wait for other files, specific usage can refer to the Labs use method
Back to the top of the gossipFor any programming language, the location of the data store is related to the speed of access!
The direct amounts in JavaScript include string strings, number numbers, Boolean Boolean, object objects, array arrays, function functions, regular expressions regular expression, null value NULL, Array undefined not defined. The array entry is accessed through the numeric index of the array, and the object is indexed by the string to access its members (here, incidentally, because array items are indexed by numbers and object members are indexed by strings, this is why accessing object members is slower than accessing array items).
The sum is that direct and local variables are accessed much faster than array items and object members, so we should try to use direct and local variables to limit the use of array items and object members.
Both JavaScript prototype chains and closures know that in JavaScript each function is actually an object, and within each function there is a scope property that contains a collection of objects in the scope that was created . So the fact that the internal scope property is the scope of the function. When the function is run, a runtime context is established (the runtime context is actually the environment where the function runs, and for each run of the function, the runtime context is unique, and the run-time context of the function execution is destroyed, i.e. running the same function multiple times creates multiple run-time contexts).
When the function runtime context is determined, its scope is initialized (scope initialization includes function arguments, function internal variables, this), and after the scope is initialized, it is pushed into the front of the scope chain as an activation object. (In fact, this is the principle of the prototype chain, JS is through the prototype chain to implement inheritance, through the closure to implement the public and private members), which is why access to global variables is the slowest, because the global variable it is in the run-time context of the last position of the scope chain.
Go back to the top try using local variables to save global variablesIf you need to access the global variable more than once, try to save it using local variables (which I think the rule applies to in which programming language)
Go back to the top as little as possible to change the chain of scopesI learned that there are only two ways to change the scope chain in JavaScript (1) using the WITH Expression 2) by catching the exception try catch to implement
But with a performance-affecting expression that everyone hates, because we can completely replace it by using a local variable (because with the principle that it changes the scope chain and needs to save a lot of information to ensure that the scope chain is restored before the current operation is completed), This has a noticeable effect on performance)
A catch clause in a try catch can also change the scope chain. When an error occurs in a try block, the program automatically goes into the catch block and pushes the exception object into a Mutable object in the front of the scope chain, that is, in the catch block, all the local variables of the function are placed in the second scope chain object, but after the catch clause is executed, The scope chain is returned to its original state. The catch clause should be minimized to ensure code performance, and if you know the concept of error is high, we should try to fix the error instead of using try Catch
Go back to the top and use the closures as little as possible.It is well known that the most powerful thing about closures is allowing functions to use data outside the local scope.
It is known that when a function is completed, its runtime context is destroyed and it cannot be destroyed when a closure is involved, because it may also need to be referenced by a function, which virtually requires more memory overhead.
Back to top the access speed is related to the nesting depth of membersThe deeper the member nesting, the slower the access speed
Location.href faster than Window.location.href
Window.location.href faster than window.location.href.toString ()
Back to the value of the top cache variable(In fact, if you need access to global variables or multiple access to object members with depth, use local variables to save them for later use)
In the first chapter of JavaScript advanced programming, you divide JavaScript into three parts.
So the fact that the DOM and the BOM are two separate parts, the communication between them is through the function interface between each other, so that two separate parts of the function interface will inevitably bring performance loss . That's why everyone agrees that as little as possible to access and modify DOM elements (note what I'm saying here is access and modification, why include access, please continue to look down haha).
Here is a diagram to illustrate their respective roles.
Back to top 1, when modifying DOM elements, we should try to use innerHTML instead of createelement again appendchild (as tested, use innerHTML faster in all browsers) back to top 2, Another way to modify the contents of a DOM element is to use Element.clonenode instead of document.createelement () to return to top 3, to use local variables to save HTML when looping or traversing elements collectionsWhat exactly is HTML collections, and what elements does it include?
The bottom line is that HTML collections is actually virtual, meaning that when the underlying document is updated, they are automatically updated. When each iteration accesses the length property of the HTML collections, it causes the collector to update, so the length property is cached in a variable and then used in the loop judgment condition.
Back to the top 4, ChildNodes is a collection, which is why many of the suggestions for improving JavaScript performance include "Using FirstChild and nextsibling instead of childnodes traversing DOM elements" Use the diagram to speak (do not believe you can test, obviously testnextsibling faster than testchildnodes, especially when the amount of data is large when a glance can be seen) Back to top 5, if the browser uses the native Queryselectorall () method and the Queryselector () method to use them as much as possible (because they need to write extra code to implement their own functionality), There is one common feature of any programming language is that the native method is always the best performance. Back to top 6, minimize redraw and reflowIn explaining this, by the way what is called redraw, what is called rearrangement
We all know that when a page is displayed in front of us, the fact that the browser downloads all the HTML tags, js,css, images, it parses the file and creates two internal structures, one for the DOM tree and one for the rendering tree. Browsers are arranged according to the DOM tree, and are drawn according to the rendering tree.
What kind of rearrangement would it be?
Understanding Reflow, redrawing is much simpler, in the literal sense is re-drawing, then under what circumstances will be redrawn, such as changing the style background, etc.
Similar we know this should also be noted in the script to minimize repaint and reflow, what will lead to both cases
Reflow: When DOM elements appear hidden/displayed, size changes, position changes, the browser will render the page again, before rendering work in vain
Repaint: When the element's background color, border color does not cause reflow changes, it will cause the browser to re-render the element. It seems to be acceptable, but if we define it at the beginning, it's better not to let the browser repeat the work.
The access to these properties listed in will cause the render tree to be refreshed again resulting in reflow, preferably reducing the number of queries on these properties (layout information), assigning it to local variables when queried, and participating in calculations with local variables.
Let's look at a small example.
This is obviously a bad code, changed three times the style attributes, causing the browser to rearrange three times. One way to improve efficiency is to rearrange it only once. Look at the code below and you'll see.
Or a method that uses the class name
When you need to modify multiple elements in the DOM tree, it is best to reduce reflow and redraw by following these steps
There are three ways to remove elements from the document stream
Paste the code for the second scenario and hopefully you can use this method to improve performance.
for (var i = 0; i < i++) { var el = document.createelement (' P '); el.innerhtml = i; Document.body.appendChild (EL); } Can be replaced by: var frag = document.createdocumentfragment (); for (var i = 0; i < i++) { var el = document.createelement (' P '); el.innerhtml = i; Frag.appendchild (EL); } Document.body.appendChild (Frag);If it is an animated element, it is best to use absolute positioning to keep it out of the flow of the document, so that changing its position will not cause the other elements of the page to Reflow
(This is all I want to say, I hope we can discuss it together!) )
This is my view of high-performance JavaScript a summary, I hope the front-end interested in the joint discussion with me!
Interested can go to know lab.js and lazyload these two very useful. Ha ha! Or you can discuss it with me!
High-performance JavaScript (you deserve a look)
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
