HTML part

Understanding the semantics of HTML

With semantic tags to enhance readability, the structure is more clear, developers can clearly see the structure of the web page, facilitate the development and maintenance of the team.
A crawler suitable for search engines crawls effective information, which is beneficial to SEO.
Web pages are easier to read by screen readers and have a clear structure when removed or styles are lost.

Semantic tags: Herader, nav, main, aside, footer, etc

Html5 has those new features

Added semantic label and progress bar label
Media Tag Audio video
New form types, color, email, data, time, number, URL, etc
New form attributes: placeholder autofocus, etc
Added two data storage modes on the client: localStorage and sessionStorage
Drag and drop, Canvas, Geolocation, Websocket

Difference between localStorage and sessionStorage cooike

Cooike function: HTTP is a stateless protocol and cannot save the status of each request. Therefore, cookies must be added to the client to save the status of the client. Cookies are mainly used forUser identification 和State management.(For example, remembering passwords is common on web pages)

Html5 offline storage

When online, the browser finds the MANIFEST attribute in the HTML header and requests the MANIFEST file. If it is accessed for the first time, the browser downloads the resource based on the contents of the MANIFEST file and stores it offline. If it has been visited and the resource is stored offline, the browser loads the page with the offline resource. The browser then compares the new manifest file to the old manifest file and does nothing if the file has not changed. If the file has changed, the resources in the file are redownloaded and stored offline.

What are the pros and cons of the Iframe framework?

Advantages:

A web page with the same header and version for the same style can be written as a single page, nested with iframe to increase code reuse.
If you encounter slow-loading third-party content such as ICONS and ads, these issues can be addressed by iframe.

Disadvantages:

Bad for SEO, search engine crawlers can’t read pages like this
Blocks the onLoad event on the main page
It produces a lot of pages, is not easy to manage, and increases HTTP requests to the server

The CSS part

Knowledge of common design drawing source files

Imgcook (Smart Code Generation Platform)

CSS selector and priority

The selector

Id # (id)

Class selector (.className)
Attribute selector (p[class=”a”])
Pseudo-class selector (Li: last-Child)
Element selector (div)
Wildcard selector (*), etc

Summary sort:

! Important > Inline Style > ID Selector > Class Selector, Properties, Pseudo Class > Element > Wildcard > Inheritance > Browser default Properties

Matters needing attention

! The style declared by important has the highest priority;
If the priority is the same, the last style to appear takes effect;
Inherited styles have the lowest priority;
Depending on the source of the style sheet, the order of priority is inline style > Internal Style > External Style > Browser User Defined Style > Browser Default style.

What are the inheritable and uninheritable properties of the CSS

Non-inheritable property

Background properties

Background background, color, etc

Positioning properties

Float position min-height, max-width z-index

Box model attributes

Width, height, margin, margin-top, margin-right etc

Inheritable property

Font family properties

font-family font-weight font-size font-style

Text series properties

text-align line-height

other

Color cursor

Inline elements and block-level elements

Inline element (set to inline element display:’inline’)

Side by side with other inline elements
The width and height cannot be set. The default width is the width of the text

A, B, I, etc

Block level element (set to inline element display:’block’)

Occupy a line that cannot be juxtaposed with any other elements.
Can accept width and height, if the width is not set, then the width defaults to 100% of the parent.

Div P H1 Li Table and so on

Inline fast element (set to inline element display:’inline-block’)

You can side by side with other inline elements
Width height can be set

input img

Methods to hide elements

Display: none

It doesn’t render elements, it doesn’t take up space on the page

Visibility: hidden

Elements are rendered, and they still take up space on the page, but the content is not visible.

opacity: 0

Hide the element by setting its transparency to 0. Elements still take up space on the page

Z – index: negative

Hide by making other elements cover the element.

Pseudo elements and pseudo classes

Pseudo elements

Insert additional elements or styles before and after content elements, but these elements are not actually generated in the document. They are only visible externally, but they are not found in the source code of the document, and are therefore referred to as “pseudo-” elements. Such as:

p::before {content:"Chapter one:"; }p::after {content:"Hot!"; }Copy the code

pseudo-classes

Adds a special effect to a particular selector. It adds categories to existing elements and does not create new elements. Such as:

