Js context -> this

This points to the question

1.1 When a function is called by new as a constructor, this refers to the generated instance

function Animal(name, color) {
    this.name = name
    this.color = color
}
const cat = new Animal('black'.'black')
console.log(cat.name)
Copy the code

When the function is called directly, this refers to the window object, or in strict mode this refers to undefined

function Animal(name, color) {
    this.name = name
    this.color = color
}
Animal('meow meow'.'white')
console.log(window.name)  / / meow meow
Copy the code

1.3 When a function is called, it is referred to as an object’s method this (whoever called it).

/ / a
let obj = {
   x: 10.fn: function(){
       console.log(this.x)
   }
}
let a = obj.fn
a() // undefined
obj.fn() / / 10
/ / two cases
let obj = {
    x: 10.fn: function(){
        return function(){
            console.log(this.x)
        }
    }
}
obj.fn()() // undefined
Copy the code

Implement a call method

// Call will change this point and can pass multiple arguments to execute immediately
function Person(name, age) {
    this.name = name
    this.age = age
}
Function.prototype.mCall = function(context, ... args){
   console.log(this === Person) // true
   // Resolve variable names that may duplicate
   let mySymbol = Symbol()
   context[mySymbol] = this
   // Resolve the issue of calling multiple parameterscontext[mySymbol](... args) }let chinese = {}
Person.mCall(chinese, 'phil'.26)
Copy the code

Implement an Apply method

// Apply will change this as well. Unlike call, the apply argument is passed in an array
function Person(name, age) {
    this.name = name
    this.age = age
}
Function.prototype.mApply = function(context, args){
   console.log(this === Person) // true
   // Resolve variable names that may duplicate
   let mySymbol = Symbol()
   context[mySymbol] = this
   // Resolve the issue of calling multiple parameterscontext[mySymbol](... args) }let chinese = {}
Person.mApply(chinese, ['phil'.26])
Copy the code

Implement a bind method

Usage: bind does not call the function immediately, only binds this, and returns a new function that has the same logic as the original function, but that binds the previously bound object

function Person(name, age) {
    this.name = name
    this.age = age
}
Function.prototype.mBind = function(context, ... arg1){
    let originFn = this
    return function fBind(){ originFn.call(context, ... arg1, ... arguments) } }let chinese = {}
let p = Person.mBind(chinese, 'phil'.25)
p(26)
Copy the code

Browser Principles

Browser architecture

1) The User Interface includes the address bar, forward/back, menus, etc. 2) the Browser Engine transfers instructions between the User Interface and the Rendering engine. 3) the Rendering engine displays the requested content. If the requested content is HTML, it parses the HTML and CSS content and renders it to the screen. 4) Networking debugging 5) UI Backend 6) JavaScript interpreters to interpret and execute JavaScript code V8 7) Data Persistence such as cookie or localStorageCopy the code

Browsers are multi-process

1) Browser process: the main process of the Browser, responsible for coordination, control, only one. 2) GPU process: at most one for 3D rendering 3) Render process: The render process is multi-threaded internally! When the asynchronous HTTP request thread detects a change in the state of the XHR object, it puts a callback function in the event loop.Copy the code

The rendering process is multi-threaded

Here important: render thread and JS engine thread mutually exclusive! Since JavaScript manipulates the DOM, if the interface is rendered at the same time as these element attributes are modified, the rendering thread and the data elements obtained before and after may be inconsistent. 1) THE GUI rendering thread is responsible for the browser interface, parsing HTML, CSS, building DOM tree and Render tree. When the interface needs to be redrawn or some operation causes reflux, the change thread will execute. Such as V8), the JS engine will wait for the data in the task queue and then process it. Only one JS thread will be running in a TAB. Because the JS engine and the GUI rendering engine are mutually exclusive, so if the JS execution takes too long, the page rendering will block. 3) Event-triggering thread manages the event queue. 4) The timer thread setInterval or setTimeout will put the callback function into the task queue after it finishes in time in this thread.Copy the code

Browser reflow and Repaint

