Common front-end basic interview questions (HTML, CSS, JS) (6)

 The difference between GET and POST

From the perspective of the http protocol, GET and POST are just the first word in the request line. There is no essential difference except for the different semantics.

The reason why there are various differences in actual development is mainly due to the default behavior of the browser.

Affected by browsers, in actual development, GET and POST have the following differences:

• When the browser sends a GET request, it does not attach the request body

• The GET request has a limited amount of information, which is suitable for transferring a small amount of data; the POST request has an unlimited amount of information, and is suitable for transferring a large amount of data.

• GET requests can only transfer ASCII data, and non-ASCII data needs to be encoded; POST requests have no restrictions

• Most of the data passed in the GET request is attached to the path parameter, and the page can be completely reproduced by sharing the address, but at the same time, the data is exposed. If there is sensitive data to be passed, the GET request should not be used, at least it should not be placed in the path

• When refreshing the page, if the current page is obtained through a POST request, the browser will prompt the user whether to resubmit. If the page obtained by GET request, there is no prompt.

• The address of the GET request can be saved as a browser bookmark, and the POST cannot

Browser rendering mechanism, redrawing, rearrangement

Web page generation process:

• HTMLparsed by the HTML parser into DOMa tree
• cssis parsed into CSSOM a tree by the css parser
• Combine DOMtrees and CSSOMtrees to generate a render tree ( Render Tree)
• Generate a layout ( flow), that is, to synthesize all nodes of all rendering trees
• Draw( paint) the layout to the screen

Rearrangement (also called reflow):  When the change of DOM affects the geometric properties of the element (the position and size of the DOM object), the browser needs to recalculate the geometric properties of the element and place it in the correct position in the interface. This process It's called reflow. trigger:

1. Add or remove visible DOM elements
2. Element size changes - margins, padding, borders, width and height

Redrawing: When the appearance of an element has changed, but the layout has not been changed, the process of redrawing the appearance of the element is called redrawing, which triggers:

• Change the color, background, and box-shadow properties of an element

What happens after url press enter

1 解析域名
2 缓存判断   --有资源直接返回、否则向服务器发起新的请求
3 DNS解析
4 获取MAC地址
5 会把请求的内容存储到dns
6 TCP三次握手
7 HTTPS握手
8 返回数据
9 TCP四次挥手
复制代码

The difference between cookie, sessionStorage and localStorage

• cookie can set expiration time
• localStorage is stored permanently unless manually cleared
• sessionStorage is valid only on the current web page, and will be cleared when the page is closed
• Cookie storage size is 4k, localStorage and sessionStorage are 5M
• When requesting: the cookie automatically carries the HTTP header, localStorage and sessionStorage are only saved in the browser, and do not participate in server communication