Chapter I Basic Qualities
1. Binary tree + traversal
Properties of binary trees: Property 1: The number of nodes on the i-layer of a binary tree is 2I −12^{i-1} 2I −1(I >=1) Property 2: the depth of a binary tree is K −12^{k-1}2k−1 (k>=1) property 3: The depth of a binary tree is K −12^{k-1}2k−1 (k>=1) The height of a binary tree containing n nodes is at least LOG2n +1log2n+ 1Log2n +1 Property 4: In any binary tree, if the number of terminal nodes is N0N_0N0 and the number of nodes with degree 2 is N2N_2n2, then N0N_0N0 = N2N_2N2 +1
Complete binary tree: in a binary tree, only the lowest two nodes can have a degree less than 2, and the lowest leaves are concentrated in several positions to the left. If the total number of nodes in a complete binary tree is N, then the leaf nodes are equal to n/2 (if n is even) or (n+1)/2 (if n is odd).
Foreorder traversal: root node -> left subtree -> right subtree in order traversal: left subtree -> root node -> right subtree in order traversal: left subtree -> right subtree in order traversal: left subtree -> right subtree in order traversal: left subtree -> right subtree in order traversal: left subtree -> right subtree in order traversal: left subtree -> right subtree in order traversal: left subtree -> right subtree in order traversal: left subtree -> right subtree in order traversal: left subtree -> right subtree in order traversal: left subtree -> right subtree in order traversal: left subtree -> right subtree -> root node
② Known pre-order traversal, post-order traversal ————> find in order traversal key: pre-order traversal first for the root node. Important: the root node is at the end of the post-order traversal. Pre-order traversal and post-order traversal have in common: the left subtree is immediately followed by the right subtree
Pre-order traversal: AEBDC post-order traversal: BCDEA A is the root node, ebDC are either left subtrees or right subtrees e is the root node of the subtree, B is the left subtree, dc is the right subtree (where D is the root node)
A is the root node, left subtree B, right subtree CDFGHE in the right subtree C is the root node, left subtree DFGH, right subtree E in the left subtree D is the root, then F is the root of the left subtree or right subtree, G left H right middle order traversal BADGFHCE or BAGFHDCE
③ Known in order traversal, after order traversal ————> before order traversal key: after order traversal for the root node.
Chapter 2 CSS basics
1. The CSS selector
| ——- Selector type | ——- Usage |
|---|---|
| The id selector | #id attribute value {} |
| Class selectors | .class attribute value {} |
| Element selector | Tag name {} |
| Wildcard selector | * |
| Intersection selector | Selector 1 selector 2 selector 3 selector n{} |
| Grouping of selectors (union selector) | Selector 1, selector 2, selector n{} |
| Child element selector | Parent element > child element {} |
| Descendant element selector | Ancestor descendant {} |
| Here’s a sibling selector | Current element + next sibling element {} |
| All the sibling elements below | Current element ~ sibling element {} |
| Property selector | Tag name [attribute name] — Select the element p[title] with the specified attribute Tag name [attribute name = attribute value] — Select the element p[title= ABC] with the specified attribute and attribute value Tag name [Attribute name ^= attribute value] – Selects the element whose attribute value begins with the specified attribute value Tag name [Attribute name $= attribute value] – Selects the element whose attribute value ends with the specified attribute value Tag name [attribute name *= attribute value] – Selects the element whose attribute value contains a value |
2. The display properties
| — — — — — – | — — — — — – | —— center Settings |
|---|---|---|
| Block Block-level elements | ① Fill a row The width and height can be set. |
margin:0 auto; There is no content and no width. It cannot be centered. |
| Inline inline element | ① Does not occupy a full line ② The width and height cannot be set. The content determines the size and space. |
Text-align :center; The text is centered, and the inline elements are centered along with the content. |
| Inline-block Inline block element | ① Does not occupy a full line The width and height can be set ③ The content determines the space. |
|
| none | ① Elements are not displayed ② Element space is not reserved. Unlike the visibility: hidden ③ The element structure is the same as v-show in Vue |
|
| inherit | Specifies that the value of the display attribute should be inherited from the parent element. |
3. Float + absolute positioning
| floating | Absolute positioning | |
|---|---|---|
| use | float:left; float:right; |
position:absolute; |
| The same characteristics | ① Leave the document flow, make room, and overwrite the following non-floating elements. ② The inline elements become block elements. ③ The previous non-floating elements are not overwritten. The floating element is not removed from the parent element by default. |
① Leave the document flow, make room, and overwrite the following non-floating elements. ② The inline elements become block elements. ③ The previous non-floating elements are not overwritten. The floating element is not removed from the parent element by default. |
| Different characteristics | Floating elements do not overlap and follow the previous floating element. ① There is no horizontal equation. (2) Offset positioning cannot be used unless relative positioning assist is enabled. |
If the offset is not set, the position of the element does not change. Multiple elements that contain the same block will overlap if the offset is not set. You can use the top,left,right,bottom offsets to locate the location without crowding other elements. (2) Position relative to its containing block (the ancestor element that recently turned on relative positioning). ③ Horizontal equation: Left +margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = the width of the contained block Top +margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom+bottom = the height of the contained block |
| Horizontal center | Float :left, add relative position,left:50%, margin-left:- own width. (CSS3’s transform:teanslateX(-50%) can not know its own width) | Method 1: add relative positioning,left:50%, and then margin-left:- own width. (CSS3’s transform:teanslateX(-50%) can not know its own width) Left :0,right0,margin:0 auto, since left and right are auto by default, set the equation to be true. |
| Pay attention to the point | Margin: 0 auto; In this case, the horizontal equation is not mandatory, and auto is invalid. ② Must have width, otherwise it is auto. |
① Must have width, otherwise it is auto. |
4. Clear the influence of floating (height collapse)
Block Formatting Context (BFC) Block Formatting environment
The BFC is an implicit property in CSS that enables the BFC to be turned on for an element that becomes a separate layout area.
BFC layout rules
① The internal boxes will be placed vertically, one after the other. ② The vertical distance of Box is determined by margin. Margins of two adjacent boxes belonging to the same BFC will overlap. ③ The left side of the margin box of each element touches the left side of the border box containing the block (for left-to-right formatting, otherwise the opposite). This is true even if there is a float. ④ The BFC area does not overlap with the float box. The BFC is an isolated container on the page, and the child elements inside the container do not affect the outside elements. And vice versa. ⑥ When calculating the height of the BFC, the floating element is also involved in the calculation
Elements open BFC features:
① Will not be overridden by the previous float element. ② Margins of child and parent elements do not overlap. ③ When enabled, it can contain floating child elements.
| The solution | Problem: The height of the parent element auto is propped by the child element, while the child element floats and the parent element collapses. |  |
| Float the parent element (not recommended) | The parent element becomes a floating element, the width doesn’t satisfy the equation, so it doesn’t dominate the line, although the height does have some effect. |  |
| Setting the parent element as an inline block element (not recommended) | The parent element is an inline block, the horizontal equation is not mandatory, and the width is the content width |  |
| Set element overflow to non-visible (Scroll bar auto Hidden) | Overflow: Hidden works better, and auto works as well. |   |
| Clear floating by adding content | Use pseudo-elements ::after{content: “; display: block; clear: both; } |
Chapter three JS foundation
1. Cast type
Knowledge is involved: Wrapper classes give us three wrapper classes in JS that can convert data from basic data types into objects. String() – Can convert a String of primitive data type to String Number() – can convert a Number of primitive data type to Number Boolean() – Can convert Boolean values of basic data types to Boolean objects
When you call properties and methods from values of some primitive data type, the browser temporarily uses wrapper classes to convert them to objects and then calls the properties and methods of the object. After the call, it is converted to a primitive data type.
When called as a constructor (with operator new), Boolean() converts its argument to a Boolean value and returns a Boolean object containing the value.
When called as a function (without the operator new), Boolean() simply converts its argument to a raw Boolean value and returns that value.
| Strong to a String | Strong to Number | Strong converted to Boolean |
|---|---|---|
| Method obj.toString() : Converts the value of an object to a string Usage: arrayObject.toString() booleanObject.toString() dateObject.toString() NumberObject.toString() stringObject.toString() ① Both null and undefined will return an error “Uncaught TypeError: Cannot read property ‘toString’ of null” ② Arrays are concatenated into strings by commas. Note:2. ToString () is an error if used in this way, because the Number follows the dot, the js engine will parse 2., box it to Number, and then report an error. Be sure to do the following 2.. ToString (), 2.toString (), (2).toString() |
ParseInt (String, radix): Parses a string and returns an integer. (1) You can extract valid integers from a string and convert them to a Number ② Strings that begin with a letter return NaN directly The parseFloat(string) function parses a string and returns a floating point number. |
Boolean(object) Converts an object value to a Boolean type. NaN, 0, null, null, undefined are all changed to false. |
| String(object) : Converts the value of an object to a String. Null converted to string ‘null’ ②undefined is converted to string ‘undefined’ |
Number(object) : Converts the value of an object to a Number ① A string of pure digits, for example, ‘123’, is converted to the number type 123. ② Undefined and impure numeric strings, arrays, etc., into NaN. ③ Empty string and null, converted to number type number 0. ④ True and false are converted to 1 and 0 |
2. Determine the type
| typeof | instanceof | = = = | Object.prototype.toString.call() | isArray() |
|---|---|---|---|---|
3. Comparison operation
The relational operator comparison performs an implicit type conversion and returns true if the relationship is true. Null is true compared to undefined, and false compared to any other type. NaN is false when compared to any type, including itself. ③ Compare the character encoding of a string with that of a string. ④ Other types, implicit conversion to digital comparison.
4. Methods in arrays and methods associated with arrays
| push(newelement1,newelement2, . ,newelementX) |
Adds one or more elements to the end of the array and returns the new length. | Change the original array | You can have multiple arguments, multiple elements to add. |
| pop() | Removes and returns the last element of the array. | Change the original array | |
| shift() | Removes the first element from an array and returns the value of the first element. | Change the original array | |
| unshift(newelement1,newelement2, . ,newelementX) |
Adds one or more elements to the beginning of the array and returns the new length. | Change the original array | |
| slice(start,end) | Returns the selected element from an existing array. | Don’tChange the original array | Start mandatory, end optional (this element is not included) |
| splice(index, howmany, item1,….. ,itemX) |
Add/remove items from the array, and then return the deleted items. | Change the original array | Index must, howmany must, and the following parameters are optional. The first parameter defines where new elements should be added (concatenation). The second parameter defines how many elements should be deleted. The remaining parameters define the new elements to be added. |
| sort(sortby) | Sort, sortby must be a function, optional | Change the original array | Two arguments. The first argument is the value after the array and the second argument is the value before the array. The return value <0 is exchanged in order, and the return value >=0 is not exchanged. |
| reverse() | Reverses the order of the elements in an array. | Change the original array | |
| Methods in the Math utility class, Find the maximum and the minimum |
Math.max. Apply (null,[1, 2, 3]) equals math.max (1, 2, 3). Math.max. Apply (null,[1, 2, 3]) equals math.max (1, 2, 3). | ||
| concat(arrayX, arrayX, . ,arrayX) |
Used to concatenate two or more arrays and return a copy of the concatenated array. | Don’tChange the original array | |
| forEach() | Call the function (callback function) once for each array element. | The function takes three arguments: item value, item index, and the array itself | |
| map() | Create a new array by performing a function on each array element, not on an array element that has no value. | Don’tChange the original array | The function takes three arguments: the item value the item index array itself. When the callback function uses only the value argument, the index and array arguments can be omitted. |
| filter() | Creates a new array containing array elements that pass the test (the function returns true) | Don’tChange the original array | The function takes three arguments: item value, item index, and the array itself |
| reduce() | Run functions on each array element to generate (decrement it) a single value, working from left to right in the array | Don’tChange the original array | The function takes four arguments: the total (the value of index 0 or the previously returned value) the item value (starting with index 1), the item index, and the array itself |
5. Array related applications (Array rearrangement)
| A variety of applications | Js function program picture (for the sake of beauty on their own hand play it) |
|---|---|
| An array of rearrangement |  |
6. Various functions (anti-shake + throttling)
| Function types | The principle of | code |
|---|---|---|
| Image stabilization function | SetTimeout is used to change multiple triggers into one trigger within a certain period of time. Arguments (note that arrow functions do not have their own this and arguments) The code on the right realizes two kinds of anti – shake: (1) the first click immediately execute, after a period of time click invalid. ② The first click is also delayed. |
 |