a:hover {color: #FF00FF}
p:first-child {color: red}
Copy the code

The box model

Css3 box model has the following two kinds: standard box model, IE box model

Box models are made up of four parts: Margin, border, padding and Content.

The difference between the standard box model and IE box model is that the corresponding range of width and height is different:

The range of width and height attributes in the standard box model only contains content,
The width and height attributes of the IE box model range include border, padding, and content.

You can change the box model of an element by modifying its box-sizing property:

box-sizeing: content-boxRepresents the standard box model (default)
box-sizeing: border-boxRepresents IE box model (weird box model)

Flex related Attributes

Display: flex

Six attributes

flex-direction

The flex-direction attribute determines the direction of the main axis (that is, the alignment of items)

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
-   `row`(Default) : The main axis is horizontal and the starting point is on the left. -`row-reverse`: The main axis is horizontal and the starting point is at the right end. -`column`: The main axis is vertical, and the starting point is on the upper edge. -`column-reverse`: The main axis is vertical and the starting point is down.Copy the code

flex-wrap

Whether a newline

flex-wrap: nowrap | wrap | wrap-reverse;
Copy the code

justify-content

The context-content attribute defines the alignment of items on the main axis.

justify-content: flex-start | flex-end | center | space-between | space-around;
Copy the code

align-items

The align-items property defines how items are aligned on the cross axis.

align-items: flex-start | flex-end | center | baseline | stretch;
Copy the code

What’s new in CSS3

Rounded corner (border-radius:8px)
Multi-column Layout
Shadoweflect
Text-shadow
Text-decoration
Linear gradient
Transform
Added rotation, scaling, positioning, tilting, animation,

Margin overlap problem

The upper and lower margins of two block-level elements may be merged (folded) into a single margin that takes the larger of the two margins. This behavior is called margin folding. Note that the margins of floating elements and absolutely positioned elements out of the document flow do not collapse. Overlap only occurs in the vertical direction.

Calculation principle

If both are positive, go to the largest one
If it’s a plus and a minus, it’s going to be a positive minus the absolute value of a negative
When they’re both negative, you subtract 0 from the one with the highest absolute value

The way to clear the float

Define the parent divheightattribute
Float element’s parent tag to addoverflow:hidden
Use the :after pseudo-element

.clearfix:after{
    content: "\200B";
    display: table; 
    height: 0;
    clear: both;
  }
Copy the code

CSS optimizes and improves performance

CSS compression: Compress the written CSS to reduce the file size.
Reduce the use of @import in favor of link, because the latter is loaded at the same time as the page is loaded, while the former waits until the page is loaded.
Avoid wildcard rules, such as *{}, which are extremely computable, and select only the elements you need.
Use high performance attributes, such as float and Location, with caution.

Why use CSS preprocessors

cssPreprocessor forcssAdd some programming features, regardless of browser compatibility
increasedcssReusability of code. The hierarchy,mixin, variables, loops, functions, etc. are handy for writing and developing UI components.
cssMore concise, increased adaptability, readability, maintainability, etc

Web and browser sections

The HTTP status code

Get and POST

The parameters of the GET request are stored in the URL, which is not secure, and the amount of data transmitted is limited (URL length limit). The data type supports only ASCII characters and can be cached.
Post provides higher security. Parameters are not displayed in the URL, and data is transmitted in a larger amount. There is no limit on the data type and cannot be cached.

What happens when the browser enters Google.com and hits Enter

1.Dns domain name resolution
2. Resume TCP connection with the server (TCP three-way handshake)
3. Send an HTTP request
4. The server processes the request
5. Return data
6. Close the TCP connection (wave four times)
7. Render the page

Browser rendering process

1. HTML parses the Dom Tree
2. The CSS parses the style Rules
3. The two are associated to generate Render Tree
Calculate the information of each node according to Render Tree
5. Render the entire page

Same origin policy for browsers and solutions

The same origin policy is an important security policy to reduce the attacked media for security.
The same domain name, protocol, and port are the same. Any difference is not homologous
The cross-domain problem is caused by the same origin policy of the browser.

Solutions:

1. Cross-domain resource sharing ([CORS])

Access-control-allow-origin = “*”

res.header('Access-Control-Allow-Origin'.The '*')
res.header('Access-Control-Allow-Headers'.'Authorization,X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method' )
res.header('Access-Control-Allow-Methods'.'GET, POST, OPTIONS, PATCH, PUT, DELETE')
res.header('Allow'.'GET, POST, PATCH, OPTIONS, PUT, DELETE')
Copy the code

2. Nginx reverse proxy
React Proxy proxy configuration and HTTP-proxy-middleware

Refluxing and repainting

Return:

When part (or all) of the Render Tree needs to be rebuilt due to changes in element size, layout, hiding, etc. This is called reflow.

Redraw:

When some elements in the Render Tree need to update their attributes, these attributes only affect the appearance and style of the elements, not the layout, such as background-color. It’s called redrawing.

The difference between

Backflow will certainly cause redrawing, and redrawing will not necessarily cause backflow. For example, redrawing occurs when only color changes and does not cause backflow. Backflow occurs when page layout and geometry changes such as adding or removing visible DOM elements, element position changes, element size changes – margins, padding, borders, width and height, content changes, etc. 1. Batch modify DOM

The principles and differences between HTTP and HTTPS

HTTP Hypertext transfer protocol

1. Information is transmitted in plaintext, which is insecure
2. The connection is simple and stateless
3. The default port is 80

https

1. A CA certificate is required, which requires a certain fee
2.HTTPS is a network protocol that uses SSL and HTTP to encrypt transmission and authenticate identity. It is more secure than HTTP.
3. The default port is 443

The kernel of each browser

IE Trident

chrome Blink

firfox Gecko

Safari webkit

Strong and negotiated caches, why browser caches

Strong cache:

If the cache resource is valid, the cache resource is directly used without sending requests to the server.

Negotiation cache:

If the mandatory cache is hit, we don’t need to make a new request, we just use the cache content. If the mandatory cache is not hit, if the negotiated cache is set, then the negotiated cache will come into play. With a negotiated cache policy, a request is first sent to the server, and if the resource has not been modified, a 304 status is returned, allowing the browser to use the local cache copy. If the resource has been modified, the modified resource is returned.

Why do YOU need a browser cache

For the browser cache, mainly for the front-end static resources, the best effect is to pull the corresponding static resources after the request, and save in the local. If the static resources of the server have not been updated, then the next request can be directly read from the local. If the static resources of the server have been updated, then when we request again, we will go to the server to pull the new resources and save them locally. This significantly reduces the number of requests and improves the performance of the site. This is where the browser’s cache strategy comes in.