1. What happens when you enter the URL to the display page

  1. Enter the URL in the browser’s address bar and press Enter.
  2. The browser checks whether the current URL is cached and compares whether the cache is expired.
  3. The DNS resolves the IP address of the URL. First, search the local hosts file. If no search is found, search the DNS server (provided by China Telecom, China Mobile and other service providers).
  4. Establish TCP connections based on IP (three-way handshake).
  5. Sends HTTP Request packets, including Request method URI protocol/version (2) Request Header (3) Request body.
  6. The server processes the request and returns a Response packet. The browser receives the HTTP Response, which contains (1) status line (2) Response Header (3) Response body.
  7. If the server finds that the URL needs to be redirected, it will return a redirected response. This is for SEO, 301 permanent redirection, 302 temporary redirection, if there is a redirection, the browser will request the redirected address.
  8. Close the TCP connection (wave four times)
  9. The browser parses the HTML and renders it to the page;

Mapping between IP addresses and domain names:

  • Multiple domain names can be resolved to the same IP address. The server determines the requested domain name based on the header.
  • A domain name can also correspond to multiple IP addresses, and the DNS service will return different resolution results depending on your location and carrier.

2. HTML parsing

Parse order

  1. Download the HTML first;
  2. Analyze the document structure, specifically a tree structure, which is the hierarchical relationship of each node. If there are resources in the document that do not comply with the security policy (for example, some pages do not allow to load cross-domain resources), it will give a warning. Prioritize all resources;
  3. Start the download thread and download resources according to their priorities. CSS and FONT files are usually loaded first. The maximum number of concurrent downloads for the same domain name is 6. For different domain names, the maximum number of concurrent downloads is set by the browser (10 by default).
  4. Also start the document structure parsing thread. (4 and 3 are carried out at the same time, which counts as two threads) Dom is constructed from top to bottom to generate DOM Tree. According to the depth-first principle, sibling nodes of the current node will be generated only after all child nodes of a node are generated.
  5. Browsers create Rendering trees using DOM Tree and CSS Rule Tree. Calculate the location and size of each element based on the Rendering Tree, a process called reflow. The process of calculating the font size, color, etc., for each element after its position and size are determined is called repaint.

Blocking resources:

  • Inline CSS
  • Inline javascript
  • Externalize normal javascript
  • Outreach defer javascript
  • Javascript tags before the external CSS

Non-blocking resources:

  • External CSS after javascript tags
  • image
  • iframe

If the DOM is not fully parsed after downloading, the external async javascript will execute directly and block. If the DOM has been parsed after the download, it is not blocked. Downloading does not block, running might

Rules for parsing the DOM

  • When a DOM tag is encountered, a DOM build is performed to add the DOM element todom treeIn the.
  • When an inline CSS is encountered, the CSSOM and the preceding CSS are generatedcssomMerged intocss rule tree, the browser resolves CSS selectors according toFrom right to leftThe order of analytic
  • Inline javascript will block subsequent content parsing directly, js execution directly;
  • encounterlinkCheck whether the link resource has been downloaded. If so, build csSOM. The csSOM in front of it is merged into CSS rule tree.
  • encounterscriptBlock parsing of subsequent content and check if the script has been downloaded. If so, execute the code. If the download is not complete, start the thread download, now execute as soon as it is complete.
  • encounterscript deferIf so, continue to build the DOM. If not, start a new thread to download the DOM. After the download is complete, if the DOM tree is not yet constructed, wait until the DOM tree is constructed. Execute immediately if the DOM tree is already built. In the distributedDOMContentLoadedBefore the event
  • encounterscript asyncCheck whether the file has been downloaded. If the file has been downloaded, block subsequent content parsing and execute the file directly. If the download has not been completed, enable the thread download and execute the download immediately. It may be executed before the DOM tree is completed (DOMContentLoaded) or after. But must be inonloadbefore
  • encounter<img>or<video>Tag, does not block the page, if the download is not finished, it enters the queue of the download thread. Img and video are not affectedDOMContentLoadedEvent distribution.
  • Every time a < script > tag is encountered in HTML, the page is re-rendered (the browser will merge the DOM tree and CSS rule tree into the Render Tree) to ensure that the JS code in the tag gets the latest style.

DOMContentLoaded and onload

