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

Talking about JavaScript More articles on code performance optimization

  1. [ 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 ...

  2. JavaScript Summary of code performance optimization

    JavaScript Summary of code performance optimization Try to use the original method javaScript It's an explanatory language , It's slower than compiled languages . Browser has been implemented , Don't do it again . in addition , The method that the browser has implemented is in the aspect of algorithm ...

  3. 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 “ ...

  4. 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 ...

  5. 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 ...

  6. 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 , ...

  7. 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 ...

  8. 【 turn 】JavaScript Summary of code performance optimization

    The author of this article :zifan come from : Ctrip Design Committee link :http://ued.ctrip.com/blog/javascript-code-performance-optimization-summary. ...

  9. JavaScript Summary of code performance optimization

    In this paper, from :http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=400360237&idx=2&sn=eb00241cb3b ...

  10. 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 ...

Random recommendation

  1. 【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 < ...

  2. 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 ...

  3. 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 ...

  4. 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 ...

  5. 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 ...

  6. 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 ...

  7. 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 ...

  8. 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 ...

  9. 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 ...

  10. 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 ...