1 Html5 New characteristics

• Semantic tags ：footer、nav、aside、header
• New multimedia tags ：<audio>、<video>
• canvas（ canvas ）、Geolocation（ Geographical location ）
• input New properties for tags ：placeholder、autocomplete、autofocus、requierd

2 ES6 New characteristics

1. Extension operator
2. Block level scope
3. promise Asynchronous operations
4. Arrow function
5. set and map
6. Template string
7. Deconstruction expression

3 HTML The rendering process of the page

1. Browser parsing HTML label , establish DOM Trees
2. Browser parsing CSS style , establish CSSOM Trees
3. from DOM Trees and CSSOM Trees make up rendering trees , It and DOM Trees are like , however DOM One to one correspondence between tree and label , The rendering tree ignores elements that do not need rendering
4. Once the rendering tree is created , The browser renders the page to the screen according to the rendering tree

Repaint ： When the style of an element changes , Redrawing will occur , Redrawing does not necessarily rearrange

rearrangement ： The change of element style causes the change of page layout , Rearrangement will occur

How to reduce redrawing and rearrangement ？

• Merge the attributes of multiple style changes into one operation
• If you need to perform complex operations on an element , Then you can set it first display：none, Finally, set display：block Let it show , This will only trigger two rearrangements
• Elements that require multiple rearrangements , It can be separated from the document flow , Setting the position：fixed or absolute

4 BFC What is it? ？

BFC Format context for block level , It is a separate rendering area , The elements in the area will not interact with the external elements

How to form BFC？

1. float Exist and not be none
2. overflow Exist and not be visible
3. display by inline-block、block、flex
4. position by absolute or fixed

characteristic ：

1. Elements inside the container do not affect the outside
2. The boxes are arranged vertically , The vertical spacing is determined by margin decision
3. The outer margin of adjacent block level boxes is folded
4. BFC The area can recognize floating elements , When calculating the height of its area , Floating elements also participate in the calculation

5 Horizontal and vertical center style

（1） Unknown width and height element  div{
    
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}
（2）flex Layout （ Parent element Settings ） div{
    
	display:flex;
	justify-content:center;
	align-items:center;
}

(3)grid Layout （ Parent element Settings ） div{
    
	display:grid;
	place-items:center;	//justify-content and align-items Co writing of 
}

6 CSS The weight

1. id Selectors
2. Attribute selector 、 Class selectors 、 Pseudo class selector
3. tag chooser 、 Pseudo element selector

Inline styles and ！import With a higher weight

7 + and ~ What's the difference

+ Match the nearest sibling element
~ All sibling elements after matching

8 new What does the operator do

9 Handwriting new The operator

10 What's the difference between arrow function and ordinary function