DOMContentLoaded completes the dom construction of the page and the code execution of synchronous JS. Image resources, asynchronous resources introduced in JS are not necessarily loaded; Onload is triggered after DOMContentLoaded.

3. Front-end cache

  • Back-end cache (database cache, CDN cache, proxy server cache, etc.)
  • Front-end cache, by priorityService Worker,Memory Cache,Disk Cache(also calledhttp chache, divided intoStrong cacheandNegotiate the cache),Push Cache;

Service Worker

  • Is a separate thread running behind the browser. Mainly used to implementOffline caching,Being pushedandNetwork proxy, and other functions,PWA(Progressive Web App) has many applications.

memory cache

  • The memory cache is invalidated after the browser TAB is closed.
  • Two types of resources :(1) resources discovered by the browser preloader, such as css.html.font, will be downloaded first; (2) Explicitly specified preloaded resources<link rel="preload">Is also stored in the memory cache
  • The memory cache mechanism ensures that if there are two requests with the same SRC (e.g., two requests with the same SRC) on a page <img>, both have the same href <link>) are actually requested only once at most to avoid waste. However, when matching the cache, in addition to matching the exact same URL, they will also match their type, domain name rules in CORS, etc. Therefore, a resource cached as a script type cannot be used in an image request, even if their SRC is equal.
  • use no-storeEven the memory cache does not store

Disk Cache (HTTP chache) Cache policy

Strong cache

Cache-ControlSeveral meanings of:

  • Private: Only the browser can cache
  • Public: the browser and proxy server can cache, use more
  • Max-age = XXX expiration time (Important)
  • No-cache Does not cache strongly (critical)
  • No-store does not cache strongly, nor does it negotiate caching

To determine whether the resource hits the strong Cache, look at the cache-control value in response, if max-age= XXX seconds, hit the strong Cache. If the cache-control value is no-cache, or max-age=0 (strong Cache, but expired), the negotiation Cache will not be strong Cache.

Cache-control takes precedence over Expires (used in older versions of HTTP). Expires is a time when the Cache Expires. It has some drawbacks. Request the server to see whether to go through the negotiation cache (the server returns 304) or request new data

Negotiate the cache

  • In the response headersETagandLast-Modified, corresponding to the request headerIf-None-MatchandIf-Modified-Since
  • ETag has a higher priority than Last-Modified, and then last-Modified is evaluated

ETag was designed to solve several difficult last-Modified problems:

  • Some files may change periodically, but their contents do not change (just change the modification time). At this point we do not want the client to think that the file has been modified and GET again;
  • Some files are Modified very frequently, such as If they are Modified less than seconds (say N times in 1s), and if-modified-since the granularity that can be checked is s-level, and such changes cannot be determined (or the UNIX record MTIME is only accurate to seconds).
  • Some servers do not know exactly when a file was last modified.

Cache policy triggered by some operation

  • Enter the address bar, jump to the page link, open a new window, forward or backward operations will strengthen the cache
  • F5 skips the strong cache rule and uses the negotiation cache directly.
  • Ctrl+F5, skip all cache rules and retrieve the resource as on the first request

Vue project more reasonable cache scheme

  1. HTML: Use a negotiated cache.
  2. CSS&JS& Images: use strong caching and file names with hash values.

Push Cache

  • Push Cache is HTTP/2 and is used when all three caches fail. It only exists in a Session, is released once the Session ends, and has a very short cache time, about five minutes in Chrome.

4. Browser storage

Cookie

Cookie format to be sent:

Cookie: name1=value1 [; name2=value2]

  • name: a uniquely identified cookie name. Cookie names are generally case insensitive.
  • value: string value stored in cookie. It is best to urL-encode the name and value of cookies
  • domain: Indicates the domain name for which the cookie is valid. This cookie information is included in all requests sent to the domain. This value may or may not include a subfield (e.g., m.baidu.com) (it is valid for all subfields of Baidu.com, for example).
  • path: indicates the path affected by the cookie. According to this configuration, the browser will send the cookie to the path matching the specified domain.
  • expires: Expiration time, indicating the timestamp of cookie self-deletion. If you do not set this timestamp, the cookie will become a Session Session type cookie, and the browser will delete all cookies when the page closes. This value is in the GMT format. If the client and server time are inconsistent, expires will be a deviation.
  • max-age: Works like expires and tells the browser how long the cookie will expire (in seconds) rather than a fixed point in time. Normally, max-age takes precedence over Expires.
  • HttpOnlyCookie: tells the browser that it is not allowed to change this value through the document.cookie script and that this value is also not visible in document.cookie. But HTTP requests still carry this cookie. Note that although this value is not available in the script, it still exists as a file in the browser installation directory. This setting is usually set on the server side.
  • secure: Security flag. This value is sent to the server only when SSL(HTTPS) links are used. This value is not passed if HTTP links are used. But there are other ways to view cookies locally

