directory

  1. The difference between PV and UV [PV page views, UV(unique visitors) within 24 hours a day the same client only counts once]
  2. Browser storage [Cookie 4KB, localStroage 5MB]
  3. Browser cache [Strong cache > Negotiated cache]
  4. Browser render [(DOM tree + CSS tree = render tree) -> Calculate position -> call GPU to draw, synthesize layer, and display on screen]
  5. Cross-domain browser [CORS]
  6. 【 Event loop: macro task (script) ->all micro task -> macro task 】
  7. Browser garbage collection
  8. Browser security

The difference between PV and UV

  • PV(Page View) : Page View, specifically refers to the site is the Page View or click, the Page is refreshed once calculated. If the site has been refreshed 1000 times, the traffic statistics tool will show a PV of 1000.

  • UV(Unique Visitor) : Unique Visitor, a computer client that accesses your site as a Visitor. The same client is counted only once between 00:00 and 24:00.

A UV can use many PV, a PV can only correspond to one IP. For example, when I visit your website once today, your UV increases by 1. When I visit two pages this time, your PV increases by 2. When I visit the same page but refresh it once, PV also increases by 2.

② Browser storage

  • cookie
  • localStorage
  • sessionStorage
  • IndexedDB

Differences:

1) Mode of transmission:

Cookies are passed back and forth between the browser and the server (requests carry cookies by default); SessionStorage and localStorage do not automatically send data to the server and only store data locally.

2) Storage size:

LocalStorage < = 5 m; SessionStorage < = 5 m; Cookies < 4 k; (Around 2012, IE kernel browser was dominant, and IE6 still occupied a considerable market share, so less than 20 cookies should be used in the program, and no more than 4K)

3) Effectiveness:

  • LocalStorage: always valid, saved even when the window or browser is closed and therefore used as persistent data;
  • SessionStorage: valid only before the current browser window is closed.
  • Cookie: only valid before the set cookie expiration time, even if the window or browser is closed will not disappear;

4) Sharing mechanism:

  • LocalStorage: shared in all origin Windows;
  • SessionStorage: different Windows opened independently at the same time, even the same page, the sessionStorage object is also different;
  • Cookie: Shared across all origin Windows

5) Browser support:

The minimum version of sessionStorage browser: IE8, Chrome 5.

6) Usage scenarios

  • Cookie: Saves the return message
  • LocalStorage: persistent data
  • SessionStorage: data with independent features

③ Browser cache

1. Service workers are independent threads running behind the browser. Must be HTTPS.

Three steps: register (download: sw.js), listen (wait for other worker to fail), check the cache

1) The SW thread can be used to communicate with the server (fetch and Push apis are built into the context of the service worker) and 2) it can be used to perform a large number of complex operations without affecting the UI response. 3) It blocks all requests

  1. Memory Cache Stores resources in Memory. In fact, all network requests are cached in memory by the browser. Of course, memory capacity is limited and the cache cannot be stored in memory indefinitely, so it is destined to be a short-term cache. Control of the memory cache resides in the browser, not in the front or back end.

  2. Disk Cache The Cache stored in the hard Disk strong Cache and negotiated Cache, implemented by HTTP headers.

Strong cache

Cache-control > Expires(http1.0 artifact, local time affected)

Negotiate the cache

ETag file fingerprint comparison (http1.1) > last-Modified Last Modified time comparison (last-modified when the file is opened, in seconds)

priority

Strong cache > Negotiated cache

4.Push Cache

Server push, http2

④ Browser rendering

  • Generate a DOM tree:

Byte data –> string –> token –> Node –> DOM

  • Generate a CSS tree:

Byte data –> String –> Token –> Node –> CSSDOM

The overall rendering process:

  • 1) Process HTML and build a DOM tree.
  • 2) Handle CSS to build CSSOM trees.
  • 3) Merge DOM and CSSOM into a render tree.
  • 4) According to the layout of the rendering tree, calculate the position of each node.
  • 5) Call GPU to draw, synthesize layers and display them on the screen.

Two important concepts, redraw and reflow:

  • Redraw: When a node needs to change its appearance without affecting its layout, such as changing its color, it is redrawn
  • Backflow: Layout or geometry properties that need to be changed are called backflow.

