Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to understand and use JavaScript caching

2025-01-17 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/03 Report--

How to understand and use JavaScript cache, in response to this problem, this article details the corresponding analysis and solutions, hoping to help more small partners who want to solve this problem find a simpler and easier way.

As our applications continue to grow and begin to perform complex calculations, the demand for speed increases.️Therefore, optimization of the process becomes essential. When we ignore this problem, our final program takes a lot of time and consumes a lot of system resources during execution.

Caching is an optimization technique that speeds up an application by storing the results of an expensive function execution and returning cached results when the same input occurs again.

If it doesn't mean much to you, that's okay. This article explains in depth why caching is needed, what caching is, how to implement it, and when caching should be used.

What is cache

Caching is an optimization technique that speeds up an application by storing the results of expensive function executions and returning cached results when the same input occurs again.

At this point, it is clear that the purpose of caching is to reduce the time and resources spent performing "expensive function calls."

What is an expensive function call? don't get me wrong, we're not spending money here. In the context of computer programs, the two main resources we have are time and memory. Therefore, an expensive function call refers to a function call that takes up a lot of computer resources and time during execution due to the large amount of computation.

However, just like with money, we need to economize. For this purpose, caches are used to store the results of function calls for quick and easy access at a future time.

A cache is simply a temporary data store that holds data so that future requests for that data can be processed more quickly.

Thus, when an expensive function is called once, the result is stored in the cache, so that every time the function is called again in the application, the result is fetched from the cache very quickly without any recomputation.

Why is caching important?

Here is an example of how important caching is:

Imagine you are reading a new novel in the park with an attractive cover. Every time a person passes by, they are attracted to the cover, so they ask about the title and author. *** The next time you are asked this question, you open the book and read the title and author's name. More and more people are asking the same question. You're a good person? So you answer all the questions.

Would you open the cover and tell him the book title and the author's name, or would you start answering from memory? Which will save you more time?

See any similarities? With mnemonics, when a function is supplied with input, it performs the required calculations and stores the results in a cache before returning a value. If it receives the same input in the future, it doesn't have to repeat it over and over again, it just needs to provide the answer from the cache (memory).

How does caching work?

The concept of caching in JavaScript is based on two concepts:

closure

Higher order functions (functions that return functions)

closure

A closure is a combination of a function and the lexical environment in which the function is declared.

Not very clear? I think so too.

To better understand, let's take a quick look at the concept of lexical scope in JavaScript, which simply refers to the physical location of variables and blocks that programmers specify when writing code. The code is as follows:

function foo(a) { var b = a + 2; function bar(c) { console.log(a, b, c); } bar(b * 2); } foo(3); // 3, 5, 10

From this code we can determine three scopes:

Global scope (contains foo as unique identifier)

foo scope, which has identifiers a, b, and bar

The bar scope, containing the c identifier

Looking closely at the code above, we notice that the function foo has access to variables a and b because it is nested inside foo. Notice that we successfully stored the function bar and its environment. Thus, we say bar has a closure on the scope of foo.

You can understand this in the context of heredity, that individuals have the opportunity to acquire and exhibit inherited traits even outside of their current environment. This logic highlights another element of closure, leading to our second main concept.

Return function from function

Functions that accept other functions as arguments or return other functions are called higher order functions.

Closures allow us to call the inner function outside the enclosing function while maintaining access to the lexical scope of the enclosing function

Let's make some adjustments to the code in the previous example to explain this.

function foo(){ var a = 2; function bar() { console.log(a); } return bar; } var baz = foo(); baz();//2

Notice how the function foo returns another function bar. Here we execute foo and assign the return value to baz. But in this case, we have a return function, so baz now holds a reference to the bar function defined in foo.

The most interesting thing is that when we execute the function baz outside the lexical scope of foo, we still get the value of a. How is this possible?

Remember that bar always has access to variables (inherited properties) in foo because of closures, even if it is executed outside foo's scope.

Case Study: Fibonacci Sequence

What is the Fibonacci sequence?

A Fibonacci sequence is a set of numbers that starts with a 1 or 0 followed by a 1 and proceeds according to the rule that each number equals the sum of the first two numbers. as

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, …

or

1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, …

Challenge: Write a function that returns n elements of a Fibonacci sequence, where the sequence is:

[1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, …]

Knowing that each value is the sum of the first two values, the recursive solution to this problem is:

function fibonacci(n) { if (n

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report