Original link: https://blog.lipux.cn/archives/334.html
foreword
Some time ago, I read the book “High Performance JavaScript” sporadically. Although the age of the book is relatively old, there are still many methods that we can learn from.
load and run
The browser parses the page from top to bottom. When the script tag is parsed, the update of the entire page will be stagnant, and it needs to wait for the script download and parsing in the script to complete before continuing to update the UI interface below, which means This waiting time will cause the page to appear briefly blank. For this problem, there are the following solutions.
1. Change the position of script tags <br /> Place all script tags at the bottom of the page, just above the closing body tag </body>. This method can ensure that the page completes the parsing of the interface before the script runs.
2. Incorporate JavaScript
Package scripts in groups. The fewer <script> tags a page has, the faster the page loads and the more responsive it is. This is true whether external script files or inline code.
3. Compressing JavaScript code <br /> Compressing JavaScript code can reduce the burden of loading JavaScript code, such as comments in the code, long strings of variables, spaces, and so on. Of course, these tasks do not need us to do manually, there are some special compression tools available.
data access
In JavaScript, where data is stored can have a significant impact on the overall performance of your code. There are four types of data access: literal, variable, array item, object member. They have different performance considerations.
1. Use direct quantity <br /> The so-called direct quantity is to declare an array or object literally.
E.g:
// 声明一个数组let arr = [1,2,3] // 声明一个对象let obj = {key:"value"}
Therefore, it is more recommended to use this method to create arrays and objects, but with the optimization of browser parsing performance, the difference in performance improvement of this method is negligible.
2. Use local variables as much as possible <br />In JavaScript, the use of variables is based on the principle of proximity. When you refer to a variable, JavaScript will look for the declaration position of the variable in the current scope. If it is not found, it will It will look for the next level of scope, and turn it out layer by layer until it is found.
So a local variable is faster than an out-of-scope variable because it is in the first object in the scope chain. The deeper a variable is in the scope chain, the longer it takes to access. Global variables are always the slowest because they are always the last link in the scope chain.
If you must refer to a global variable, then it is best to use a local variable to save this data, then when we need to access the global variable again, we only need to refer to that local variable, so that we can reduce Number of lookups for global variables.
3. Reduce the nesting of object members <br /> The deeper a property or method is in the prototype chain, the slower it is to access it, because when you need to use a property or method, you need a layer by layer Lookup, nested object members can have a significant performance impact and should be used sparingly.
4. Reduce the number of reads of object members <br />Each read of object members will bring some performance burden, so we should reduce the number of reads of object members as much as possible.
// 判断元素的类名function hClass(element, className1, className2){ return element.className == className1 || element.className == className2; }
In the above code, element.className is accessed twice. Obviously, its value will not change during this function process, but it still causes two object member search processes. You can store its value in a local variable, eliminating a search. amend as below:
// 判断元素的类名function hClass(element, className1, className2) { let currentN = element.className; return currentN == className1 || currentN == className2; }
In this rewritten version, the member search is done only once. Since both object searches are reading the property value, it makes sense to just read it once and store the value in a local variable. Access to local variables is much faster. When used in a multiple loop, this method will greatly improve the performance of the code.
This article is reproduced from: https://blog.lipux.cn/archives/334.html
This site is for inclusion only, and the copyright belongs to the original author.