Backflow must occur redraw, redraw does not necessarily cause backflow. The cost of backflow is much higher, and changing the underlying node is likely to result in a series of backflows from the parent node. When the Event Loop completes Microtasks, it determines whether the document needs to be updated. Since the browser has a refresh rate of 60Hz, it only updates every 16ms.

Cause performance problems:

  • 1) Change the window size
  • 2) Change the font
  • 3) Add or remove styles
  • 4) Text changes
  • 5) Positioning or floating
  • 6) model of the box

Reduce redraw and reflow details:

  • 1) Replace top with translate
  • 2) Replace display: None with undefined because the former will only cause redraw and the latter will cause backflow (changes the layout)
  • 3) Try to calculate the result and then redraw the DOM after it is offline. For example, give the DOM to display: None (once Reflow) and then modify it 100 times before displaying it
  • RequestAnimationFrame Load and DOMContentLoaded can also be used to select the speed of animation implementation. The Load event is triggered to indicate that the DOM, CSS, JS and images in the page have all been loaded. The DOMContentLoaded event is triggered to represent that the original HTML is fully loaded and parsed, without waiting for CSS, JS, and images to load.

⑤ Cross-domain browser

First of all, what is cross-domain? It is cross-domain that violates the browser’s same-origin policy. Cross-domain itself is to protect browser security, mainly to prevent CSRF attacks

So what is the same origin policy? The same protocol, same domain name, same port. To ensure security, only interfaces under the same domain name are allowed to interact with each other. Client scripts from different sources cannot read or write resources from each other without authorization.

Solutions to the same Origin policy:

    1. jsonp
    1. iframe
    1. postMessage
    1. CORS
    1. webscoket
    1. Reverse proxy server
    1. Nginx proxy
    1. The node agent

⑥ Browser execution mechanism

Javascript is a single-threaded language, and Event Loop is the execution mechanism of javascript libuv

You need to understand what is called event loop events, microtasks, macro tasks. And how it works.

Can be understood: juejin.cn/post/700070…

⑦ Browser garbage collection GC

The space of Cenozoic under 64 bit is 64M, the space of Cenozoic under 32 bit is 16M, and the space of Cenozoic under 32 bit is 700M.

JavaScript uses garbage collection to manage memory automatically, and garbage collection is a double-edged sword

  • Advantages: It can greatly simplify the memory management code of the program, reduce the burden of the program, and reduce the memory leakage problem caused by frequent running.
  • Disadvantages: means programmers will have no control over memory. Js does not expose any memory apis. We can’t force it to do garbage collection, nor can we interfere with memory management.

V8 was originally designed for browsers and is unlikely to encounter large memory scenarios. Js garbage collection will suspend thread execution and take up some time.

It has two kinds of recycling, one is timed recycling, one is out of memory recycling.

The Scavenge GC is split into two Spaces: the FORM and the TO.

2. Old algorithm, mark clearing algorithm, mark compression algorithm

Interested in garbage collection algorithm friend: www.jianshu.com/p/a8a04fd00…

Garbage Collection in computer science, Garbage Collection (abbreviated to GC) is an automatic memory management mechanism. When dynamic memory on a computer is no longer needed, it should be released to free up memory. This management of memory resources is called garbage collection.

There are many kinds of garbage collection algorithms. Let’s take a look at some aspects that evaluate the performance of garbage collection algorithms, and then look at the pros and cons of each algorithm in detail

  • Throughput throughput
  • Maximum pause time
  • Heap efficiency
  • Locality of access

ⅷ Browser security

  • 1. XSS cross-site scripting attacks

Principle :(1) construct URL (2) publish content type (3) worm type

  • 2.CSRF cross-site request forgery

1) Verification code. 2) HTTP Referer is part of the header 3) token

  • 3. SQL script injection

Stitching scripts

  • 4. Upload vulnerability

(1) Check whether the server determines the type and suffix of the uploaded file. (2) Define a whitelist of uploaded file types, that is, only files in the whitelist are allowed to be uploaded. (3) Script parsing is prohibited for file upload directories to avoid secondary attacks.

Ⅸ

Ten reference

  • Front end knowledge system review outline
  • Juejin. Cn/post / 684490…

conclusion