1. What are the formats of data interaction between front-end and back-end, and why are most of them using JSON instead of XML

Answer: XML:

<person><name> <age>3 </age></person>Copy the code

JSON: {name: “cicatang”,age:3} JSON is easy to write, save bytes, lighter weight, both front and back have direct parsing JSON method (json.stringfity /parse) easy to use.

2. Are you familiar with the Flex layout

A: I use it almost every day, so I’m pretty familiar with it.

Display: flex align-items multiple align-content: single justify-content -items flex-direction flex-wrap: flex-basic: Flex flex-grow: increase factor 200 4*40=160 1,1,2 1/5*40 Flex Flex-grow: shrink factor 200 60*4=240Copy the code

3. Talk about the CSS box model

A: CSS box model contains several content margin, padding, border, and the content.

There are some differences between Chrome and Internet Explorer when calculating the width of the box. The width of Chrome only contains the content area, so CSS3 provides box-sizing to change the width.

4. The weight of common CSS selectors is a problem

*(has, not, target, root…) Wildcard, ID, class, attr attribute, Element, child (> + ~),

UI state pseudo class selector (hover and active, the link, seceted.. , checked), structural pseudo-class selectors (nth-Child, Fist-Child,last,nth-of-type... before,after....) ! Word-wrap: break-word! Important > id > class > elemnet > ElemnetCopy the code

5. Please center the element vertically in 5 ways

A: flex

