Sequential uploading of files

It is essentially performing asynchronous operations sequentially. I’m going to throw up a little problem here, calculating the length of the list recursively. Linked lists are the simplest dynamic data structures and are also very suitable for recursive solutions. Calculating its length should also be a basic skill, so post the code directly here

function calNodeListLength(head) {
    // Determine the critical value first
    if (head===null) {
        return 0
    }
    return 1 + calNodeListLength(head.next)
}
Copy the code

Then follow this idea to think, we have a sequential file upload method: upload N files, wait for a header file upload after the call function to process n-1 files, and then wait for the n-1 file after the header file transfer to process the remaining n-2 files….

// Use the callback function
function uploadFiles(files) {
    // Use pseudocode here
    ajax({
        // The data to be passed
        data: files[0].success: function() {
            // Delete passed files
            files.shift()
            // Process the remaining files
            uploadFiles(files)
        }
    })
}
// Use the promise callback
function uploadFile(files) {
    new Promise(resolve= >{
        ajax({
            data: files[0].success: function() {
                resolve()
            }
        })
    }).then(res= >{
        files.shift()
        uplpadFiles(files)
    })
}
Copy the code

The above method is just down the recursive and appended to the list of ideas, but also has a lot of better way, this example also want to let myself and the person reading this article more attention to data structures and algorithms, study well is the basic data structure and algorithm, and thus to improve the ability of its application to actual project, the knowledge learn forever, More importantly, we should improve our ability to solve problems with what we have learned. This is not to say that new knowledge is not important. For example, the next implementation method is “new knowledge and new syntax”.

;(async () = > {
    try {
        for (let file of files) {
            // uploadFile returns a promise
            await uploadFile(file)
        }
    } catch (e) {
        console.log('嘤嘤嘤')}}) ()Copy the code

What happens between entering the URL and loading the page “HTTP”

The browser first looks up the cache based on the URL

First check if there is a cache. For example, if you type chrome://cache into chrome’s url, you will see the cache file. If you can’t find the file, you will see that there is no cache

If there is a cache, determine whether the cache has expired. In general, there are two fields: Expires in HTTP 1.0, which “indicates an expiration date, but can cause errors because client and server times may be different,” and cache-control in HTTP 1.1. First check whether cache-control exists. If not, expires is compared according to the expires date. If cache-control exists, the maximum expiration time of the cache is set according to the cache-control attribute max-age. Max-age overwrites Expires “or S-maxage” for proxy caching, overwrites Max-age and Expires. “If it hasn’t expired, then client-side caching, also known as” strong caching, “is used.

Problems and solutions of strong cache

The DNS parses the URL to obtain the corresponding IP address

If there is no cache or the cache has expired, the browser sends a DNS request to the local DNS server. The local DNS server checks for cached records first and returns the IP if there is one. If there is no caching, take www.baidu.com as an example. In fact, the actual url of the browser when requesting the DNS server is www.baidu.com. The corresponding is the root server, which is omitted for user convenience because every default request adds a.. So the url parsing process is. -> com. -> baidu.com. -> www.baidu.com. The search starts from the root server. If no search is found, the search will be made to the COM domain name server until the search is found.

Ruan Yifeng introduction to DNS principles

Now the general DNS server optimization will use “load balancing”, citing a word of Ali Cloud

Multiple servers are often used to provide the same service, reducing the access burden on a single server. The way to spread the load on each server and distribute access traffic across multiple servers is load balancing.

Open a socket to connect to the destination IP address

Socket: Two processes need to uniquely identify a process to communicate. The PID is unique in the local system and conflicts occur on the network. Therefore, processes on the network are uniquely identified by IP address, protocol, and port number. The socket consists of these three parts.

Tcp Three-way handshake connection

  • The client sends a SYN to the server port “Hello, can you hear me?”
  • Server sends ACK + SYN to client “Yes, can you hear me?”
  • Client sends ACK to server “Yes”
