Performance should always be considered as we develop. This article lists 12 ways to improve system performance effectively. If you have more tips, please comment below wu xiaodi’s blog. Thank you.
Performance is one of the most important aspects of creating a Web page or application. No one wants an app to crash or a web page to not load, or a user to wait for a long time. According to Kissmetrics, 47% of visitors expect a site to load in less than 2 seconds, and 40% of visitors leave the site if the loading process takes more than 3 seconds.
With these numbers in mind, you should always consider performance when creating Web applications. To help you get started, here are 12 ways to improve your application’s performance:
One: cache in the browser
There are two options for doing this. The first is to use the JavaScript Cache API, which we can install the Service worker to use. The second is to use the HTTP protocol cache.
Accessing an object is usually done with a script. You can achieve an immediate performance improvement by storing a repeatedly accessed object in user-defined variables and using variables in subsequent references to the object.
Two: define the execution context
To effectively measure any improvements you add to your program, you must create a well-defined set of environments in which to test code performance.
Performance testing and tuning all versions of all JavaScript engines is practically not feasible. However, it is not a good habit to test in a single environment because you may get partial results. Therefore, it is important to set up multiple well-defined environments and test your code to see if it works.
Three: Delete unused JavaScript
This step reduces not only the transfer time, but also the time it takes the browser to analyze and compile the code. To do this, you must consider the following:
- If you detect a feature that users are not using, it’s a good idea to remove all JavaScript code associated with it so that your site loads faster and your users have a better experience.
- Alternatively, you may have mistakenly added a library that you don’t need, or you may have dependencies that provide functionality that is already available in all browsers, so you don’t need to add extra code.
Four: avoid using too much memory
You should always put a limit on memory that only uses it if it’s absolutely necessary, because you never know how much memory the device running your application will need. As soon as your code requires the browser to reserve new memory, the browser’s garbage collector is executed and stops JavaScript from running. If this happens often, the page will slow down.
Five: delay unnecessary JS loading
Users expect pages to load quickly, but not all functions need to be available at initial page loading. If the user must do something to execute a function (for example, by clicking on an element or changing a TAB), you can postpone the loading of the function until after the initial page loads.
This way, you can avoid loading and compiling JavaScript code that delays the initial display of the page. Once the page is fully loaded, we can start loading these features again so that they are immediately available when the user starts interacting. In the RAIL model, Google suggests that this lazy loading be done in 50ms so that it does not affect the user’s interaction with the page.
Six: avoid memory leaks
If memory is leaking, loaded pages will retain more and more memory and end up eating up all of the device’s available memory and severely impacting performance. You’ve probably seen (and probably regretted) this kind of failure, for example on a page with a scroll or image slider.
In Chrome Developer Tools, you can analyze whether your site has a memory leak by recording a timeline in the “Performance” TAB. Usually, the reason for a memory leak is that you remove the DOM from the page, but some variables still reference the DOM, so the garbage collector can’t eliminate them.
7. Use Web workers properly
Use the Web Worker when executing code that takes a long time. According to the Mozilla Developer Network (MDN) document: “Web workers can run script actions in background threads separate from the main execution thread of the Web application. The advantage of this is that you can perform time-consuming and laborious processing in a separate thread while allowing the main (usually UI) thread to run without being blocked or slowed down.”
Web workers allow code to perform processor-intensive calculations without blocking user interface threads. Web Workers allow you to generate new threads and delegate work to them for high performance. In this way, long-running tasks that would normally block other tasks are passed to the worker so that the main thread can run without obstruction.
Eight: Store DOM elements in local variables as appropriate
DOM access is slow. If you want to read the contents of an element more than once, it is best to store it in local variables. It is important to remember, however, that if you are going to delete the DOM value later, you should set the variable to “NULL”, otherwise it will cause a memory leak.
Nine: Priority access to local variables
JavaScript searches first to see if a variable exists locally, and then steps up to global variables at higher levels of scope. Keeping variables in local scope gives JavaScript faster access to them.
Local variables are based on the most specific scope and can cross multiple levels of scope, so the act of looking up can lead to generic queries. When defining a function scope in a local variable that is not preceded by a variable declaration, you need to precede each variable with let or const to define the current scope, preventing lookups and speeding up code execution.
Ten: Avoid using global variables
Because the script engine needs to look at the scope one by one when referencing a global variable from within a function or other scope, the variable is destroyed when the local scope is lost. If variables in the global scope do not persist for the life of the script, performance will improve.
Eleven: Implement some optimization plans
-
Always use the least computationally complex algorithm and the best data structure to solve the task.
-
Rewrite the algorithm to get the same results and fewer calculations.
-
Avoid recursive calls.
-
Add variables, calculations, and calls to repeating functions.
-
Decompose and simplify mathematical formulas.
-
Use search arrays: Use them to get values based on one another, rather than using switch/case statements.
-
Make the condition always more likely to be true to take better advantage of the processor’s speculative execution.
-
If you can, replace some operations with bit-level operators, because these operators have short processing cycles.
Twelve: Use tools to detect problems
Lighthouse is a great web performance tool that helps you audit performance, accessibility, best practices, and SEO. Google PageSpeed is designed to help developers understand performance optimizations and potential improvements to a site. These components are designed to identify site compliance with Google Web performance best practices and automate the tuning process.
In Chrome, you can also use the “More Tools” option in the main menu to see how much memory and CPU each TAB is using. For more advanced analysis, you can use the Developer tools’ Performance ‘view in Firefox or Chrome to analyze different metrics, such as:
For node.js-based applications, the NodeSource Platform is also a great, low-impact way to explore application performance at a very fine-grained level.
Comprehensive Node.js metrics can help you identify sources of memory leaks or other performance issues and resolve them faster.
Finally, it’s important to strike a balance between readability and optimization. The code is interpreted by the computer, but we need to ensure that the code can be maintained by ourselves or others in the future, so they need to be easy to understand.
Remember: Performance should always be considered, but not over error detection and feature addition.