1. Reflow and redraw
When the DOM node of the page changes, it will cause the elements to be rearranged. The rearrangement must be redrawn, but the redrawing does not necessarily rearrange the DOM. If only the contents of the page change, the DOM will not be rearranged.
2. Browser rendering process
From the moment we enter the URL in the address bar, the browser will engage multiple processes to render the page (browser process, renderer process, GPU process, web process, plug-in process)
Input to page rendering is divided into two stages: 1. Navigation stage 2. Rendering stage
Check the input URL –> assemble the protocol to form the complete address –> send to the network process to check whether there is a local request cache –> prepare IP and port –> perform DNS resolution –> Wait for TCP to establish a connection (three times shake hands and four times wave) –> server received and processed –> Client process accordingly (e.g. 400,401, 302)) — — — — > > started rendering build a dom tree (nodes) — > pre parsing – – > build cssom – > calculate style — — — — > > layout layered drawing — — > > layer to complete
Look at other people’s websites
From the input URL to page rendering process juejin.cn/post/684490…
Will not answer from entering url to page showing what happened juejin.cn/post/695056…
3. Basic types and reference types of js
Basic datatypes: undefined, null, string, number, Boolean, symbol (ES6) reference datatypes: undefined, null, string, number, Boolean, symbol (ES6) Object, array, date, function, RegExp
Reference types can add properties and methods, but primitive types cannot. Base types are stored in stack memory, and reference types are stored in heap memory.
4. Null and undefined
Null and undefined mean nothing, null is defined but null is returned if the value is null, undefined is returned if it was defined at all. So if a value exists or not, you use it ==undefined, right? To judge.
5. Methods for determining data types
Typeof determines only basic data types
const a=123
console.log(typef(a))
Copy the codeInstanceof is used to determine if a is an instanceof b (testing prototypes)
Const a=[1,2,3] console.log(an instanceof Array) // check whether a is an instanceof b. check whether a's -- proto -- is equal to b's prototypeCopy the codeTostring.call () is the most accurate way to detect reference types
6. The priority of the selector
! Important Superlative > inline elements >id selector >class> class, pseudo class, attribute > tag selector, pseudo element > wildcard *, child element, sibling > inherit none
Juejin. Cn/post / 684490…
7. Styles that CSS can inherit
Inherited: Yes Default inherited properties
Juejin. Cn/post / 684490…
8. Call, apply, bind
Both are changing this to point to the problem. Arrow functions don’t have this to point to. In ES6 this always refers to the object that last called it.
Juejin. Cn/post / 684490…
Juejin. Cn/post / 684490…
The difference between Apply and call is that the call method accepts a list of arguments, while Apply accepts an array of arguments. Can accept multiple parameters. Bind is a binding function that, when called, sets its this keyword to the supplied value and, when called new functions, provides a given sequence of arguments before any supply.
Call /apply/bind must be a Function call, apply, and bind are three methods that hang on the Function object. Only functions have these methods
9. Landing and IFC
A BFC is a block-level format context, which is a separate container on the page, specifying that the child elements within the container do not affect the outside world. Type area!
Application: adaptive two-column layout, solve floating collapse, solve the problem of margin overlap
IFC has no block-level elements, so you can center the elements in an environment by setting them as inline blocks.
GFC grid layout, using display: grid.
FFC is only available on Google and Firefox. Use display: flex, inline-flex to get a flex container.
10. Method of clearing float
www.cnblogs.com/SallyShan/p…
Old driver: Overflow: Heidden clear: both pseudo-element empty box
11. The box model
Box models are divided into weird box model and normal box model. You can use box-sizing to set content-box to normal box. Border-box is a weird box
Width =border+padding+content
Normal box model width=content
12. The middle way
Text-ailgn is used for horizontally centered lines
Vertically, a unique parent phase left: top: 50% 50% magrin – left – own half/half magrin – top – or up and down or so to 0, all margin: auto
Or use Flex layout, display: felx
13.SSR server-side rendering
www.jianshu.com/p/8fbfbe537…
For good user experience and front-end separation, most front-end projects are single-page applications, typically responsible for exporting components in the browser, generating the DOM and manipulating the DOM for user interaction. However, it is also possible to render the same component as HTML strings on the server side, send them directly to the browser, and finally “blend” the static tags into a fully interactive application on the client side, which is server-side rendering. Better SEO optimization, search engines can crawl pages directly using the framework nuxt.js.
Event Loop!!
www.bilibili.com/video/BV1kf… B station explanation video
Js code is executed line by line. When it meets function call, it is pushed into the execution stack, and when it meets setTimeout, it is also pushed into the execution station, but the callback will be put into the message queue, and when it meets promise, it will be put into the execution stack, but the callback method is in the microtask queue. After the execution stack is complete, the promise’s callback is performed to clear the microtask queue before the message queue is executed, which is why a setTimeout of 0 time is printed later than the promise.
15.H5, ES6, CSS3 additions
A, H5
Header, footer, nav, aside, content
2. Enhanced form elements Email and date
3. Audio and video Audio and radio
4. Golocation
5. Drag drop and drag
Canvas can be drawn only by creating a drawing tool.
7. Offline storage. www.jianshu.com/p/30aa3922b…
8. Store cookies, localStorage, and sessionstroage on the Web
· Cookies are small in 4K and can save 50. The latter two can be 5MB.
· Cookies need to be installed and written by themselves. There is no ready-made API, and the expiration time can be set by yourself.
· LocalStroage always exists, seesionStroage closes browser empties.
· Getitem data acquisition, Setitem data storage, removeItem data deletion
· LocalStroage Clear () deletes all clear.
CSS3 is new
1. Pseudo-class selectors
Nth-child () is evaluated from 0
First-child () first
Last-child () is the last
2. Property selector
A [^attr=val] a[*attr=val] valCopy the code3. Color RGBA can directly set the transparent effect
4. Rounded border-radius
5. Box-shadow, text-shadow
6. The gradient
7. Box-sizing attributes: Content-box (normal), border-box (weird)
8. Media query meta, there are many configurations.
9. Animation transition transfrom Translate and the differences between them
An animation is a large animation that uses the name @keyfames{} as a percentage, or from to.
Transition: The following properties, directly write style, transition time, speed curve, delay time.
Transfrom: is used to transfrom graphics.
Translate specializes in movement.
New in ES6
- Const, let, and var
Const and let are new and are used more often now because var has a variable hint.
Const and let are limited by {}, cannot be used after the first one, and cannot define duplicate values.
Function (){} will generate a temporary dead zone.
2. Arrow function () =>{}
Arrow functions do not point to this, nor do arguments objects
3. Extension operators… (Can merge arrays)
a.push(… b)
4. Template string
5. Call and apply change the this point as well as the new difference written above
6. Deconstruct assignments
7. JOSN. The parse () and JOSN stringify ()
8. Array methods set, reduce, filter, some, every, map, sort
16. Array methods
More full array methods www.bilibili.com/video/BV1BZ…
A class array is an object, such as the Arguments object with length, but no array methods. And ul li below list (dom), string (can’t change the length can only use an array with the method of the array. The prototype. The foreach. Call (STR, function (item) {the console. The log (item)}))
Const a = [1,2,3,4,5] // when you add one more comma or delete one of the values, it becomes, Delete a[1] // print [1,empty,3,4,5] consolelog(a[0]) // this value is undefinedCopy the code
Console.dir (Array)/console.log([])
<1>toString method (arrays, objects, functions all have this method)
The toString of an array can strip the [] from the array into a string of any number of dimensions. But it doesn’t work with object inside,
A. Simple type, array flattening.
B. The string split is reversed by the join method
Join takes each item of an array and joins it according to the specified character.
Spilt converts strings into arrays with specified characters
<2> Push, pop, unshift, shift. (Stack method)
Push is followed by one that returns length, console.log(array.push())=length
Pop () =value console.log(array.pop())=value
Unshift adds the following one, which returns length, console.log(array.unshift())=length
Shift (array.shift())=value console.log(array.shift())=value
Const a = [1,2,3] const b = [4,5,6] a.push(4) a.push(5,6,7) a.push(... b)Copy the code<3> reverse order reverse order sort
They’re just upside down, not sorted.
Reverse sorts in reverse order, operates on the original array, and returns the original array
Sort sort, operating on array, returns array bottom is bubbling and insert sort together.
Sort order use www.cnblogs.com/panax/p/110…
out-of-order
<4>concat array concatenation method, using… Can also be
If you have nested arrays inside, you can’t concatenate them. Multi-dimensional array concatenation is recursive concatenation.
<5> The slice and splice methods are used to slice arrays
Slice the first is the interception location and the second is the interception stop location. It’s going to return a number, and you can put negative values in there, so you can compute positions from behind, and you can turn the string into a new array. The original array will not be modified
Splice the first is the position to intercept, several to intercept, and the third is the value to replace. The intercepted position of that element also contains. Full inclusion returns an array and modifies the original array.
<6> Find indexof, lastIndexof, includes, find, findIndex
Searching for this element returns its index (subscript)
The difference is that indexof looks forward and lastIndexof looks backwards
Includes finds elements and returns a Boolean value directly
Find is also a search, which accepts a function that returns the first member that meets the criteria
Findindex is a search that takes a function that returns the index of the first member that meets the criteria
<7> Array new static methods, and methods on the prototype. We’ll talk about that in about 4 or 6 minutes.
Fill three parameters, start position, end position, what to use to cover a segment of the array. Filling method
<8>. Traversal method
A. for b. for C. for D. for
17. Magrin collapse problem and solution
(1) Set the “border” for the parent box. Add the “border” for the outer box and the parent box will not be properly matched (can be set to “border: 1px solid transparent”).
(2) Add overflow: Hidden to parent box
(3) Set the padding value for the parent box
(4) Add position: Fixed for the parent box
(5) Add display: table to the parent box
(6) Add an empty element to the front of the child element using a pseudo-element
18. Deconstruct assignment
www.bilibili.com/video/BV12K…
Exactly matching destruct assignment
When you give a default value, look at it before you deconstruct it
In this case, the key in the object can be abbreviated as well as the value name, and the method can be abbreviated as well
There is no sequential formula for the object.