Sending an HTTP request

The browser sends a request to the server, and the server determines whether the response header contains cached validation information. Using last-Modified, if-Modified-since and ETag, if-none-match, when the browser first requests a resource, The server adds last-mdified or etag to its response header. When the browser requests the resource again, it adds if-modified-since or if-none-match to the request header. If-modified-since is to compare the last modified time of the file. However, it is possible that the file time has been modified and the single file content has not changed. Therefore, eTAG “Content identifier, content modification will change” is used to determine whether the file has changed. If the file does not change, the server returns 304, does not return the resource, and the browser reads the cache after receiving the response.

If it has expired, the server re-reads the sent resource or operates on the database and returns the corresponding information

If the data transfer is complete, the browser closes the TCP connection

TCP four wave disconnections. The initiator can be the client or the server. The browser is used as the initiator

  • The browser sends a FIN message to the server.
  • The server sends an ACK to the client saying, “Got it, but I need to process it on my side. Wait for my message.”
  • The server sends the FIN to the client “OK, I have finished sending the data and I am ready to close it”.
  • The client sends an ACK to the server saying “OK, break”. After sending the ACK, the client waits. If the server does not reply, the server is shut down and the client is shut down
Processing response data

First, the browser checks the response status code, caches if the resource is cacheable, and then processes it accordingly based on the resource type

Assuming the resource is HTML, work on the HTML resource

Browser parsing and rendering processes can be carried out simultaneously. The browser parses HTML documents to build a DOM tree, parses CSS resources to build a COM tree, and starts downloading images, style sheets, JS files, etc. The DOM and COM trees are then used to construct the rendering tree, which is then laid out and rendered to the screen.

When attributes such as the size and position of the box model are determined, the browser calculates the size and position of the box model. This is called “redrawing” when attributes such as the appearance and style of the box model are determined that do not affect the layout.

Display the page

Bidirectional binding for VUE 2.0

Train of thought

It can be broken down into three steps

  • Input fields and text nodes bind to data in data
  • When the content of the input box changes, the data in data changes synchronously. This step implements view => model
  • When the data in data changes, the content of the text node changes synchronously, realizing model => VIEW
Data binding

Hijacking all child nodes of the mounted target through the documentFragment, and then inserting the mounted target as a whole after unified processing

The DOM object “hijacked” is traversed, and the elements with v-Model attribute names and text wrapped by {} are extracted and assigned to the data object of the Vue “instance object”

V => M

If the V-Model property is on the input box, its change method is called to update data in real time, Values created in the data object of the “Instance Object” are overwritten with defineProperty for their SET and GET, in which set only needs to update the value of the property.

M => V

In the subscription publishing mode “Observer mode”, the publisher publishes notifications => Subject object “includes all subscribers” receives notifications and pushes them to subscribers => subscribers perform corresponding operations

Therefore, for every property created in data, the subject object DEP is also created, and when processing hijacked HTML, Each time the binding to a property in data adds a subscriber watcher to the corresponding DEP object, which needs to define a global target property through deP to temporarily store the new watcher, and then remove it. Watcher fires the instance object’s get method to store dep.target in it

Scope principles and closures

Diagram scopes and closures

In fact, I believe that you have seen large and small interview atlas and interview questions have been many times, but from my personal point of view, I only look and back is difficult to remember and remember, often last week memory of knowledge this week said incoherent, can only find other people’s interview atlas to go back, and then to understand.

Therefore, I recommend that you write again with your own understanding of the good summary you see, and refer to the relevant technical articles when you encounter ambiguity. By sorting out other people’s excellent summaries and referring to relevant fuzzy knowledge, I can also describe some knowledge points professionally according to my own understanding. Finally, I sorted out my own interview atlas, which on the one hand improved my writing level, and on the other hand made the knowledge not to be on the surface, which was difficult to explain systematically from my own mouth.

Feel good can give a small star~

The original