| Throttling function | Reduce the trigger frequency by a certain amount of time |  |
Chapter 4 ES series
1. Modularity (ES6)
Modularity makes it easier to manage dependencies between modules, and more dependent on module maintenance. Mainstream modularity:
| CommonJS | AMD | CMD | |
|---|---|---|---|
| There are | node.js | require.js | sea.js |
| The characteristics of | For dependent modules, AMD is ahead of schedule. Rely on the front. | For dependent modules, CMD is deferred execution. Rely on proximity. |
2. Array. Prototype. Includes (ES7)
Returns Boolean to check if an element is contained in an array.
3. Async and await (ES8)
The combination of the two grammars makes asynchronous code behave like synchronous code.
Async function: ① Return a promise object (if you return a promise object, then you can set the state of success or failure. If it returns anything else, it becomes a successful Promise object; If you throw a new Error(‘ something went wrong ‘), you return a failed Promise. ② The result of the promise object is determined by the return value of the async function. Await function: ① Await must be written in async function. ② The expression on the right of await is usually a promise object. ③ Await returns the promise success value. (4) Await the promise fails, and an exception will be thrown. Catch Catches an exception.
Chapter 5 Browser Global
1. The browser executes the timeline
To get a head start on parsing and asynchronous loading ———— When the browser gets an HTML file, it loads parsing from top to bottom:
① Browsers parse HTML into a DOM tree, which is a deep traversal process: all children of the current node are built before the next sibling of the current node is built. 2. Parse the CSS into CSS RuleTree. ③ RenderTree is merged according to DOM tree and CSSTree. (RenderTree records the CSS definition of various nodes and their dependencies) (4) the browser can already know to have a web page which nodes, can calculate the position of each node in the screen, and then traverse the render tree, and use the UI layer to draw each node (rendering steps will be divided into three smaller steps) layout: Paint: After determining the size and position of the nodes in the tree, you can paint a composite layer of nodes. When the nodes in the rendering tree are doodled, a bitmap is generated, which the browser transfers from the CPU to the GPU.
Js synchronous loading:
<script src="tool.js"></script>
Copy the codeAsynchronous JS loading: The js of a development aid class, such as some libraries, does not manipulate the DOM behavior, and we do not want it to block subsequent parsing processing.
Asynchronous loading is also called non-blocking loading. When the browser downloads JS, it continues to process subsequent pages. ① Defer will not be executed until the DOM document has been fully parsed. All defer scripts are guaranteed to be executed in sequence, and this property is only available in IE
<script src="tool.js" defer="defer"></script> Copy the code② Async async property is new to HTML5,IE9 can execute the above, more common. However, it will be executed immediately after downloading, and there is no guarantee that the scripts will be executed in order. They will complete before the onLoad event.
<script type="text/javascript" src="demo.js" async="async"></script> Copy the code
| The order | |
| Create a Document object and start parsing the Web page. | This stage document.readyState= ‘loading’ |
| Link external CSS encountered | Create a thread, load asynchronously, and continue parsing the document |
| External SCRIPT JS encountered and async, defer not set | The browser loads synchronously, blocks, waits for the JS to load and execute the script, and then continues parsing the document |
| An external SCRIPT JS is encountered and async and defer are set | The browser creates a thread that loads asynchronously and continues parsing the document; For scripts with async properties, the scripts are executed immediately after loading. For the scripts for the defer property, they are loaded asynchronously but executed lazily. (Do not use document.write() asynchronously, because calling document.write() when the entire document is parsed will empty the previous document flow); |
| With img etc. | The DOM structure is parsed normally, then the browser asynchronously loads SRC and continues parsing the document. The img tag hangs directly on the DOM tree before SRC is loaded. |
| When the document is parsed (domTree is built, not loaded) | Document. The readyState = ‘interative’ |
| After the document is parsed | All scripts that set defer are executed sequentially (reality is not sequential, as explained in the JS elevation); |
| The Document object fires the DOMContentLoaded event | This marks the transition from synchronous script execution to event-driven execution. |
| When all asynchronous scripts have been loaded and executed (img pages have all been loaded and executed) | Document. readyState= ‘complete’,window triggers load event; |
2. Built-in object + Host object + custom object
| Built-in objects | The host object | Custom object |
Chapter 6 HTTP basics
1. Domain Name System (DNS)
| DNS | |
|---|---|
| understand | It consists of a domain name server and a domain name server. It stores the domain names and IP addresses of all hosts in the network as a distributed database mapping domain names and IP addresses. |
| role | Mapping between domain names and IP addresses. |
| run | Most of them run on UDP and have port 53. |
2.OSI 7-layer protocol model and 5-layer protocol model
| OSI seven layer protocol model | Five layer protocol model | |||
| Application Layer | The application layer | Directly services the user’s application processes, such as E-mail, file transfer, and terminal emulation. There are many application layer protocols in the Internet, such as HTTP protocol supporting world Wide Web application, SMTP protocol supporting email, FTP protocol supporting file transfer, DNS, POP3, SNMP, Telnet and so on. |
The five-layer protocol is only the synthesis of OSI and TCP/IP, and the actual application is still the four-layer structure of TCP/IP. The next two layers can be called the network interface layer for convenience. InterProcess Communication (IPC) refers to the dissemination or exchange of information between different processes. There are pipes (including nameless pipes and named pipes), message queues, semaphores, shared storage, sockets, Streams, etc. Socket and Streams support two IPC processes on different hosts. |
|
| Presentation Layer | ||||
| Session Layer | ||||
| Transport Layer | Transport layer | Responsible for providing services for communication between processes in two hosts. Because a host can run multiple processes at the same time, the transport layer has reuse and reuse capabilities. The transport layer mainly uses the following two protocols: (1) Transmission Control Protocol (TCP) : connection-oriented. The unit of data Transmission is packet segment, which provides reliable delivery. (2) User Datagram Protocol (UDP) : Connectionless. The unit of data transmission is the User Datagram. Reliable delivery is not guaranteed. |
||
| Network Layer | The network layer | (1) Responsible for providing communication services for different hosts on the packet switching network. When sending data, the network layer encapsulates the packet segments or user datagrams generated by the transport layer into packets or packets for transmission. In TCP/IP architecture, packets are also called IP datagrams, or simply datagrams, because the network layer uses the IP protocol. (2) Select an appropriate route so that the packets transmitted by the source host transport layer can find the destination host through the router in the network. |
||
| Data Link Layer | Data link layer | When sending data between two neighboring nodes, the data link layer assembles THE IP datagram handed over by the network layer into framing, and transparently sends the data in the frame over the link between the two neighboring nodes. | ||
| Physical Layer | The physical layer | The units of data transmitted at the physical layer are bits. The job of the physical layer is to transparently transmit the bitstream. | ||
3. HTTP explanation
| concept | HTTP (Hypertext Transfer Protocol) is a stateless, application-layer protocol based on the request and response pattern, usually based on TCP connections. | Request and Response | Only the client initiates the request and the server responds. The server cannot proactively deliver messages to the client. |
| stateless | Each request from the client does not matter; they are independent | ||
| The underlying | The underlying implementation is based on TCP. | ||
| request | It consists of three parts: request line, message header and request body. | Request: Method URL protocol/version |
Methods: 1.GETRequests the resource identified by the request-URI 2.POSTAppend new data to the resource identified by the request-URI 3.HEADRequest a response message header for the resource identified by request-URI (4)PUTThe requesting server stores a resource and identifies it with a request-URI 5.DELETERequests the server to remove the resource identified by request-URI 6.TRACEThe request server sends back the received request information, mainly for testing or diagnostics All landownersCONNECT Reserved for future use todayOPTIONS Request queries about server performance or resource-related options and requirements |
| The message header | |||
| Request body | |||
| The response | It consists of three parts: status line, message header and response body | The status line: Version status code A textual description of the status code |
The status code consists of three digits. The first number defines the category of the response and has five possible values: 1XX: Indicating message – indicating that the request has been received and processing continues 2xx: Success: The request is successfully received, understood, or accepted 3xx: Redirect – Further action must be taken to complete the request 4XX: Client error – The request has a syntax error or the request cannot be implemented 5xx: Server side error — the server failed to fulfill a valid request |
| The message header | |||
| In response to the body |
Chapter 8 Comprehensive Application (Various Types + Steps)
1. The round figure
| describe | steps | Code url | The picture |
| Native JS implementation (UL + absolute positioning) is too cumbersome, just look at it | ① Picture of package with label A in large container UL, LI. 【A label wraps the picture,a label is not supported by the picture, there is a gap in the bottom, because the baseline baseline is caused by line-height.】 ② UL size is the size of picture. (【Fixed height can be set directlyIf ul is set to overflow: Hidden, do not worry, BFC is enabled. 【If not set, li adopts absolute positioning to prevent ul height collapse. BFC has no effect on it. This can only be done in JavaScript: get the height of an absolutely positioned child element and set it to the parent element.】 ③ Li turns on absolute positioning, stacking together, no hierarchy is set, the bottom element is stacked on top. ④ Js change the z-index=1 of li hierarchy to be displayed. ⑤ Round the dot on the graph, div container wrapped a tag. |
github |  |