Front-end interview data collation [related knowledge articles]

browser

browser cache

MEMORY CACHE | DISK CACHE

The difference between memory cache and disk cache:

• memory cache is faster
• The memory cache will be reclaimed when the browser is closed, the disk cache will not

When are both used?

200 -> response -> close the browser -> request the same address -> disk cache -> refresh -> memory cache

browser frame rate

The whole process of rendering from a pixel to the page.

Reflow and Repaint

The css tree and the dom tree are combined to generate a rendering tree.
A redraw occurs when a reflow occurs.

garbage collection

What kinds of algorithms are there? What is the principle of separation?

• Reference counting: By counting the number of times a variable is referenced, it is indeed garbage collected. The disadvantage is that when a circular reference occurs, it cannot be cleared; the other is that there is a time overhead, and the object must be constantly monitored. The advantage is that it is fast and recycled immediately after discovery.
• Mark clear: The execution process is divided into two times, the first time determines whether the variable is referenced and marked, and the second time the unreferenced variable is recycled and the mark is cleared. The disadvantage is that it is executed twice, and the recycling process program terminates execution; memory fragmentation occurs; The advantage is that circular references can be recognized
• Mark implementation: On the basis of mark clearing, the fragmentation space is added, and the fragments are moved and merged into a continuous space

The one used in V8?

What optimizations can be done to reduce GC?

How to monitor browser by performance?

How to find frequent garbage collection through timeline and reduce blocking?

computer

cache

Negotiate cache and strong cache

Strong caching means that data is not directly obtained from the server, but is obtained directly from the cache, which is usually achieved by setting the http header on the server side.
Negotiating the cache means that the server and the client determine whether to obtain resources from the cache or the server by identifying them.

http

http1.1 has more E-Tag than http1, which is used to negotiate cached fields
http2 has more binary transmission, streaming media, etc.

http workflow

ps. TCP three-way handshake: C - are you there? -> S - I'm in -> C - Got it -> S

The non-simple request has more "precheck" OPTION than the simple request, and the formal communication starts after responding to the "precheck request".

Simple requests: POST, GET, HEAD
It's not as simple as you go:

• DELETE, PATH, PUT
• Send json data.
• custom header field

http1.0, http1.1, http2.0, https

The performance barriers of http are mainly due to two points: bandwidth and latency. Bandwidth is currently improved by hardware, and latency is divided into three types: browser blocking, DNS query, and connection establishment. Browser blocking is usually because the browser will limit the maximum number of connections. DNS is the time consumed by the query process. To establish a connection, usually the http protocol has 3 handshakes and 4 waves in TCP.

http1.0 era, 1996, mainly dealing with simple html pages
In the http1.1 era, in 1999, css and js files were added to speed up the loading speed of the website

• Cache strategy, the header adds Expire, If-Modified-sice
• Extended error status codes
• In order to adapt the host to use the virtual machine, an IP will be shared, so the Host field is added. In http1.1, this field should be added to both request and response.

• Added a long connection, Connect: keep-alive, under a long connection, there is no need to repeatedly establish and close the connection.

  • header compression

  https, reference , default is port 443
  C -hash support -> S
  S - authentication of public key encryption -> C
  C verification certification
  C - Symmetric encryption (RSA) encrypted text and public key -> S

  In the http2.0 era, the SPDY solution based on Google's elimination has been upgraded

  • Transmit binary, not text as with http1.*
  • Support server push
  • Multiplexing: In one connection, parallelism can be achieved instead of ordered blocking. By sequentially identifying the binary data frame, the data received by the client is merged without misalignment. Because one connection can be completed, it is equivalent to increasing the concurrency for the server (the original need to send 4 connections, now one connection can achieve the effect of 4 connections).
  • Rich Cache Type: Negotiated Cache
  • header compression

websocket

Principle: Similar to http requires handshake, but the difference is that there is a persistent link header with upgrade identification websocket communication

cross domain

What are the unnecessary considerations for cross-domain?
Script, link, img src do not need to consider cross-domain

A cross-domain solution?

• nginx
• cors
• jsonp requires the backend and frontend to negotiate the callback function name

Safety

What are the common attacks and blocks?

CSRF
To be added

XSS
To be added

source-map
Source code analysis

Man-in-the -middle attack <br>to be added

The process of entering a URL from the browser to returning to the page

refer to