The advantages of the Cookie

  1. Cookie key value pair form, simple structure
  2. Expiration times can be configured without requiring any server resources to exist on the client,
  3. Can make up for HTTP protocol stateless part of the deficiency
  4. There is no compatibility problem.

The disadvantage of the Cookie

  1. Each domain can have a maximum of 20 cookies. The length of each cookie cannot exceed 4096 or 8192 bytes; otherwise, the cookie will be truncated.
  2. User configurations may be disabled Some users have disabled the browser or client device’s ability to receive cookies, thus limiting this functionality.
  3. Increase traffic consumption by requiring cookie information for each request.
  4. Security risks, hackers can carry out Cookie interception, XSS cross-site scripting attack and Cookie spoofing. Historically, not a few website users were attacked because of cookies. Although cookies can be encrypted and decrypted, performance will be affected.

localStorage/sessionStorage

  1. Large amount of data, 5MB.
  2. Does not accompany HTTP requests, effectively reducing the size of requests
  3. SessionStorage only works on the current window and cannot read the sessionStorage database information of other Windows across Windows. Each new or closed browser will directly cause the new or destroyed database of the current window.
  4. LocalStorage will persist, regardless of whether the browser and page tabs are closed, unless it is removed manually.

indexedDB

  1. Browser built-in database, andNoSQLLike, withservice workCollocation, realize offline access;
  2. There’s no limit to how much data you can store (as long as you have enough hard drive), and Chrome limits it to 1/3 of the available space on your hard drive.
  3. There can be performance costs when working with large amounts of data.
  4. Compatibility issues, only Internet Explorer 11 supports.

5. HTTP version

HTTP / 1.1

  • Head Of Line Blocking problem
  • TCP connection number limit. A browser can create a maximum of six to eight TCP connections for the same domain name. In order to solve the number limitation, domain name sharding technology emerged, which is actually resource domain division, putting resources in different domain names

HTTP/2

  • HTTP/2 addresses HTTP header blocking, but not TCP header blocking
  • Binary frame division, multiplexing
  • Server push

HTTP/3

  • Google developed the QUIC protocol, which is implemented based on UDP and reduces RTT
  • Solved the queue head congestion problem

The HTTP status code

  • 1XX: indicates that the protocol is in the intermediate state and further requests are required
  • 3xx: 301 permanent redirect, 302 temporary redirect. 304 Negotiated Cache
  • 4xx: 404 The resource was not found

6. How the request is implemented

XMLHttpRequest

  • The lower version of IE is implemented as ActiveXObject
  • JQuery’s $Ajax is a wrapper around XHR and a programming pattern for MVC that doesn’t fit well with the current MVVM programming pattern.
  • Axios is also a wrapper around the native XHR, but it’s a Promise implementation

fetch

  • Written simply, it is a Promise implementation
  • The request cannot be cancelled, and timeout controls implemented using setTimeout and promise.reject do not prevent the request process from continuing in the background.
  • Fetch does not support synchronous requests
  • The FETCH does not carry cookies by default. Configuration items need to be added
  • Fetch has no way of natively monitoring the progress of requests, whereas XHR does

navigator.sendBeacon

  • Can only send POST requests;
  • Page closed, can still continue to send finished;
  • Generally used for, but not limited to, the Unload event of Windows;
  • See elevation for more information
window.addEventListener('unload'.function(){
    navigator.sendBeacon('/post1'.'{foo: "bar"}')})Copy the code

WebSocket

Because HTTP protocol does not allow the server to actively push information to the client. WebSocket can be a two-way session.

  • var s = new WebSocket('ws://www.a.com/s.php')// You must pass in an absolute URL, which can be any website
  • After the connection is successful, the 101 status code is displayed, indicating that the request protocol is switched from HTTP to WebSocket

