Can pass https://jsbench.me/ Test the website and complete the performance test .
One . Use global variables with caution
1. Global variables are defined in the global execution context , It's the top of all the scope chains , Variables that are not found in the local scope will be found in the global variable , So the search
Time consuming .
2. The global execution context always exists in the context execution stack , Until the program exits .
3. If a variable with the same name appears in a certain and local scope, it will obscure or pollute the global scope .
Next, we will analyze it through the code Global variable storage and local variable storage Performance comparison local variable storage is faster
Two . Cache global variables
Cache the global variables that cannot be avoided in use to local , As shown in the figure below, local variable caching is faster than global variable caching
3、 ... and . Adding methods through prototypes
As shown in the figure below, the method of adding a prototype chain is relatively fast
Four . Avoid closure traps
Closure characteristics :
1. The outside has a reference to the inside
2. Access the data of the internal scope in the external scope
As shown in the figure below , Call function foo,foo The function points inside fn The existence of , That is to say, the external refers to the internal reference
When calling foo Function , We are foo The scope can access foo Inside name Variable , That is, the external scope accesses the data of the internal scope
As shown in the figure below, improper use of closures can easily lead to memory leaks
First ,btn The element itself exists in dom nodes , It's just for btn1 This variable is stored inside the function , So onclick Events are the outside pointing to the inside , full
That's the first thing about closures ,onclick When an event is called , The scope is a separate scope , Follow foo Scope is not a scope , It uses foo do
Use the el, So satisfy the second of closures . There's a problem with this code , According to our previous GC The reference mechanism of garbage collection ,btn This dom Object is referenced 2 Time ,
Once in html in , Once in foo In variables , If we take this dom Node slave html Delete in , That's one less reference , But in foo There's another internal reference
It won't go away , That's why garbage can't be recycled , That's what we call a memory leak .
The solution is as follows , When the operation is finished, put btn1 Set as null
5、 ... and . Avoid using property access methods
according to JS Characteristics of , All the properties and methods inside the constructor are exposed to the outside , Try to avoid using methods to return properties inside constructors , Instead, we should visit them directly
attribute , As shown in the figure below , Obviously Direct access to properties is faster .
6、 ... and .for Cycle optimization
As shown in the figure below ,
7、 ... and . Choose the best cycle method
As shown in the figure below , If we just traverse the data of the array ,foreach Best performance , The second is for, And finally for in
8、 ... and . Document fragment optimization node add
As shown in the figure below , Adding document fragment nodes is faster
Nine . Clone optimizes node operations
Cloning is mainly about adding Dom node , It can be based on the fact that similar Dom node , replicate , So as to reduce the consumption of performance, as shown in the figure below , clone DOM Node ratio
establish DOM Nodes should be faster .
Ten . Direct substitution new object
As shown in the figure below ： It's better to define arrays directly with variables than with new Object The way to create arrays is obviously faster
- [ original ] Talking about H5 Page performance optimization method
[ original ] Talking about H5 Page performance optimization method The former company H5 Page performance test , Some performance bottlenecks were also found during the test , Now let's talk about H5 Page performance optimization , Just some common H5 Page performance optimization measures , Actually sum Web Page performance optimization ideas ...
- Talking about webpack4.0 performance optimization （ turn ）
Preface : In real projects , We may rarely need to configure one from scratch webpack project , especially webpack4.0 After release , Zero configuration starts a project and becomes a standard configuration . Because of zero configuration webpack To the project itself “ pack ” and “ ...
- Talking about Oracle The goal of database performance optimization
Oracle Performance optimization guarantees Oracle The robustness of the database , In order to ensure Oracle The database runs in the best performance state , Before the development of information system, we should consider the optimization strategy of database . Distinguish from the scenario of database performance optimization , Performance optimization can be divided into such categories as ...
- Talking about web Front end performance optimization
Front end performance optimization : One . Minimize the front end http request . 1. Merge optimization script files and css file . 2. Try to put the same kind of background together , use css Control display . Two . Use browser cache . If you can force the browser to cache locally , Will decrease ...
- BizTalk Development series ( Thirty-two ) Talking about BizTalk Host performance optimization
quite a lot BizTalk All projects should consider the problem of performance optimization , although BizTalk Using multithreading to process messages , Greatly improve the efficiency of the program . But by default BizTalk The host has many blocking parameters to control BizTalk Resource utilization of the server , ...
- Talking about Vue Project performance optimization Experience
I'd like to summarize a few points about optimizing the company's projects : 1. Look at the size of the imported image first , If it's too big , Can be compressed , Compress path :https://zhitu.isux.us/ 2. Package optimization , After the completion of the next project development . Package the source code online , You need to check ...
In this paper, from :http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=400360237&idx=2&sn=eb00241cb3b ...
- Talking about MySQL Database performance optimization
MySQL The database is IO Intensive program , Like other databases , The main function is data persistence and data management . This paper focuses on optimizing MySQL Database cache parameters such as query cache , Table cache , Log cache , The index buffer ,innodb cache ...
- 【JBOSS】 Database connection configuration summary
Database driver location : %JBOSS_HOME%\server\default\lib Under the table of contents . Database configuration file location :JBOSS_HOME\docs\examples\jca\XXXX-ds.xml < ...
- Python Multithreading （3）——Queue modular
Queue The module supports FIFO (FIFO) queue , Support multi thread access , Including a major type (Queue) And two exception classes (exception classes). Python 2 Medium Queue Modules in Python ...
- Restrict each user to a single session in window server 2008 R2 or 2012
Restrict each user to a single session in window server 2008 R2 or 2012 2014-10-31 In window server ...
- Single node pseudo distributed cluster （weekend110） Of Hive Subproject startup sequence
because , my mysql Yes, it is root user , stay /home/hadoop/app/ Under the table of contents , Created . First step : Turn on mysql service The second step : start-up hive [hadoop@weekend110 app]$ su r ...
- read 【10 ask PHP The programmer 】 Feeling
http://bbs.phpchina.com/thread-174331-1-1.html See the articles of predecessors , Sum up your learning experience , Quite perceptive , Here is my summary , Usually take it out and ask yourself more .1. I have been studying for more than ten years ...
- redis series -- Master slave replication and redis Replication evolution
One . Preface In the previous article, I have described in detail redis The basics are persistent, including redis4.0 The hybrid persistence provided . Through the persistence function ,Redis Ensure that even in the case of server downtime, the loss of data is very small . But if this suit ...
- Core components SecurityContextHolder
effect : Keep the current security context details of the system , This includes information about the users who are currently using the system . How to express context details ? use SecurityContext Object to represent Every user has its context , So this one Securi ...
- HGOI 20181101 Answer key
/* Another explosion 0 A day of ( I don't know if this year's college entrance examination is difficult , Anyway, today ( information science ) It's really hard !) */ solution: For two numbers to add , There is an obvious conclusion that it is either not carry ( Relative to the large number of ), or ( Up to one ) And then for the entire array ...
- SharePoint 2013 Step by Step——How to Create a Lookup Column to Another Site(Cross Site)
OverView In this post,I want to show u how to add a look up column in my list or library that looks ...
- shell_exec() has been disabled for security reasons How to solve the mistake ？
ytkah In use composer When installing the plug-in shell_exec() has been disabled for security reasons Error message , This is php Configuration issues ,shell_exe ...