Basic knowledge (the kind learned in school)
-
The process from browser IP addressing to page rendering completion
- 1. browser build request
- 1.1 DNS domain name resolution to find ip browser cache→system cache→operator cache→root DNS server
- 1.2 Encapsulate http request message at application layer; 1.3 Establish tcp connection at transport layer; 1.4 Data link layer, physical layer;
- 1.3 Establish a tcp connection at the transport layer; 1.4 Data link layer, physical layer;
- 1.4 data link layer, physical layer;
- 2. Web transmission of browser request data;
- 3. The server builds the response;
- 4. Network transmission server response data;
- 5. The browser renders the page;
- 5.1. Create a DOM tree analyzer to analyze HTML elements and build a DOM tree
- 5.2. Create a StyleRules (CSS) CSS analyzer, analyze CSS files and inline styles on elements, and generate a style sheet for the page.
- 5.3. Create a Render tree Associate the DOM tree with the style sheet to build a Render tree
- 5.4. Layout Layout Start the layout to determine a precise coordinate that appears on the display screen for each node on the Render tree.
- 5.5. Draw the Painting Render tree and the node display coordinates, call the paint method of each node to draw them.
- 1. browser build request
-
OSI seven-layer network model
When a browser constructs a request, it encapsulates the message layer by layer (request header body → data segment → group → frame → bit)
Function-related ES6++
foreach()The number of loops of the function is fixed from the beginning
VUE-related
-
Why does VUE3 use proxy instead of deineProperty?
- There are three common ways to do property interception in JS: :defineProperty, getter/setters and Proxies.
- Vue2 can only use defineProperty in 2013.
- There is a problem with the API's interception of arrays. Vue is a set of implementations specifically for array responsiveness.
- In addition, those new and deleted attributes cannot be intercepted
- The defineProperty scheme requires deep recursive traversal of the object to be processed during initialization to completely intercept it, which significantly increases the initialization time.
- Proxy can not only intercept arrays, but also intercept Map and Set;
- Proxy's interception is also a lazy processing behavior. If the user does not access the nested object, then the interception will not be implemented, which improves the initialization speed and memory usage.
-
Why is Vite so fast?
In the process of building a module graph in the bundle mode of Webpack , a large number of file IO, file transfrom, and file parse operations are involved; and in the process of decomposing the module graph, it is necessary to traverse the module graph, file transform, file IO, etc. These operations often consume a lot of time, resulting in slow build speed.
Vite 's unbundle mechanism does not require bundle operations, and the dependencies between source files are completely resolved through the browser's support for the ESM specification. This makes the dev server only need to do some initialization work during startup, and the rest is completely supported by the browser.
The core of the unbundle mechanism:
1. The analysis of dependencies between modules is implemented by the browser
2. The conversion of files is implemented by the middlewares of the dev server and cached
3. No merging and bundling of source files .
Advantages : fast cold start, fast
Disadvantages of hot update : first screen and lazy loading performance decline.
Related Links -
The difference with react
1. Vue is a progressive framework that pays more attention to miniaturization and lightweight. One of the features of Vue is two-way binding, where data and views interact and change each other.
2. React is more inclined to large-scale applications. Like traditional JS, it changes the view by manipulating the DOM.
3. But both use virtual DOM to improve rendering performance -
ref$()Used in vue to get dom-like selectors similar to jquery and native onesdocument.getElementById() -
Priority issues: props first methods second data third computed fourth watch last
VUE source code:
-
Jump to a more detailed summary of the setup writing method in VUE3
Native JS related
- promise
- Cross-domain: If any protocol, domain name, or port number is different from the current page, it will be recognized as a cross-domain request by the browser.
Cross-Origin Resource Sharing (CORS), which allows a server to expose resources that identify an origin (domain, protocol, port) other than its own. The main configuration work is in the backend. - Callback function: the function of the function, that is, the function passed as a parameter to other functions, generally used to handle asynchronous operations
- Anonymous function: As the name implies, a function without a name that cannot be called directly. but can be assigned or passed as a parameter
setTimeout(function(){
console.log('执行了')},1000)
- Arrow function: It is a simplified anonymous function. You can omit function return {}, etc.
setTimeout(()=>console.log('执行了'),1000)
-
netxtick()Get the updated dom content
-
-
The usage and understanding of call() The handwritten foreach()
method in JS can be used in this way, similar to the class in JAVA
function f(){
this.a="1";
}
let a = new f();
a.a//1
The usage and understanding of call()
function f(){
this.a="1";
}
function e(){
f.call(this);//(对象f被添加到了this对象，也就是e对象中)
}
new e().a//1
var s1={
color:'red'};//谁调用this就指向谁，也可以将调用call()方法的对象的this指向改变为()里的对象。
function changeColor(){
console.log(this.color);
}
changeColor.call();//undefined
changeColor.call(s1);//red
Using the prototype chain, handwriting foreach
Array.prototype.toforEach = function(data) {
console.log('toforEach的参数——', data)
// data 就是调用这个函数传入的参数，此时是一个回调函数; 回调函数不会立马被指向，调用的时候才会执行
console.log('this====', this) //[1,2,3] 谁调用toforEach this便指向谁
let array = this
for (let index = 0; index < array.length; index++) {
data(array[index],index,array)
}
}
new Array(1,2,3).toforEach((element, index) => {
console.log(element) // 1 2 3
})
- JS execution mechanism
html5:
- HTML5 has added semantic tags: nav, section, footer...
- Added canvas tag
- Add video and audio tags video, audio
- html5 fully supports css3
- The understanding of the browser kernel
is mainly divided into two parts: the rendering engine (layout engineer or Rendering Engine) and the JS engine.- Rendering engine: Responsible for obtaining the content of the web page (HTML, XML, images, etc.), organizing information (such as adding CSS, etc.), and calculating the display method of the web page, and then outputting it to the monitor or printer. Different browser kernels have different syntax interpretations for web pages, so the rendering effects are also different. All web browsers, email clients, and other applications that edit and display web content require a kernel.
- JS engine: parse and execute javascript to achieve dynamic web page effects
- Inline elements: ab br i span input select strong
Block-level elements: div p h1—h6 from ul ol li - src is used to replace the current element, and href is used to establish a link between the current document and the referenced resource.
CSS related
-
IE box model: margin content(border+padding+content)
-
Standard box model: margin border padding content (margin is not included when calculating width and height)
-
CSS weights
global < label selector < class selector < ID selector < inline style < !important -
CSS selector:
ID class tag adjacent + parent-child > offspring wildcard attribute [] Pseudo-class selector:
id selector (#myid), class selector (.myclassname), label selector (div, h1, p), Adjacent selector (h1 + p), child selector (ul > li), descendant selector (li a), wildcard selector ( ), attribute selector ( a[rel=”external”]), pseudo-class selection Controller (a:hover, li:nth-child(n))
Inheritable attributes: font-size, font-family, color
Non-inheritable styles: border, padding, margin, width, height
Select which child element -
display value
none–hidden (visibility:hidden opacity:0)
inline (by default, the size of a shared line is expanded by the content, and only padding and margin take effect)
block–block element (one line alone, will fill the width of the parent element by default, with a box model)
inline-block - inline block
table - table display
list-item - item list
flex -
The position value
static (default): Arrange according to the normal document flow;
relative (relative positioning): does not break away from the document flow, and refers to its own static position through top, bottom, left, right positioning;
absolute (absolute positioning): refers to the nearest one Parent elements that are not static are positioned by top, bottom, left, and right;
fixed (fixed positioning): the fixed reference object is the visible window. -
CSS3 new features:
elastic box model display: flex;
color transparency color: rgba (255, 0, 0, 0.75);
rounded border-radius: 5px;
gradient background: linear-gradient (red, green, blue);
shadow box -shadow:3px 3px 3px rgba (0, 64, 128, 0.3);
text effects, rotation, scaling, positioning, tilting
Add pseudo-classes and pseudo-elements- p:first-of-type selects every element that is the first element of its parent.
p:last-of-type selects every element that is the last element of its parent.
p:only-of-type selects every element that is the only element of its parent.
p:only-child selects every element that is the only child of its parent. - :hover Add styles to elements that are hovered over
:active Add styles to activated elements
:focus Add styles to focused elements
:link Add styles to unvisited links
- p:first-of-type selects every element that is the first element of its parent.
-
When the overflow property
parameter is scroll, a scroll bar will appear.
When the parameter is auto, a scroll bar will appear when the content of the child element is larger than the parent element.
When the parameter is visible, the overflow content appears outside the parent element.
When the parameter is hidden, the overflow is hidden. -
How to center the div? How to center a floated element? How to center an absolutely positioned div?
- margin: 0 auto;
-
px, em and other units
- Absolute units
cm centimeter, mm millimeter, in inch, px pixel - Relative unit:
em: Relative length unit. The default font size of general browsers is 16px, so 2em == 32px;
rem: the abbreviation of (root em), when rem acts on non-root elements, relative to the root element font size
vw: window width, 1vw=1% of the window width
vh: window height, 1vh=1% of window height
- Absolute units
-
The core idea of Flex
: How does the child element allocate the remaining space of the parent element, and the remaining space = the width of the parent element - the width of the child element. When the width of the child elements is all 0, the remaining space is considered as the width of the parent element
Features: the width of the child element and exceeding the width of the parent element will not be displayed in a new line like floating, but the child elements will be scaled proportionally to ensure that they are all displayed; flexible and grid Floating layout conflicts
common properties of flex parent elements- flex-direction: set the main axis direction row/column
- flex-wrap sets whether the child element wraps nowrap/wrap
- justify-content sets the arrangement of sub-elements on the main axis. center/space-around divides the remaining space equally/space-between first sticks to both sides and then divides the remaining equally
- align-items sets the arrangement of sub-elements on the side axis (single line) center/stretch
- align-content sets the arrangement of sub-elements on the side axis (multiple lines) center/space-around divides the remaining space equally/space-between first aligns the two sides and then divides the remaining flex common properties of sub-
elements - flex defines the number of copies of the remaining space occupied by sub-items *
flex:number / default 0 / - order defines the sorting order of the items
order:number The smaller the value, the higher the front Allow negative numbers Default 0 - The align-self subitems are arranged on the side axis*
`align-self:flex-end property is the same as align-items
GIT
- Git uses the current directory as a unit to save the corresponding warehouse information, branch information, etc.
- git init initializes the root directory git information