6.1. Three Content-Types

application/x-www-form-urlencoded

For normal form submission, the key-value pair parameters are concatenated with ampersand, if there are Spaces, converted to + +; With special symbols, convert the special symbols to the ASCII HEX value

JQuery’s Ajax default value is this

When a JSON object is passed in, it usually goes through qs.stringify()

key1=val1&key2=val2&key3=val3
Copy the code

multipart/form-data

Boundary is not used to code parameters. So when you upload a file, what you do is you upload a FormDate object, and the content-Type is going to be this value, and the real thing might look like this

multipart/form-data; boundary=----WebKitFormBoundaryAqr2Zs4BNE8Z8FWR
Copy the code

application/json

Upload data in JSON format, suitable for deeper levels of data, will perform json.stringify.

We sometimes use the qs.stringify() method when using axios. Note the difference between

var a = {name:'hehe'.age:10};
 qs.stringify(a)
// 'name=hehe&age=10'
JSON.stringify(a)
// '{"name":"hehe","age":10}'
Copy the code

Because get requests need to concatenate parameters after links, they can be handled simply with qs.stringify()

XSS and CSRF

XSS

Cross-site Scripting, XSS Scripting

  • Set the cookie httpOnly
  • Url, search parameters, etc
  • Input content, dangerous character filtering, length limitation

CSRF

Cross-site request forgery

8, cross-domain

The same-origin policy