! [insert picture description here] (https://img-blog.csdnimg.cn/20201209165632105.png#pic_center)Copy the code

2, Tranform

3, positioning +margin negative value (know the width and height of child nodes)

4, positioning +margin:auto

5. JS dynamically calculates the top and left values

6. What is BFC? Why vertical margin overlap? How to solve this problem?

Concept: Block Formatting Context (BFC). In layman’s terms, a BFC is an independent layout environment, which we can think of as a box (virtually invisible), and the inside of the box, no matter how turbulent the elements are, does not affect the outside. Translated to BFC, the layout of elements in a BFC is independent of external influences. (We often use this feature to eliminate the influence of floating elements on their non-floating siblings and children. And in a BFC, block elements and row elements are aligned vertically along the border of their parent.

How do I trigger the BFC

Float elements, float values other than None 2. Position values are not static or relative 3. Display values are not None 4

The application of the landing

2. Adaptive two-column layout (We can also use the BFC feature to prevent elements from being overwritten by floating elements to implement an adaptive two-column layout. Method: Add overflow: hidden to elements that are not floating. 3. Solve the problem of setting margin value overlap.

Summary: A BFC is a separate container on a page, and the child elements inside the container do not affect the outside elements. It specifies the relationships and interactions of elements with other elements.

7. What is floating, what is its effect, what are its side effects, and how to remove floating?

A: Float is used by adding float properties to nodes, which were originally designed for text wrapping. Nodes with float are removed from the document flow and trigger the BFC of the nodes so that they are aligned in one direction. When a parent node all the child nodes of the float, can cause the parent node high collapse, the solution is first can be added to the parent node active height value, moreover as long as there is a child node is not floating principle is used to add a floating node (usually using pseudo elements before and after), moreover can also trigger the landing of the parent node, Common positioning, or Overflow: Hidden.

8. What are the relative units in the CSS? What are they relative to?

Answer: the REM, EM, VW, VH, etc

REM: font size relative to the root node HTML EM: font size relative to the parent node VW: the width of the viewport is 100VW, relative to dividing the viewport into 100 pieces. VH: the viewport height is 100VH. Similarly, the above units can be used for page adaptation on mobile terminals, but REM and VW are usually usedCopy the code

9. Who is fixed relative to? Is there a problem if you add transform?

A: Fixed is positioned relative to the browser viewport

Fixed positioning will become invalid after the transform is added. If the ancestor of a fixed element has a transform attribute, the fixed element is evaluated relative to that ancestor, not the viewport.Copy the code

10. Why not use style inline elements? What are the disadvantages of inline elements? (CSS files can be cached)

A: First, style is a node attribute and cannot be cached. Code is less readable and maintainable, especially when developed collaboratively. However, if the style of a page is small enough, you can use the style element, because a request can carry up to 14K of data, and if it is small enough, you can save a request.

11. Briefly describe the HTTP and HTTPS protocols and why the three-way handshake is required. What is a long link

A: HTTP and HTTPS are both mainstream transport protocols.

At present, HTTP protocol has developed to the 2.0 stage, supporting long links, breakpoint continuation, cache cache strategy, multiplexing, server push and so on. HTTPS is more secure than HTTP, with SSL encryption and port 433.Copy the code

SYN=1,Seq =Y,ACK = x+1, SYN=1,Seq =Y,ACK = x+1,Seq = X +1 ACK and + 1. The main purpose is to prevent the opening of useless links, or network delay packet loss, the server cannot determine whether the client has received the message

In the case of a long connection, when a web page is opened, the TCP connection between the client and the server for the transmission of HTTP data is not closed. When the client accesses the server again, it continues to use the established connection.

Keep-alive does not hold a connection forever, it has a hold time that can be set in different server software such as Apache. To implement persistent connections, both clients and servers must support persistent connections.Copy the code

Why long links? A long connection saves many TCP setup and shutdown operations, reducing waste and saving time.

12. What are the common HTTP status codes? What’s the difference between 301 and 302? What does 304 mean?

404: The resource cannot be found. 500: Server internal error. 200: The request is successful and data is returned. 301: Permanent redirect; 302: Temporary move, can use the original URI; 304: The resource is not modified and can be cached. 400: Request syntax error (usually parameter error); 403: No permission to access… Etc.

13. What is the process of browser page rendering (what happens to the page after entering the URL)?

A: When the LINK tag is encountered, CSS will be downloaded and parsed (the dom tree will not be prevented from being built). When the Script tag is encountered, dom tree construction will be suspended and js will continue after downloading and executing (defer (download delayed), Async) and then layout and paint and finally render

14. What is reflow and Repain? What actions trigger Reflow and how can they be avoided

Reflow: reflow, the browser rerenders the page when an element’s size, structure, or triggers certain attributes, called reflow.

Repain: Redraw when the element's style (layout does not occur) changes. The following common operations are triggered:Copy the code

Browser window size changes element size, location, content changes Element font size changes Add or remove visible DOM elements activate CSS pseudo-classes (e.g. : :hover), etc

Minimize DOM manipulation.

15. What are the apis commonly used in HTML5? Which ones have you used?

A: Video, audio, get dom method (querySelector), webSocket

Canvas, SVG, requestAnimationFrame, Geolocation, stroage, Notification, Orientation APIS are used to detect the Orientation of mobile phones, etcCopy the code

16. Please list some common browser compatibility problems.

A: Internet Explorer 678 has been largely discontinued in the market, so try not to mention compatibility in this area.

Get the width of the viewport window. Innerheight /width 4. CSS3 animation, transition, gradient, flex also has 5. Opacity filter: alpha(opacity = 50); 7. Event. OffsetX /Y 8

17. What is browser caching (know what strong caching and negotiated caching are)?

A: When the browser visits the resource, it will be cached locally by the browser. If the page is not expired, it will directly read the cache to speed up the loading efficiency of the browser.

Http1.1 cache-control: Expires: Sets a maximum cache time. Expires: sets a maximum cache time. Max-age = time, when the time expires, check the etag and send a request to the server. If the etag has not changed, the browser will be directly told to read the local cache. If the etag has not changed, the browser will check the last-Modified. If the access time is too long, the file has not changed. 304 is returned.

A strong cache is one in which the current access time is within the set maximum time range. Negotiation caching is a mechanism to use caching by checking eTAG or last-modifed when time has expired.

18. Talk about the browser garbage collection mechanism

A: Old: the tag clearing algorithm, the GC checks if the current object is referenced by a variable, and if not, reclaims it.

New: Scavenge, the memory space is split into two parts, called From space and To space. When a space is full, the active objects in the space will be moved to another space, so swap.Copy the code