Reorder: When a page layout is recalculated, a node reflow recalculates the size and position of the node, and may trigger a reorder of child nodes or ancestor nodes. Redraw: Iterates through all the nodes to detect the visibility, color, outline, and other visible style attributes of each node, and then checks the page according to the visible style attributes. Simply put, a change in color, background, or border will cause a redraw. For example: color, visibility, text-decoration and so onCopy the code

Performance optimization Principles

1) Minimize HTTP requests 2) Use content delivery network CDN 3) Avoid empty SRC or href values: This will cause unexpected traffic burden on the server and waste computing resources on the server 4) AJAX optimization: Post requests cannot be cached on the client side. Each request needs to be sent to the server for processing and will return a status code of 200 each time. Get requests are cached on the client side by default. 5) Use cache wisely 6) Use switch instead of if when making multi-branch decisions... else... Switch will only match once, whereas if... else... They compare each other. Here amway two optimization tools: JsPref, pageSpeedCopy the code

The flow from the input URL to the page display?

// DNS domain name resolution --> establish TCP connection --> initiate HTTP request --> receive response result --> browser parse HTML --> browser layout rendering
Copy the code

Principle of DNS

DNS: a server that returns the IP address of a host corresponding to a domain name eg: www.shboka.com. 1.1 Root DNS(.) The last '.' is only responsible for providing the IP addresses of top-level DNS servers, and is the entry point for domain name resolution. There are only 13 root DNS servers in the world, one primary root DNS server, and the other 12 secondary root DNS servers. In the 1.2 Top-level DNS example, COM is the top-level domain name. The IP address of the DNS server that provides the secondary domain name. Each top-level domain name has its own DNS server, which is usually maintained by a specialized organization. 1.3 Authoritative DNS Provides the host IP address corresponding to the third-level domain name, which is provided by the domain name buyer and corresponds to the shboka above. The process for obtaining the IP address of the server corresponding to the domain name is as follows: 1) Browser cache: When a user accesses a domain name through the browser, the browser first searches for the IP address corresponding to the domain name in its cache. 2) system Hosts: If the browser does not have the IP address corresponding to the domain name in the cache, the browser automatically checks whether the hosts file on the user's computer has the IP address corresponding to the domain name. 3) Local DNS server: If the user does not find the IP address corresponding to the domain name in the hosts, the user will query the IP address in the local DNS cache. Usually, the DNS of the local domain name is configured to the DNS specified by the ISP. 4) Root DNS server: If no corresponding IP address is found in any of the above behaviors, the local DNS will start the iterative query: Contact the root name servers, get the top-level domain name server IP address Contact the top-level domain name server, to get authoritative domain name server IP address Query to the authority of the domain name server, domain IP 5) save the results to the local cache: local domain name server will return the results to the local cache, for next time use.Copy the code

TCP Three handshakes and four waves

Three-way handshake: The client sends a SYN packet with the packet number set to X. After receiving the packet with the packet number set to X, the server responds to the request by setting the acknowledgement sequence number to X + 1. Then the client receives a link acknowledgement packet and establishes a connection with the server. Q: Why does TCP create a link with a three-way handshake instead of a two-way handshake? This is because when the client established link requests slowly, the service side for a long time before he receives the serial number for x request packet, if only two shake hands, then the server will respond to this message directly, build links directly, will cause the waste of resources (likely the client has given up the request). Four wave: when one party release request, will take the initiative to send release request packet, number of x, the passive side after received, will confirm the order number of x + 1, then this period of time, passive will confirm whether there is any need to send a message, if it does not have to send release request confirmation message, active party received after release request, four times to wave process is completed.Copy the code

Browser render page

3) JavaScript code is processed by JavaScript engine. 4) Internal drawing model is built according to CSS style after DOM Tree is established. 5) Build the render tree according to the web page hierarchy (rearrange) 6) redrawCopy the code
The CSS download process does not block parsing, but js will wait until it has downloaded and executed before continuing parsing. Rearrangement: The process by which the browser has to recalculate the geometric attributes of the elements and reconstruct the render tree. Rearrangement: The process by which the reconstructed render tree is rendered to the screen after the rearrangement has been completed summary: Rearrangement necessarily leads to redrawing, and redrawing does not necessarily lead to rearrangement.Copy the code