The protocol, domain name (subdomain and master domain), and port are all the same and are considered homologous. If the current url (http://news.a.com), none of the following is homologous

  • https://news.a.com Different protocols
  • http://news.a.com:8080Different ports
  • http://home.a.com Different domain name

Constraints on the same-origin policy

  1. Cookie, LocalStorage, and IndexDB cannot be read.
  2. Some references to the JavaScript API are not available. It is not allowed to perform operations such as retrieving dom nodes in iframe
  3. AJAX requests cannot be sent. (That is, XMLHttpRequest cannot be used)

Cross-domain solutions

Cross-domain Resource Sharing (CORS)

  • An Origin header is sent to indicate the source information of the requested page. If the server returns an Access-Control-Allow-Origin with the same source information or *, the server can request information across domains
  • Neither the request nor the response contains cookies

Options Precheck request

In the case of cross-domain, when the browser initiates a “complex request”, it will initiate the Options pre-check request to know whether the server allows the cross-domain request. The actual HTTP request is made only after the server confirms that it is allowed.

Simple versus complex requests

Simple requests do not trigger options precheck, only complex requests do

A simple request
  • The request method is GET, HEAD, or POST
  • Accept/ accept-language/content-language/content-type /DPR/Downlink/ save-data/viewport-width /Width
  • Content-type values are limited to one of the following: Application/X-www-form-urlencoded, multipart/form-data, text/plain
  • None of the XMLHttpRequestUpload objects in the request have any event listeners registered;
  • No ReadableStream object is used in the request.
Complex request
  • Use the following any HTTP method, PUT/DELETE/CONNECT/OPTIONS/TRACE/PATCH
  • The header field outside the following collection, that is, the field outside the simple request, was set artificially
  • Content-type values do not belong to one of the following: Application/X-www-form-urlencoded, multipart/form-data, text/plain

Interviewer: Tell me what you understand about the Options request

Image detection

let img = new Image();
img.onload = img.onerror = function() {
    console.log('done');
};
img.src = 'http://****/test? name=abc';
Copy the code

Image probe can only send get requests and cannot get the content of the server response. Image probe can only communicate one-way with the server.

jsonp

  • Jsonp method is mainly to dynamically create script tags to obtain data;
  • Jsonp can only make GET requests because SRC in script is a static file.
  • It takes advantage of the fact that js files are downloaded and executed directly, similar to eval(). Splice after SRC? Callback =fn Passes in the name of the callback function method and the back end returns the call to the function.

document.domain

Browsers allow document.domain to share cookies to achieve this effect. However, the level 1 domain name of two web pages is the same, but the level 2 domain name can be set only when different.

A web page: http://w1.cs.com/a.html In this web page address, w1.cs.com is collectively referred to as the domain name

  • A level 1 domain name consists of a legal string + domain name suffix. Therefore, a domain name in the form of cs.com is a level 1 domain name, cs is the domain name subject, and.com and.net are domain name suffixes.
  • A level 2 domain name is the host name under the level 1 domain name. As the name implies, it is preceded by a string, such as w1.cs.com and w2.cs.com

You can set document.domain and cookies in web pages like this

document.domain = 'cs.com';
document.cookie = "key1=value1";
Copy the code

When setting cookies, the server can specify the domain name of the Cookie as the level-1 domain name, for example,.example.com

Set-Cookie: key=value; domain=.example.com; path=/
Copy the code

window.postMessage

Js execution sequence, macro task and micro task

JS is single threaded, the onclick callback, setTimeout, Ajax, etc. This is because the browser or node (host environment) is multi-threaded, i.e. the browser has several threads to assist the JS thread to run.

Browser thread

  1. GUI rendering thread (DOM rendering)
  2. JS engine thread
  3. Timer trigger thread (setTimeout)
  4. Browser event thread (onclick)
  5. HTTP asynchronous thread
  6. The polling handler thread event Loop

Event loop Execution sequence

  1. The entire script is initially executed as a macro task;
  2. In the process of execution, the synchronized code is executed directly, and the macro task enters the macro task queue and the micro task enters the micro task queue.
  3. Check the list of micro tasks after the current macro task is executed, and execute them successively until all the tasks are executed.
  4. Perform rendering for the browser UI thread;
  5. Check whether there are Web Worker tasks and execute them.
  6. After executing the macro task of this round, return to 2, and so on, until the macro task and microtask queue are empty;

tips:

  • The macro task must be executed after the microtask (because the microtask is actually one of the steps of the macro task)
  • Changes to the DOM Tree are made in real time, whereas changes to Render on the DOM are made asynchronously
  • The new Promise itself is synchronized code, and only.then is a microtask
  • Async /await is essentially a wrapper around promises, which are a type of microtask. So using the await keyword has similar effects as promise.then

Micro tasks

  1. Promise.then()andcatch();
  2. Other technologies developed based on Promise, such as the FETCH API;
  3. Unique to the Nodeprocess.nextTick;
  4. V8’s garbage collection process;
  5. MutationObserver;

Macro task

  1. setTimeout,setInterval,setImmediate(Node environment),
  2. The script,
  3. The UI rendering,
  4. I/O,
  5. Network requests and so on

RequestAnimationFrame is neither a macro task nor a microtask

Garbage collection and memory leaks

Garbage collection:

When JavaScript code runs, it needs to allocate memory space to store variables and values. When variables are no longer participating in the run, the system needs to reclaim occupied memory space, which is called garbage collection.

Recycling mechanism

  • Javascript has an automatic garbage collection mechanism, which periodically frees the memory occupied by variables and objects that are no longer used. The principle is to find variables that are no longer used, and then release the memory occupied by them.
  • There are two types of variables in JavaScript: local variables and global variables. The lifetime of global variables continues to require page unloading; Local variables are declared in functions, and their life cycle starts from the execution of the function until the end of the function execution. During this process, local variables store their values in the heap or stack. When the function execution ends, these local variables are no longer used and the space they occupy is freed.
  • However, when a local variable is used by an external function, one of the situations is a closure. After the function is finished, a variable outside the function still points to a local variable inside the function. The local variable is still in use, so it is not recycled.

The way garbage is collected

  • Mark clearly (most used)
  • Reference counting

A condition that causes a memory leak

  • Accidental global variable: Accidentally creating a global variable by using an undeclared variable that remains in memory and cannot be reclaimed.
  • Forgotten timer or callback function: Set the setInterval timer and forget to cancel it. If the loop function has a reference to an external variable, that variable is left in memory and cannot be reclaimed.
  • Out-of-dom reference: Gets a reference to a DOM element that has been deleted and cannot be reclaimed because references to this element are kept forever.
  • Closures: Improper use of closures, resulting in some variables being left in memory.

Reduce garbage collection

While automatic garbage collection can be done by browsers, garbage collection can be costly when code is complex, so it should be minimized.

  • Array optimization: The easiest way to empty an array is to assign it a value of [], but at the same time create a new empty object. You can set the length of the array to 0 to clear the array.
  • Object optimization: Reuse objects as much as possible. For objects that are no longer used, set them to NULL and recycle them as soon as possible.
  • Optimize the function: if the function expression in the loop can be reused, try to put it outside the function.