,
Tiankeng began to look for internships. I'm not good enough. I'll sum up relevant knowledge while looking at other people's experience.
I HTML/5
II CSS/3
2.1 there are many li tags and the order is not fixed. How to change the last li with class b to red
<ul>
<li class="a" />
<li class="b" />
<li class="b" />
<li class="a" />
</ul>Idea 1: use pseudo class: last child
: last child ， represents the last child element of the parent element.
li:last-child {
background-color: xxx;
}Extension 1: what other common pseudo classes are there
//a label exclusive
:link /*The state when the hyperlink is not accessed. When the mouse is up */
:visited /*Status after hyperlink access */
:hover /*When the mouse is hovering and the mouse is up */
:active /*Activation status: the moment when the mouse clicks */
:focus /* Triggered when the element gets the focus */
//Other pseudo classes
:first-child //Represents the first element in a set of sibling elements
:first-of-type //Represents the first element of a specified type in a set of sibling elements
:last-child //Represents the last element in a set of sibling elements
:last-of-type //Represents the last element of a specified type in a set of sibling elements
:not(selector) //A negative pseudo class used to match elements that do not match the parameter selector
:nth-child //This CSS pseudo class will first find the sibling elements of the current element, and then sort from 1 according to the sequence of positions. The selection result is the collection of the (an+b) th element (n=0, 1, 2, 3...). If an+b is 0, no element can be selected
:nth-of-type //Similar to nth child, except that it only matches elements of a specific type
:nth-last-child(an+b) //Similar to nth child, it counts from the last child element
:nth-last-of-type //Similar to nth of type, except that it starts counting from the last child element
//Pseudo element selector
/* Add content to the text content attribute */
::before {
content: "before";
color: teal;
margin-right: 20px;
}
/* Add content to the text content attribute */
::after {
content: "123456";
color: sienna;
}
::first-letter //Select the first letter of the first line of a block level element, and there is no other content before the line where the text is located
::first-line //Apply a style to the first line of a block level element.
::selection //Used for the highlighted part of the document2.2 there is a layout similar to a table. The border of each cell is 1px, and the border in the middle of adjacent cells is also 1px. How to achieve this? How to select a cell to highlight?
A: Starting from the second column, margin left: - 1px, starting from the second row, maigin top: - 1px; Add z-index = 999.
III JavaScript/ECMAScript
3.1 realize multi parameter addition without changing the original api
If the addition function cannot be realized locally, there are APIs provided by other teams:
await asyncAdd = (a, b, (err, res) => {
Using network request a+b， Result returned successfully res
})Now we need to improve the api and use it to implement an add method to enable it to add multiple arrays.
Idea 1: use arguments to decompose multiple incoming parameters, and use reduce to send them into the api in turn for calculation and return the results.
function asyncAdd(a, b){
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(a+b)
}, 1000)
})
}
async function add(){
let arr = Array.prototype.slice.call(arguments)
const res = await arr.reduce((s, v) => {return s.then((res) => asyncAdd(res, v))}
, Promise.resolve(0))
return res;
}
add(1, 2, 3).then((res) => {
console.log(res)
})IV Basic knowledge of network planning
4.1 front end performance optimization, (which can be realized in practice)
1. Reduce the number of HTTP requests and the size of transmission message: svg diagram, delayed (lazy) loading of pictures, and merging page css/js files.
2. Set up various caching, preprocessing and long connection mechanisms: establish DNS cache, do CDN distribution, and use HTTP2 protocol to realize the coexistence of multiple TCP channels.
3. Performance optimization in Code: reduce closures, avoid using iframe, reduce direct operation on DOM, low coupling and high cohesion, use event delegation, function anti shake throttling, reduce the level of selector and table layout as much as possible
It's too late to see for the time being. Save it first.
https://zhuanlan.zhihu.com/p/181275749Function anti chattering throttling:
Example: prevent the mouse scroll bar from triggering events multiple times (anti shake) and automatically triggering events after a certain time (throttling)
https://segmentfault.com/a/1190000018428170
https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver
https://blog.csdn.net/yiifaa/article/details/75040858