
Some times I need to deploy SPA (create-react-app, Vue, Angular) with nginx on my server. And here is the boilerplate for nginx configuration that allows you to modify it according to your requirements.

```nginx
server {
    listen 80;
    server_name your.server.name;

    root /path/to/your/server/name;
    index index.html;

    # For some static files that should return with http-status-code
    location ~* \.(?:manifest|appcache|html?|xml|json|md)$ {
        expires -1;
    }

    # For some necessary static files
    location ~* \.(?:css|js)$ {
        try_files $uri =404;
        expires -1;
        access_log off;
        add_header Cache-Control "public";
    }

    # If you set backend services such as nodejs, you can do local proxy here.
    # For example, the following code will lead http://your.server.name/api/your-api to http://localhost:3000/your-api
    location /api/ {
      proxy_pass http://localhost:3000/;
    }

    # location ~ ^.+\..+$ {
    #   try_files $uri =404;
    # }

    location / {
        try_files $uri $uri/ /index.html;
    }

    # PHP service here.
    # location ~ \.php$ {
    #     include snippets/fastcgi-php.conf;
    #     fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
    # }
}
```

For https deployment please refer to [This blog.](https://blog.terminels.com/post/how-to-use-certbot)


Some times I need to deploy SPA (create-react-app, Vue, Angular) with nginx on my server. And here is the boilerplate for nginx configuration that allows you to modify it according to your requirements.

Configuration Boilerplate for SPA with Nginx


## What's the Certbot

When we apply for and use Let's Encrypt's free HTTPS certificate, we need a certificate application and management tool. Then certbot is the officially recommended application tool. We use this tool to apply for and manage our certificates.

certbot supports most Linux distributions and is easy to use. We download and install them directly:

My system here is Ubuntu. If it is CentOS or other distributions, the installation method should be similar. I use the official package to install it directly and quickly.

You can read [here] about what HTTPS is (<https://juejin.im/entry/58d7635e5c497d0057fae036>), and you can read [here] (<https://letsencrypt.org/zh-cn/getting-started/>) about what Let's Encrypt is.

```bash
sudo apt update && sudo apt install certbot
```

After the installation is successful, you need to use the sudo command to run it. Let's run it and see:

```bash
sudo certbot -h
```

## Get certificate

After installing the management tools, we need to apply for a certificate. My web server here is NGINX, and I do not have a static directory for the website, so I use this command to apply:

```bash
sudo certbot certonly --standalone -d example.com -d www.example.com -d m.example.com
```

If your website has a static directory, you can change `--standalone` to `--webroot` and add the `-w` parameter to apply, similar to this:

```bash
sudo certbot certonly --webroot -w /var/www/example -d example.com -d www.example.com
```

When you use `--standalone` to apply for a certificate, you need to turn off nginx, because certbot will enable port 443 to verify your domain name information. If nginx is not turned off, the port will be occupied, so we turn off nginx. I am using ubuntu here. So use this command to shut down nginx:

```bash
sudo services nginx stop
```

## Configure certificate

After the certificate application is completed, the certificate will exist in the `/etc/letsencrypt/live/` directory. Let's check that there are no problems and then open the nginx configuration file to modify the certificate loading path:

```bash
cd /etc/nginx/site-enabled/
```

Edit configuration file

```bash
sudo vim example.com.conf
```

With such content,

```nginx
server {
        server_name example.com www.example.com;
        listen 443;
        ssl on;
        ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

        location / {
           proxy_pass http://127.0.0.1:3999;
           proxy_http_version 1.1;
           proxy_set_header X_FORWARDED_PROTO https;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_set_header Host $host;
        }
    }
```

After saving and exiting, use the nginx test command to check whether it work correctly:

```bash
sudo nginx -t
```

If there is no problem, reload it

```bash
sudo service nginx reload
```

Start the nginx

```bash
sudo service nginx start
```

After the startup is successful, you can enter the URL to visit and check whether the certificate activation is successful: `https://example.com` If the certificate is displayed normally, it means success.

## Update certificate

Because the Let's Encrypt certificate is only valid for 90 days, when it expires, we need to refresh the validity period of the certificate before we can continue to use it. Refresh the certificate validity period. Because we are using the `--standalone` mode to install the nginx certificate, we need to refresh the certificate. Sometimes you still need to shut down nginx. Use this command to shut down nginx:

```bash
sudo service nginx stop
```

Then run this command to refresh:

```bash
certbot renew --dry-run
```

Or we can use the system's timer and refresh it when the time is about to end. Let's Encrypt certificate officials say that the certificate expiration time must be less than one month before it can be refreshed. We can configure the refresh time _every_ more than two months That's it. Here we write a cron plan to perform the update operation at 2:15 am every two months.

```bash
15 2 * */2 * root certbot renew --pre-hook "service nginx stop" --post-hook "service nginx start"
```

Then the execution of this command requires the permissions of the root user. We log in as the root user:

```bash
sudo su
```

Then create a file, call it cronfile, and then write this timing plan:

```bash
touch cronfile
```

```bash
echo '15 2 * */2 * root certbot renew --pre-hook "service nginx stop" --post-hook "service nginx start"' > ./cronfile
```

After finishing, run the plan:

```bash
crontab -u root ./cronfile
```

After successful execution, use `-l` to view the plan:

```bash
crontab -l
```

## Finish

Our certificate application ends here, 👏

> This article is reprinted from the blog of [The Universe in the Shell](https://kuokuo.io/2019/08/05/get-lets-encrypt-cert/)


Let's Encrypt makes HTTPS available to everyone for free. In this article, we will introduce how to use the Certbot application tool to configure an SSL certificate for HTTPS of a domain name on a personal server.

Configuring SSL for HTTPS with Certbot + Let's Encrypt + Nginx


## Forward the domain name request to the local port

First, we will introduce the most commonly used ones. When separating front-end and back-end, sometimes we deploy some services locally such as Node.js as API service. On the local port 3300, assuming the host name is example.com, we need to access All HTTP requests on this host are forwarded to the service deployed at localhost:3300. The configuration can be written as follows:

```nginx
server{
  listen 80;
  server_name  api.example.com;
  index  index.php index.html index.htm;

  location / {
    proxy_pass  http://localhost:3300; # 转发规则
    proxy_set_header Host $proxy_host; # 修改转发请求头，让8080端口的应用可以受到真实的请求
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}
```

In this way, when accessing http://api.example.com, it will be forwarded to the local port 3300.

## Forward the domain name request to another domain name

Suppose there is an alternate domain name: backup.example.com. When accessing the host backup.example.com, it is directly forwarded to the main domain name example.com. The configuration file can be written as follows:

```nginx
server{
  listen 80;
  server_name  backup.example.com;
  index  index.php index.html index.htm;

  location / {
    proxy_pass  http://example.com;
    proxy_set_header Host $proxy_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}
```

In this way, when you access http://backup.example.com, it will be forwarded to example.com

## Forward a local port to another port or another domain name

Assume that the HTTP service deployed locally needs to be forwarded to port 3300 or other domain names example.com

```nginx
server{
  listen 80;
  server_name localhost; # 公网ip
  index  index.php index.html index.htm;

  location / {
    proxy_pass  http://localhost:3300; # 或 http://example.com
    proxy_set_header Host $proxy_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}
```

In this way, when accessing http://localhost, it will be forwarded to the local port 3300 or http://example.com

## Note: adding / or not adding / at the end of location

When configuring proxy_pass proxy forwarding, if the following url is added with `/`, it indicates the absolute root path; if there is no /, it indicates the relative path.

For example

1. with `/`

```nginx
server_name example.com
location /data/ {
    proxy_pass http://localhost/;
}
```

Accessing http://example.com/data/index.html will be forwarded to http://localhost/index.html

2. without `/`

```nginx
server_name example.com
location /data/ {
    proxy_pass http://localhost;
}
```

Accessing http://example.com/data/index.html will be forwarded to http://localhost/data/index.html


This article gives three examples of Nginx proxy forwarding: forwarding domain name requests to a local port, forwarding domain name requests to another domain name, and forwarding a local port to another port or another domain name.

Some Examples of Nginx Proxy Forwarding


**Because browsers have inherent defects in DOM manipulation**. First of all, we need to know how the browser renders the code into a view after receiving the web page.

Different processes of a browser have different divisions of labor, among which the rendering process is responsible for rendering the page. \*\*
Taking Chromium-based browsers as an example, the workflow is roughly like this:

- Parse HTML and construct **DOM Tree**
- Parsing CSS, constructing **CSSOM**
- Generate the final **Render Tree** from the comprehensive construction of `DOM` and `CSSOM`
- Calculate layout parameters for Render tree\*\*
- The final Render tree, using the browser's rendering engine for **drawing**

It can be known that the process from HTML/CSS to Render Tree has gone through a very complicated process. Among them, the processes that take the longest time are the fourth and fifth steps: calculating layout parameters and drawing. When a DOM is added or removed from the page, the browser needs to start from scratch, construct the Render Tree, recalculate the layout and render the modified DOM tree again, which is a very resource-intensive and computationally intensive task.

The above is one reason, but there is another more important reason is that JavaScript accesses the information of DOM objects in the browser, and it also needs to build a bridge between JS and DOM, which needs to rely on the underlying implementation of the browser, which is also a very costly process. resource process. On the other hand, the resources of the main process are limited, and the JavaScript interpretation thread and rendering thread are mutually blocked. Manipulating the DOM requires JavaScript. Therefore, when JavaScript is executed, the view update will be blocked, and the rendering effect will be displayed externally, which will reduce the user experience.

Therefore, in order to reduce the adverse impact of manipulating the DOM on performance, there are two ideas:

- Reduce the number of visits to the DOM.
- Reduce the number of times to create and delete DOM objects, and reuse the existing DOM as much as possible.

For the first idea, the overhead of js accessing the DOM in the browser is very high, so you can **use virtual DOM** to solve this problem. Virtual DOM is a structure of simulated DOM that JS self-maintains. It stores the abstract information of real DOM, which can save the overhead of accessing real DOM. Changing the access to real DOM to virtual DOM, and changing the operation of real DOM to virtual DOM can reduce a lot of overhead.

For the second case, use the Diff algorithm to compare the information before and after the update on the virtual DOM. The Diff algorithm is essentially a tree traversal to find out the changed tree nodes. Therefore, after a bunch of operations on the virtual DOM, and then comparing the differences between the two trees before and after the operation, the original nodes can also be reused to a large extent to reduce overhead.

Take the Todo List as an example, use the `<li>` tag to store the item content. Now if you want to delete an item and add another item, then in the native method it is:

- Get the corresponding `<li>` element
- Remove the `<li>` element
- New `<li>` element
- Fill data and insert into current DOM tree, trigger Relayout and Repaint

But with Diff + Virtual DOM, it is:

- Store all `<li>` in a JS object in advance to construct a virtual DOM
- Remove `<li>` in virtual DOM
- Add `<li>` in the virtual DOM to get a new virtual DOM
- Using the Diff algorithm to compare the two new and old virtual DOMs, it is found that the number of DOMs has not changed, and the existing DOM objects can be reused, and there is no need to delete or create DOMs, just change the data.

Now front-end frameworks such as React\Vue use the Diff algorithm and virtual DOM to reduce the unnecessary performance overhead of operating and accessing DOM, roughly following the above ideas, and making up for the performance defects of front-end DOM operations.


Because browsers have inherent defects in DOM manipulation. First of all, we need to know how the browser renders the code into a view after receiving the web page.

Why Are Node Operations Rarely Used in Frontend?


### **What is IPC?**

> Inter-Process Communication (IPC) refers to some technologies or methods for transmitting information or signals between at least two processes or threads.

The above description comes from WIKI, which means that the method of transmitting information between Main Process and BrowserWindow is IPC.

### **How does IPC work in Electron?**

Electron provides IpcRenderer and IpcMain to facilitate engineers to perform IPC

- Screen side (BrowserWindow) uses IpcRenderer
- The main process side (Main Process) uses IpcMain

### **How to write the code in practice ?**

Shown below are 3 modes of communication

- Someone else will pick you up

IpcMain.on monitors messages from IpcRenderer.send
Then use `event.reply` to return
For example: after you bring the kitten home, you ask the mother to help take care of your kitten and let her help feed it.

![](https://picx.zhimg.com/v2-a234ef76d5c002bb4601dc9113198aaf_720w.jpg?source=d16d100b)

```js
// main.js In main process
const { ipcMain } = require("electron");
ipcMain.on("take-cat-home-message", (event, arg) => {
  console.log(arg); // prints "Bring cub cat to home"
  event.reply("need-clean-reply", "The cub cat is hungry");
});

// preload.js - In renderer process
const { ipcRenderer } = require("electron");
ipcRenderer.on("need-clean-reply", (event, arg) => {
  console.log(arg); // prints "The cub cat is hungry"
});
ipcRenderer.send("take-cat-home-message", "Bring cub cat to home");
```

- Wait for response
  You have been staring at the kitten because you are afraid that she will be hungry, but you have not done anything in the meantime.

![](https://picx.zhimg.com/v2-f9a1f74240929244763eb48a109a54e5_720w.jpg?source=d16d100b)

```js
// main.js - In main process
const { ipcMain } = require("electron");
ipcMain.on("take-cat-home-message", (event, arg) => {
  console.log(arg); // prints "Bring cub cat to home"
  // Before the event respond you are paying attention the cub cat
  event.returnValue = "The cub cat is hungry";
});

// preload.js - In renderer process
const { ipcRenderer } = require("electron");
console.log(ipcRenderer.sendSync("take-cat-home-message", "Bring cub cat to home")); // prints "The cub cat is hungry"
```

- Notification response
  When you clean the house, The cub cat is hungry and will "meow"

![](https://picx.zhimg.com/v2-fc0a4a0cf5b918aa365e57f9e3e123fc_720w.jpg?source=d16d100b)

```js
// main.js - In main process
const { ipcMain } = require("electron");
ipcMain.handle("take-cat-home-handle", async (event, arg) => {
  console.log(arg); // prints "Bring cub cat to home"
  return "The cub cat is hungry, meow";
});

// preload.js - In renderer process。
const { ipcRenderer } = require("electron");
ipcRenderer
  .invoke("take-cat-home-handle", "Bring cub cat to home")
  // Then you can do other things before returning, such as cleaning your home.
  .then((msg) => console.log(msg)); // prints "The cub cat is hungry, meow"
```

The above three methods all start from the renderer process side. What should I do if I want to trigger the message from the main process?

![](https://pic1.zhimg.com/v2-d3cddd53f2c3f55b20d574fa0734e922_720w.jpg?source=d16d100b)

```js
// main.js - In main process
mainWindow.webContents.send("switch-cat", number);

// preload.js - In renderer process
const { ipcRenderer } = require("electron");
ipcRenderer.on("switch-cat", (event, args) => switchCat(args));
```

## **References**

- [Official Documentation ipc-main](https://www.electronjs.org/docs/api/ipc-main)


IPC, Inter-Process Communication, I's said that some technologies or methods for transmitting information or signals between at least two processes or threads. The above description comes from WIKI, which means that the method of transmitting information between Main Process and BrowserWindow is IPC.

Electron: Some IPC Ways


Two methods of multiprocessor scheduling

The first is **asymmetric multiprocessing (AMP).** The method is to have one processor handle the code for system activities (IO, scheduling decisions, etc.) in a processor cluster, and this processor becomes the main processor. Other processors execute user program code. This method is relatively simple, and because the main processor is only dedicated to processing system code, it can alleviate the need for data sharing.

The second type is **Symmetric multiprocessing (SMP).** It requires each processor to have self-scheduling function. And for the situation of ready queue and process execution, this method has two different implementation methods under subdivision.

First, each processor has a private ready queue for a process.

The second is to establish a common ready queue for all processes.

The above two approaches must ensure a premise, that is, you must be very careful when scheduling, implement a precise scheduling algorithm, check the ready queue, pop up a process and execute it before executing the process for each processor. If multiple processors want to access a common data area, it must be ensured that the process will not disappear from the queue. There will also be no situation where two processors execute the same process. Otherwise, processes may be missing or executed repeatedly, resulting in unpredictable errors.

Now operating systems, such as Linux, Windows, Mac OS, etc., all use the SMP method.

## Processor affinity

For operating systems that use the SMP method, processor affinity must be added to ensure the efficiency of the processor processing process. Because when a process is executed in the processor, a cache is usually established in the processor to use the data in the processor multiple times to reduce duplication of work and improve efficiency. But when the process migrates between different processors, To disable the cache in the original processor, rebuild the cache in the new processor. However, the cost and expense of doing so will increase dramatically, causing work efficiency to decrease. Therefore, the operating system should try its best to ensure that the process is only executed in one processor and avoid multiple migrations to different processors. This measure is called processor affinity. Simply put, make a process affinity to a processor.

However, there are two mandatory executions of affinity. One is **soft affinity**. The operating system tries its best to make the process be processed in one processor, but it cannot guarantee whether it will be migrated. The other is **hard affinity**, which forces a process to be processed only in one processor and does not allow migration between different processors. For example, the Linux system implements a hard affinity policy.

## Load balancing

For systems that use the SMP method, in a processor cluster, if the processors are unevenly idle, some processes can be extracted from the busy processors to idle processors to achieve overall work idleness. Busy balancing improves processor resource utilization. This is the load balancing strategy.

In the above, according to the allocation of ready queues, there are two methods of establishing a public ready queue and establishing a private ready queue for each processor. **Load balancing is usually not necessary if there is a public ready queue.** Because a process can be pulled from the public queue and allocated to an idle processor at any time. However, in most modern operating systems, private ready queues are established for different processors. It is necessary to use load balancing, regularly check the load of each processor, and migrate processes on overloaded processors to unloaded processors. middle. The migration of a process from an overloaded processor to an idle processor is called **push migration**. Pulling an idle processor from an overloaded processor into a process is called pull migration.

In fact, load balancing will eliminate the advantages brought by processor affinity due to process migration. Therefore, processor affinity and load balancing have certain opposing effects. This requires designing a better scheduling algorithm.

## Symmetric multithreading

Symmetric multi-threading technology is also known as **Hyper-Threading Technology (SMT)**. This is implemented in the hardware technology of the processor and does not belong to the operating system technology. The main idea is to logically divide a real physical processor into several logical processors, so that a physical processor is divided into functionally logically multiple processors, and each logical processor is responsible for its own process work. If the operating system can use divided logical processors to run processes, it can design specific scheduling algorithms to fully utilize processor resources and achieve greater performance.


An introduction to two methods of multiprocessor scheduling is given: symmetric multiprocessing and asymmetric multiprocessing.

Operating System Notes: Two Methods of Multiprocessor Scheduling


### Assignment and Substitution

```bash
a=375
hello=$a
```

### Variables

1. Built-in Variables  
   For example `$HOME $PWD ...`, for more info, see [environ(7)](https://man7.org/linux/man-pages/man7/environ.7.html)
2. Positional Parameters  
   **echo** $para1 $para2 $para3 $para4 $0 $1 $2 $3 $4 $@
3. Special Parameters  
   $? # exit status of a command, function, or the script itself

### Branches

```bash
if [ condition1 ];then
    command_series1
elif [ condition2 ];then
    command_series2
else
    default_command_series3
fi
```

### Loops

### range for

```bash
for arg in `seq 10`; do
  echo $arg
done
```

### for in C-like syntax

```bash
LIMIT=10
for ((a=1; a<=LIMIT; a++)); do
  echo "$a "
done
```

### **while**

```bash
LIMIT=10
a=1
while ((a<=LIMIT)); do
    echo "$a "
    ((a += 1))
done
```

### IO

```bash
command < input-file > output-file    # rewrite
command >> output-file             # appending
```

### Function

```bash
# define a function
function fun_name(){
    command...
}
## or
fun_name(){ # arg1 arg2 arg3
    command...
}


# apply a function
fun_name $arg1 $arg2 $arg3


# dereference
fun_name(){ # arg1
    eval "$1=hello"
}
fun_name arg1
## the above code block is equivalent to
arg1=hello
```

### Debugging

1. take good use of sh(1)  
   for example:  
   sh -n script: checks for syntax  
   sh -v script: echo each command before executing it  
   sh -x script: echo the result of each command in an abbreviated manner
2. use echo
3. use trap

### Parallel

use GNU parallel

### Script with Style

1. Comment your code
2. Avoid using magic number
3. Use exit codes in a systematic and meaningful way
4. Use standardized parameter flags for script invocation


Some basic bash-script code example. It might be help if writing some temporary work-scripts.

Some Basic Bash-Script Code Block


_This post was [transported from zhihu answer](https://www.zhihu.com/question/528539234/answer/2444609012)._

_And origin question is:_

> In js, when a function is executed, it will be destroyed, and correspondingly, the scope of this function will also be destroyed. The form of closure is to return the function in the function, then use a variable in the global to accept the returned function, because the global variable will not be destroyed, and this variable holds the address of the returned function, so we can use this return function, because as long as there are variables or other things used inside the function, then this function will not be destroyed. So when we use the returned function in the global scope, then the main function will not be destroyed, the scope naturally exists, we can naturally use the variables in the function, and can save the state. I don't know if I understand it this way, right?

---

## Here is origin answer

> The form of closure is to return the function in the function, then use a variable in the global to accept the returned function, because the global variable will not be destroyed, and this variable holds the address of the returned function, so we can use this return function, because as long as there are variables or other things used inside the function, then this function will not be destroyed. So when we use the returned function in the global scope, then the main function will not be destroyed, the scope naturally exists, we can naturally use the variables in the function, and can save the state.

What you said is a so long paragraph, so let me first try to break down your understanding, and then analyze it slowly.

You say

> The form of closure is the return function in the function

That is wrong. JavaScript was originally designed with functional programming in mind, where functions are first-class citizens in the language. This means that functions can be stored in variables like any other type, passed as arguments to other functions, or returned as function execution values. **The function returns a function, which is determined by the language paradigm. Nothing to do with closures.**

**So to understand what the form of closure is, we must start with the definition. Its definition is given directly below,**

> A closure occurs when a function is executed outside of the lexical scope in which it was defined and can also remember and access the lexical scope in which it was defined.

According to the above definition, we can know the two characteristics of the closure,

- First, it executes outside the lexical scope in which it was defined.

- Second, it also has access to the lexical scope where it was defined.

It's a bit of a mouthful to say so, so let's give an example to illustrate.

first example,

```javascript
function fpp() {
  var a = 2;
  function bar() {
    console.log(a);
  }
  return bar;
}

var baz = foo(); // Hey, this is the effect of closure
```

The lexical scope of the `bar` function is within the `foo` function. But if the bar function is called directly outside the `foo` function, the compiler cannot find the definition of `bar` outside the `foo`, and therefore does not recognize `bar`, and will throw an error, indicating that `bar` is undefined. So if you want to execute the `bar` function outside the `foo` function, you can use `bar` itself as a return value, let the `baz` variable outside `foo` receive the `bar` function, and then execute it. In this way, the compiler can know that `bar` is stored in `baz` after `foo` is generated, so that the identity of `bar` is clear: it is a function. It can be executed outside of `foo`.

But according to the language setting of JavaScript, when a function is executed, it can access the lexical scope where it is located. For example, functions in the global scope can access global variables. Similarly, when the `bar` function is declared, it can access the scope where it is located, that is, within the `foo` function. And the scope in the `foo` function has a variable `a`, then this a variable can be directly accessed by the `bar` function during execution.

**But isn't this about functions returning functions? Then look at the second example**

```javascript
function foo() {
  var a = 2;
  function baz() {
    console.log(a);
  }
  bar(baz);
}

function bar(fn) {
  fn();
}
```

The `bar` function is declared outside of `foo`, `baz` is defined inside of `foo`, and the `foo` function can access `bar`. Now pass `baz` to the `bar` function, and `bar` will execute it after receiving it. At this time, `baz` is transferred to the scope execution in `bar` by passing, and can access a in the original scope, which is a closure. And it doesn't involve the problem of function returning function.

You see, in the first example above, the **`bar` function is executed after being stored in the `baz` variable outside the lexical scope, and can still access the variable a in the lexical scope, which creates a closure.**In the second example, **`baz` is passed to `bar` through parameters, so that it is executed outside the scope and can access a within the scope. This is also the most essential feature of closures.**

You say

> Because the global variable will not be destroyed, and this variable holds the address of the returned function, so we can use this returned function, because as long as there are variables or other things used inside the function, then this function will not be used destroy.

You are right in saying that global variables are not destroyed. But I don't understand what you want to say, maybe you want to say, as long as the reference of a function is not destroyed, then this function will not be destroyed? **However, in any case, whether the global variable will be destroyed or not has nothing to do with whether the closure will be destroyed...**

In the first example above, `baz` is defined globally. Stored is a reference to bar. `baz` will not be destroyed because it is defined globally, and it does not matter that `bar` and `foo` will not be destroyed.

So back to the second example

```javascript
function foo() {
  var a = 2;
  function baz() {
    console.log(a);
  }
  bar(baz);
}

function bar(fn) {
  fn();
}
```

The `bar` function is declared outside of `foo`, baz is defined inside of `foo`, and the `foo` function can access `bar`. Now pass `baz` to the `bar` function, and `bar` will execute it after receiving it. At this time, `baz` is transferred to the scope execution in `bar` by passing, and can access a in the original scope, which is a closure. **Here, `baz` is executed in the scope of `bar`, not globally, and there is no reference to `baz` in the global. But this is a closure, so `baz` won't be destroyed either.**

The closure will not be destroyed, it is determined by the JavaScript interpreter. **When the interpreter detects that a closure is generated during execution, the lexical scope where the closure is located will be circled by the interpreter and will never be destroyed. It's not because the closure is referenced globally and will not be destroyed, so the closure will not be destroyed either.** It has nothing to do with the global scope.

Understanding closures is a painstaking process. There are many pitfalls in this regard. The terminology of computer programming is more abstract. Therefore, it is recommended that when you come into contact with a concept, it is best to start with the definition and then contact specific examples, rather than start directly with the examples. \*\*Your sentence "the function returns a function" is most likely influenced by some tutorials on the Internet after directly throwing out examples.

Hope my answer is helpful to you.


Give the definition of closure in JavaScript and understand it by examples.

Closure in JavaScript


**I have a suggestion: When you are entangled in whether to use a certain technology, first check what level the technology solves and what problems, and then examine whether you need to solve such problems. Can save unnecessary entanglement.**

So what problem does WebSocket solve? The session management in the traditional HTTP protocol is not perfect. The client must actively initiate a Request request before the server can deliver messages to the client.

If the client submits a time-consuming task to the server, how does the server send a message to the client after it is done? In other words, in some scenarios, the server must ensure that the client is online. The solution is AJAX polling or alive detection. The client sets a timer, and every once in a while the client will initiate an AJAX request to the server, asking whether the server has completed the task, or actively telling the server "I am still online", so as to obtain the data returned by the server in time.

AJAX polling is still useful if there are fewer clients and the server performance is strong enough, but if there are more clients, what if the server has to accept requests from tens of thousands of clients? Not to mention taking up bandwidth, can the server withstand these pressures? If the real-time requirements are high, it means that resources are updated frequently and the amount of data transmitted is large, such as games and web conferences, and the method of conveying messages through AJAX polling cannot be used.

**WebSocket solves the two problems mentioned above: it makes up for the defect that the server cannot actively contact the client, and jointly solves the pressure brought by the traditional one-way communication on the server. Another is to solve the problem of real-time communication**

The client and the server only need to complete a handshake, and a persistent connection can be created directly between the two, and two-way data transmission can be performed. In this way, even if there is no explicit request from the client, the server can send information to the client, realizing reverse communication.

Although WebSocket also has a certain performance consumption, it is still very cost-effective compared to the consumption of large-scale AJAX polling.

If your business scenario needs to solve the above two problems, then it is recommended to use it, otherwise it is unnecessary, depending on your understanding of the business.


Should Put All Requests in a Websocket Connection?


## React.memo

React.memo is a **component level** cache API in React, which can temporarily store rendered components, and when necessary, decide whether to update the rendering or obtain it directly from the cache to avoid unnecessary component rendering.

And its' usage:

```javascript
const MyMemoedComponent = React.memo(
  function MyComponent(props) {
    /* render with props */
  },
  function compare(prevProps, currentProps) {
    /* logics for comparing the prevProps and nextProps */
  },
);
```

It returns a Memorized function component.

When used, it accepts two parameters: the first is the target component, which is the definition of the component that needs to be optimized.
The second is the comparison function `compare`, which receives the currentProps passed in for each round of rendering and the prevProps passed in for the last rendering.

However, due to the immutable feature in the React function component, the component will be rendered according to its Props. However, when the same or equivalent Props are used multiple times during rendering, performance will be wasted.

Users can write their own logic to determine whether the two incoming props are logically equivalent. The `compare` function is expected to return a boolean value. If it returns `true`, it means that the props passed in twice are equivalent. Then during the current round of rendering, the last component will be directly taken out of the cache without re-rendering the component.

For example, when it is necessary to render a personal resume information, if the personal information on the resume remains unchanged, then there is no need to re-render. Can be used like this:

```javascript
const MyMemoedProfile = React.memo(
  function Profile({ name, sex, age, job }) {
    return (
      <div>
        <h2>{`Your Name: ${name}`}</h2>
        <ul>
          <li>{`sex: ${sex}`}</li>
          <li>{`age: ${age}`}</li>
          <li>{`job: ${job}`}</li>
        </ul>
      </div>
    );
  },
  function compare(prevProps, currentProps) {
    return (
      prevProps.name === currentProps.name &&
      prevProps.sex === currentProps.sex &&
      prevProps.age === currentProps.age &&
      prevProps.job === currentProps.job
    );
  },
);
```

## useMemo

The `React.memo` mentioned above is the optimization of the component level, **then useMemo is the optimization of the internal calculation logic of the component.**

JavaScript is not suitable for intensive calculations. But if we have calculation-intensive logic inside the component, every time the component is rendered, the calculation must be done again, which is also unacceptable for performance. Therefore, useMemo can temporarily store the intensive calculation results of each time, and then decide whether to repeat the calculation according to the judgment.

The specific usage is as follows:

```javascript
const memoizedValue = useMemo(() => doSomeComputeExpensiveWork(a, b, ...), [a, b, ...]);
```

Unlike React.memo, its first parameter is a function that returns a computationally intensive function. It accepts dependencies instead of comparison functions as its second argument. Dependencies will be compared (shallow comparison here) every time a value is fetched. If the dependencies are the same, the last rendering result will be reused instead of recalculated. If the dependencies are different, call the computationally intensive function returned by the first argument.

For example, we want to design a component that displays the Fibonacci sequence: input the number of items `n`, and return the Fibonacci number of the `n`th item.

```javascript
function FibonacciNumber({ n }) {
  const target_value = useMemo(
    () =>
      function calc(n) {
        let arr = [];
        if (n < 1) return arr;
        let one = 1,
          two = 0,
          three = 0;
        for (let i = 1; i <= n; i++) {
          three = one + two;
          arr.push(three);
          one = two;
          two = three;
        }
        return arr;
      },
    [n],
  );
  return <div>{`The ${n} th's fibonacci number is : ${target_value}`}</div>;
}
```

In this way, no matter how many rounds the component renders, as long as the dependency `n` remains unchanged, the previously calculated Fibonacci numbers will be obtained from the cache instead of recalculated. If a new `n` is obtained, the `calc` function returned by the first parameter will be used again to calculate the new value with `n` as the parameter.

If the dependency is empty, the data is always fetched from the cache.

## useCallback

useMemo has a problem: the function in the first argument must return a computationally intensive function. If the first parameter is directly set to a calculation-intensive function, it will be simplified a lot, as long as the calculation-intensive function does not need to be changed.

useCallback can be regarded as the equivalent grammatical sugar of useMemo, and there is the following conversion relationship between them:

`useCallback(fn, deps)` is equivalent to `useMemo(() => fn, deps)`.

Like useMemo, if the dependency is empty, the data is always fetched from the cache.

## useEvent

Try the following code:

```javascript
const MyComponent = () => {
  const [counter, setCounter] = useState(0);

  const handleClick = () => {
    console.log(counter);
    setCounter((counter) => counter + 1);
  };

  return <div onClick={handleClick}>click to add counter counter: {counter}</div>;
};
```

There seems to be no problem with this component, but if you think about it carefully, a new `handlerClick` event function will be recreated every time it is rendered and then passed to the button. So if the component is rendered many times, the handlers established in history will accumulate more and more.

In order to solve this problem, we put a layer of useCallback to cache the event forever, and always get data from the cache in each round of rendering:

```javascript
const MyComponent = () => {
  const [counter, setCounter] = useState(0);

  const handleClick = useCallback(() => {
    console.log(counter);
    setCounter((counter) => counter + 1);
  }, []);

  return <div onClick={handleClick}>click to add counter counter: {counter}</div>;
};
```

But this triggers React's closure trap. The `counter` in the function in the first parameter is always the value when the component is first created, that is `0`.

So useEvent solves the problem:

```javascript
const MyComponent = () => {
  const [counter, setCounter] = useState(0);

  const handleClick = useEvent(() => {
    console.log(counter);
    setCounter((counter) => counter + 1);
  });

  return <div onClick={handleClick}>click to add counter counter: {counter}</div>;
};
```

But it is still an experimental feature today and not recommended for production use.


NOTE & BLOG

ALL POSTS

Configuration Boilerplate for SPA with Nginx

Configuring SSL for HTTPS with Certbot + Let's Encrypt + Nginx

Some Examples of Nginx Proxy Forwarding

Why Are Node Operations Rarely Used in Frontend?

Electron: Some IPC Ways

Operating System Notes: Two Methods of Multiprocessor Scheduling

Some Basic Bash-Script Code Block

Closure in JavaScript

Should Put All Requests in a Websocket Connection?

Optimization Scheme for React Component Rendering

NOTE & BLOG

ALL POSTS

TAG FILTER

Configuration Boilerplate for SPA with Nginx

Configuring SSL for HTTPS with Certbot + Let's Encrypt + Nginx

Some Examples of Nginx Proxy Forwarding

Why Are Node Operations Rarely Used in Frontend?

Electron: Some IPC Ways

Operating System Notes: Two Methods of Multiprocessor Scheduling

Some Basic Bash-Script Code Block

Closure in JavaScript

Should Put All Requests in a Websocket Connection?

Optimization Scheme for React Component Rendering