Basic knowledge of front-end development-summary
1. HTML
- Commonly used meta headers
The meta tag in html is always located in the head tag. It is used to define
the attributes of some metadata about the page. The two attributes属性名=属性值of the
meta tag are defined in the form of name: name (page description information), http-equiv ( http header information)
- The name attribute
(1) keywords (keywords)
(2) description (page content description)
(3) author (author)
(4) viewport (viewport)
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scaleable=no">
2. http-equive attributes
(1) content-type (page character set setting)
(2) expires (term, webpage expiration time)
(3) pragma (cache mode)
(4) refresh (refresh)
(5 ) Set-cookie (cookie setting)
(6) window-target (display window setting)
- Understanding the semantics of tags
(1) Clear page structure
(2) Facilitate team development and maintenance
(3) Support more devices (for example: screen readers)
(4) Benefit SEOUse the non-semantic labels div and span as little as possible; when the semantics are not obvious, you can use div or p, try to use p, because p has upper and lower spacing by default, which is beneficial to compatible special terminals;
do not use pure Style tags, such as: b, font, u, etc., use css settings instead. The text that needs to be emphasized can be included in the strong or em tags (browser preset styles, you can use CSS to specify them without using them), strong default style is bold (do not use b), em is italic (do not use i);
use In the form, the caption should be caption, the header should be the head, the body should be surrounded by tbody, and the tail should be surrounded by tfoot. The header and the general cell should be distinguished, the header is th, and the cell is td; the
form field is wrapped with the fieldset tag, and the legend tag is used to explain the purpose of the form; the description text corresponding to each input tag needs to use the label tag , And by setting the id attribute for the input and setting for = someld in the lable tag to associate the description text with the corresponding input.
HTML5 added some semantic tags
- HTML 5 new capabilities
Painting canvas element
audio, video tag
localStorage (local data persistent storage, even if the browser is closed, the data also exists)
a series of semantic tags, such as: header, nav, article, section,
sider , footer linear gradient (grandient)
border Border-radius
shadow
- Knowledge of HTML rendering analysis (for example: why CSS is put in front, JS is put in back; how to understand parallel loading and serial execution)
- CSS must be placed in front of the HTML body tag, which is the head tag.
Because of this, the browser will first read the CSS style and prepare the style file. Then read the structure content in the body tag. At this time, while rendering the DOM element, the style is added.
If you put CSS behind, there may be a white screen problem (IE, Chrome), or there may be no style flashing (Firefox)- JS should be placed behind HTML, that is, before the end tag of the body.
Because when loading JS, it will block all other activities, including: downloading of other resources and rendering of the page. If the user's network speed is very slow or the JS file is too large, the loading time may be relatively long. At this time, it may give the user that the page cannot always be brushed out, and the user experience will be very poor. Therefore, to put it behind, first load HTML and CSS, after the static page comes out, then read and load JS, let the page move.- CSS blocking: When CSS is placed before JS, CSS blocking will occur (because, in order to maintain the order of CSS and JS in HTML, the browser will load JS after loading CSS, and loading JS has blocking other resources to download
Because of the characteristics of CSS, CSS blocking will occur. When JS is placed before CSS, there will be no CSS blocking) 4.JS blocking: no matter where JS is placed, it will block the download of other resources. The difference is that when placed in the head tag of HTML, it will prevent the loading of other resources and the rendering of the page; and placed behind HTML, that is, the end tag of the body, will only block the loading of subsequent resources.
2. CSS
- How to write better CSS,
(0) reset (initialization style sheet)
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
(1) If the level should not be too deep,
generally it should not exceed 3 levels. If the hierarchy is too deep, the query> DOM node will consume time and resources; in the process of browser rendering page>, the association between the DOM tree and the CSSOM tree will be higher; the CSS code is less readable.
(2) When to use ID and when to use class
only elements with an independent style are suitable for id, and elements with the same style owned by> multiple elements are suitable for> class.
(3) How to split the organization
Try to use CSS external style files, less use inline> style and internal style.
- Box model
Box models include IE box model and W3C box model (standard box model).
Whatever it is, there are: content (content), padding (margin), border (margin), margin (margin)
difference: In the
W3C box model, the width of the element refers to the width of the content
IE box In the model, the width of the element refers to (width of content + width of padding on both sides + width of border on both sides)By setting the box-sizing property, you can determine how the element size in the box model is calculated
/* box-sizing 的默认值是content-box。
尺寸计算公式：width = 内容的宽度，height = 内容的高度。*/
。contentBox{
box-sizing: content-box;
}
/* 推荐使用border-box。
width = border + padding + 内容的 width，
height = border + padding + 内容的 height。*/
.borderBox{
box-sizing: border-box;
}
- Very common knowledge of CSS3
(1) such as CSS3 animation(2) Flexible layout
/* 弹性盒子的一般使用方法 */
.container{
display: -webkit-flex;
display: flex;
}
.flex1{
-webkit-flex: 1;
flex: 1;
}
.flex2{
-webkit-flex: 2;
flex: 2;
}
/* 弹性盒子实现元素居中 */
.center{
height: 100px;
-webkit-align-item: center;
align-item: center;
-webkit-justify-content: center;
justify-content: center;
}
3. JavaScript
- Event model
There are three event models in JS: DOM0 event model (original event model), DOM2 event model, IE event model
(1) DOM0 event model
Features:
- No incident spread. Once the event is triggered, the event processing function will be executed immediately.
- Only one event handler for one type of event can be bound to a DOM element. If two event handlers are bound for the same event, the latter event handler will overwrite the previous one.
- Event handle name: on + event name
<div id="myDiv" onClick="alert('hello world')">myDiv</div>
document.getElementById('myDiv').onClick = function(e){
alert(e);
};
// 移除事件处理程序
document.getElementById('myDiv').onClick = null;
(2) DOM2 event model
Features:
- Multiple event handlers can be bound to the same event on a DOM element
- The event will spread
- Method:
[dom] .addEventListener ([event], [function], [true / false])-> Bind event listener
[dom] .removeEventListener ([event], [function], [true / false])- -> Remove event listener
event.stopPropagation ()-> Cancel event bubbling
event.preventDefault ()-> Cancel event default behavior
DOM2事件模型中，事件传播被分为3个阶段: capture stage (unspecific elements-"specific target elements), in the target stage (Reaching the target element), bubbling stage (specific elements-"non-specific elements")
The third parameter of the method in DOM2 specifies: whether to call the event handler in the capture stage, the default is false The event processing function is called during the bubble phase.
(3) IE event model
Features:- A DOM element can bind multiple event handlers for an event
- The call of the event handler is in the event bubbling phase
Method:
[dom] .attach ([event], [function])-> Binding event
[dom] .detach ([event], [function])- > Remove event
- Closure
Refers to: functions that can access variables in the scope of another function. The easiest way to create a closure is to create another function inside a function.
Features:
- Internal functions can access variables of external functions, but not vice versa.
- The returned internal function saves state.
Uses:
There are two maximum uses, one is to read the variables inside the function, and the other is to keep the values of these variables in memory at all times.- Return a function to delay execution;
- Simplify multi-parameter functions into single-parameter functions;
- Break through the scope chain and save the function state;
- …
使用闭包的注意点
1) Closures will cause the variables in the function to be saved in memory, and the memory consumption is very large, so the closure cannot be abused, otherwise it will cause webpage performance problems and may cause memory leaks in IE. The solution is to delete all unused local variables before exiting the function.
2) The closure will change the value of the internal variable of the parent function outside the parent function. So, if you use the parent function as an object, the closure as its public method, and the internal variable as its private value, you must be careful not to Randomly change the value of the internal variable of the parent function.
- Prototype chain
Each instance object (object) has a private property (called proto ) that points to its prototype object (prototype). The prototype object also has its own prototype object, layer by layer until the prototype object of an object is null. By definition, null has no prototype and serves as the last link in this prototype chain.
Almost all objects in JavaScript are instances of Object at the top of the prototype chain.
- Browser's analytical rendering principle
Briefly:
- Parse HTML tags to generate DOM tree;
- Analyze CSS rules and generate CSS rule trees;
- Parse JS files and operate CSS rule tree and DOM tree according to CSSOM API and DOM API;
- Associate the DOM tree with the CSS rule tree to construct a rendering tree (some invisible nodes will be removed from the rendering tree);
- Calculate the geometric structure (position, size, etc.) of the nodes of the rendering tree (the process of layout and reflow);
- Call the API of the operating system's Native GUI to render the page.
The big work flow of the browser:
[External image transfer failed, the source site may have an anti-theft chain mechanism, it is recommended to save the image and upload it directly (img-fBEYpcSA-1587351247775) (https://coolshell.cn/wp-content/uploads /2013/05/Render-Process-768x250.jpg)]
Reference article: Reference article
- DOM tree, rendering tree, rearrangement redraw, layered rendering, why too many DOM operations will affect performance, etc.
(1) DOM tree: DOM is an API for HTML and XML documents. DOM can describe any HTML document and XML document as a hierarchical node tree.
Some common methods of manipulating DOM:
document.documentElement();
document.head();
document.body();
[context].querySelector();
[context].querySelectorAll();
document.getElementById();
[context].getElementsByTagName();
[context].getElementsByClassName();
[context].getElementsByName();
(2) Rendering tree:
Generally speaking, in the process of parsing and rendering the page file by the browser, after the file is parsed, the DOM tree and the CSS rule tree are associated to construct the one used for subsequent page rendering The tree is the rendering tree.
- The rendering tree is not equivalent to the DOM tree, because some nodes like header or display: none are not necessary to be placed in the rendering tree.
- The CSS rule tree is mainly used to complete the matching and attach the CSS rules to each node of the rendering tree (that is, the DOM node). DOM node + CSS rule = node of the rendering tree, which is Frame.
(3) Repaint and rearrangement:
repaint (repaint): a part of the screen needs to be repainted. For example: the CSS background color of an element has changed, but the element's geometric size has not changed.
reflow (layout / rearrangement): means that the geometric size of the element has changed (part or all of the rendering tree has changed), and needs to be re-verified and calculated.HTML的布局是基于流式布局的，所以，如果某元素的几何尺寸发生了变化的话，就会需要重新布局，这也就是 reflow
There are several situations where the page will be redrawn or rearranged:
- Add, delete, modify DOM nodes;
- Move the location of the DOM;
- Modify the CSS style;
- Rolling window
- Modify the default font of the page;
- …
/* 触发重排 reflow */
display: none;
/* 触发重绘 repaint */
visibility: hidden;
(4) Layered rendering:
(5) Why too many DOM operations will affect performance:
DOM operations will trigger the redrawing or rearrangement of browser pages. These two operations are extremely damaging to the performance of the browser, especially the rearrangement.
4. HTTP
- Common HTTP status codes
(1) 1xx news
- 100 The client can continue to send requests
(2) 2xx success
- 200 The request has been successfully processed and the requested resource has also been returned
- 204 no content, the request has been successfully processed, but no content is returned
(3) 3xx redirect
- 300 The requested resource can be obtained from multiple addresses
- 301 redirect, the resource is permanently removed, the client should no longer continue to access the resource through the url
- 302 Redirect, the resource is temporarily removed, the URL may still be used in the future
- 303 see other, the requested resource is in another URI, you should use GET to get the resource
- 304 not modefined, browser can use local cache
(4) 4xx client error
- 400 bad request, the request sent by the client cannot be understood
- 401 unauthorized, indicating that the sent request requires HTTP authentication information or the authentication has failed
- 403 forbidden, server refuses to provide service
- 404 not found, resource not found
(5) 5xx server error
- 500 internal server error, server internal error
- 503 server unavaliable, service is temporarily unavailable
- The difference between different request types
(1) GET request
Request resources from the server and retrieve data from the server.
(2) POST request
to submit data to the server.
(3) PULL request
pushes data to the server, the amount of data submitted is usually more than the POST request.
(4) PUT request
to update data to the server. Update the resource by uploading the ID of the existing resource and the new entity to the server with a PUT request.
(5) DELETE request
Delete the specified resource on the server
(6) HEAD request The
HEAD request is similar to the GET request, but only returns the corresponding header, without a specific response body.
(7) OPTIONS request
OPTIONS allows the client to request a request method supported by a service. The corresponding response header is Allow, which lists the supported methods very concisely. The following is the content of the response after the server successfully processed the OPTIONS request:
Allow: HEAD, GET, PUT, DELETE, OPTIONS
(8) CONNECT request is
mainly used to establish a network connection to resources. Once the connection is established, it will respond with a 200 status code and a "Connectioin Established" message.
