Leak detection and vacancy filling (6)

Leak filling （ 6、 ... and ）

Rearrange and redraw

rearrangement （relayout/reflow）, It's also called backflow , Rearrangement must cause redrawing

rearrangement

• Operation causing rearrangement ：

1. Page first render .
2. Browser window size changes .
3. A change in the size or position of an element .
4. Element content changes （ The number of words or the size of pictures and so on ）.
5. Element font size changes .
6. Add or remove visible DOM Elements .
7. Activate CSS pseudo-classes （ for example ：:hover）.
8. Set up style attribute
9. Query some properties or call some methods .

Be careful ：translate It won't cause a rearrangement , because translate Will be corresponding DOM Node to generate a new layer ( Also called turning on hardware acceleration ), Will not affect the original DOM.

Repaint

The change of element style in the page does not affect the position of the element in the document flow , This causes redrawing , Redrawing does not necessarily cause rearrangement

Front end performance optimization

1. Reduce DOM operation ;
2. Use the better API Replace bad API;
3. Reduce rearrangement ;

• Avoid setting up a lot of style attribute , Because by setting style Property changes the node style , Every setting will trigger a reflow, So it's better to use class attribute
• Realize the animation of elements , its position attribute , It's better to set it to absoulte or fixed, This does not affect the layout of other elements
• Animation to achieve the speed of the choice . For example, to achieve an animation , With 1 It's smoothest to move in pixels , however reflow Too often , A lot of consumption CPU resources , If the 3 Moving in pixels is much better .
• Do not use table Layout , because table One of the elements triggers reflow, So the whole table All elements of will trigger reflow. Then I have to use table The occasion of , You can set table-layout:auto; Or is it table-layout:fixed This will allow table Line by line rendering , This is also to limit reflow Range of influence

4. css And animation processing

Reference resources ：https://zhuanlan.zhihu.com/p/40605154

position

• position: relative Relative positioning

1. Do not detach from the document stream ;
2. Offset from the original position ;
3. Level up ;
4. Does not affect the properties of the element itself

• position: absolute

1. Off stream ;
2. If the parent is positioned, it will be offset by the position of the parent ;
3. Level up ;
4. Embedded supports width and height ;
5. Block element content spread width

• position: fixed

1. Similar to absolute positioning ;
2. Always offset from the entire document

Be careful ： By default, the latter is higher than the former , If the element written in the front wants to be at the top , Use z-index Raise the level

box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;
Horizontal distance Vertical distance A fuzzy distance Shadow size Shadow color Change the outer shadow to the inner shadow

getComputedStyle()

Get elements css Property value ,IE Medium is currentStyle() Method

// Get any of an element  CSS  Property value 
function getStyle(element, attr) {
    
    if(element.currentStyle) {
    
        return element.currentStyle[attr];
    } else {
    
        return getComputedStyle(element, null)[attr];
    }
}

css inheritance of attribute

inheritable

1. typeface 、 font size 、 Color 、text-aglin;
2. cursor ：cursor;
3. voice ：speak;
4. border-style;
5. visibility;
6. list-style,list-style-type;
7. quotes
8. text-indent
9. word-spacing
10. letter-spacing
11. direction
12. line-height

Non inheritable

1. Wide and high ;
2. Minimum and maximum width and height ;
3. float ;
4. location ;
5. Hierarchy ;
6. background ;
7. Text shadow ;
8. Box model properties

Judge whether it is true

null == undefined //true
null == null //true
undefined == undefined //true
null === undefined //false
undefined === undefined //true
null === null //true

When the input is 2 What is the return value when

public static int getValue(int i) {
    
    int result = 0;
    switch (i) {
    
        case 1:
            result = result + i;
        case 2:
            result = result + i * 2; //4
        case 3:
            result = result + i * 3; //10
        default:
            result = result + i * 4; //18
    }
    return result;
}
// Eventually return 18, Because of every case There is no... After matching break, So it will execute the following case Until I met break

The following data structure can support random insertion and deletion operations 、 And has better performance is

A.  Linked lists and hash tables    
B.  Arrays and linked lists 
C.  Hash tables and queues 
D.  Stack and bidirectional queue 

The queue follows the first in first out principle , exclude C、D, Array deletion and insertion requires moving a large number of elements to exclude B, choose A

HTTPS The process of establishing a connection

DNS TCP TLS HTTP
1.HTTP/1.1 Defined Cache-Control The header is used to distinguish the support for caching mechanism , Both request headers and response headers support this property . 2.Last-Modified： A weak verifier . It's weak because it's only accurate to one second . If the response header contains this information , The client can bring... In subsequent requests If-Modified-Since To verify the cache . 3.Etags： A strong verifier for caching . If the response header of a resource request contains ETag, The client can take it in the header of subsequent requests If-None-Match Header to verify the cache .

Javascript Execution engine

Node.js Of Buffer Type objects are created without memory allocated to V8 Pile it up .

ECMAScript 2015 The execution engine needs to be implemented EventLoop Mechanism 
V8 As the most advanced Javascript Execution engine , All code can be optimized during execution .
Node.js adopt V8 Achieve asynchrony I/O.
Node.js Of Buffer Type objects are created without memory allocated to V8 Pile it up .
Chakra yes Firefox embedded Javascript Execution engine .
 When the code is correct , Garbage collection will not lead to memory can not be recycled .

Browser cache

1. indexDB;
2. localStorage;
3. sessionStorage;
4. applicationCache;
5. Cache API
   File System API It's file system related API

cookie
adopt JavaScript Set up Cookie, If you don't specify expires（ Expiration time ）, that cookie The expiration time will be during the session , in other words , At this time cookie Is and session The equivalent of , The only difference is this cookie Is stored in the client's memory ,Session It is stored in the memory of the server