1. Simple and complex requests

Axios is a complex request, ajax can be a simple request

The fundamental difference lies in: whether to trigger cORS precheck request simple request: 1, request methods: GET, POST, HEAD; 2. The HTTP header does not exceed the following fields: - accept-accept-language-content-language-last-event-id-content-type: Limited to three values: Application/X-www-form-urlencoded, Multipart /form-data, text/plain complex request: either simple request or complex request. Complex requests are preceded by an options request to request permission information from the server.Copy the code

2. Event penetration

What is event penetration: The page has two elements, A and B, with B above A. The touchStart event is registered on B, and B is hidden in the callback function. When we click on B, in addition to B being hidden,A's click event is triggered. This is because in mobile browsers, events are executed in the order 'touchstart' => 'touchmove' => 'touchend' => 'click', which has a delay of 300ms. When B's TouchStart event is triggered,B is hidden. 300ms later, the browser triggers the click event, which has been dispatched to element A.Copy the code

Solution to event penetration:

1, event.preventdefault () preventDefault behavior;

2. Use the pointer-events attribute

Set the pointer-events of the underlying element to None, and then set a timer to change the attribute value of the underlying element to auto after a certain amount of time.

The values meaning
auto The effect is the same as if the pointer-events attribute was not defined, and the mouse does not penetrate the current layer.
none The element is no longer the target of mouse events, and instead of listening for the current layer, the mouse listens for elements in the layer below. But if its child element sets pointer-events to something else, such as auto, the mouse will still listen for that child element.

The browser only allows scrolling and continuous zooming. Any other behavior supported by the auto value is not supported. Enable pan and zoom gestures, but disable other non-standard gestures, such as double-clicking to zoom. Disabling double click zoom reduces the browser’s need to delay the generation of click events when the user clicks on the screen.

4. How to deal with it in vUE project

<a v-on:click.stop="doThis"></a>Copy the code

3. The difference between 301 and 302

301 indicates permanent redirection. 302 indicates temporary redirectionCopy the code

4. The difference between pseudo-classes and pseudo-elements

The fundamental difference is whether they create new elements.

Pseudo-element: a virtual element that does not exist in the DOM document. It is a new element that is created and represents a child node of an element.

🌰 : E :before E :after E :selection E :placeholder

Pseudo-classes: exist in the DOM document and logically exist in the document tree without identification.

🌰 : E :link E :not E :hover E :focus E :target E :active E :disabled

5. Differences between import and required

Import is eventually converted to es5 require (1) by Babel. Require is the CommonJS specification and import is the es6 syntax standard. Require is called at runtime and import is called at compile time Require is essentially an assignment process import is essentially a deconstruction processCopy the code

6. What happens when a button is clicked? How to determine whether to perform event bubbling or event capture?

By the way, the interviewer started his first question with a question mark. This is what is asked, (dom event stream three stages). 1. Capture stage the stage in which events propagate from Document node to target node from top to bottom; 2. Target Phase The phase in which the actual target node is processing the event; 3. Bubble stage The stage in which events propagate from target node to Document node from bottom to top; To determine whether to bubble or capture: the third parameter of addEventListener(type, listener, [useCapture]) is usCapture. If the third parameter is true, the event handler is called during the capture phase. False (default is false if not written) means that the event handler is invoked during the event bubble phase.Copy the code

7. The difference between HTTP and HTTPS

1. For HTTPS, you need to apply for a certificate from the CA. Generally, there are few free certificates. 2. HTTP is a hypertext transfer protocol, and information is transmitted in plain text. HTTPS is a secure SSL encrypted transfer protocol. 3. HTTP and HTTPS use completely different connections and use different ports: 80 and 443. HTTP connections are simple, stateless; HTTPS is a network protocol based on SSL and HTTP for encrypted transmission and identity authentication. It is more secure than HTTP.Copy the code

8. What is the content-type of the request and what type of file is passed

application/json; text/plain; Multipart /form-data: the format of the form file is TEXT/XMLCopy the code

9. The role of semantic tags

1. Code structure: Make the page without CSS, but also can present a good content structure (mainly by the title tag and meta keywords, description) is conducive to SEO 2, improve user experience: For example, title and Alt can be used to explain names or picture information, and label can be used flexibly. 3. Ease of team development and maintenance: Semantics make your code more readable, allowing other developers to better understand your HTML structure and reducing differentiation. 4. Convenient for other devices to parse: such as screen readers, blind readers, mobile devices, etc., to render web pages in a meaningful way. 🌰 : <header> <nav> <main> <aside> <section>Copy the code

Sort out part of the first, the follow-up continuous update, real interview encounter, hard point like ha ~

At this time live in the Perseid meteor shower, lucky to see more than a dozen meteors, make a wish to continue to work hard, find a desirable job;

Write at this moment, just the music started zhang Xinzhe’s faith, inexplicably moved, good night ~