First of all, thanks to the nuggets, the vast sea of people, I met my love here, we met at the gold boiling point, and then get to know each other, know each other, meet each other, fall in love, meet parents, and plan our future together, together, accompany
I’m really grateful, happy, lucky and blessed!
As she is also ready to find a job, so this article is written to my girlfriend, wishing her a good company in advance
HTML + CSS
HTML + CSS interview review refers to north
CSS and JS foundation are very important, some people clearly framework source code can answer, but these basic but prevarication do not understand, so miss a good offer is really a pity, so before the interview must review these basic knowledge
JavaScript based
See this article for more advanced JavaScript information. The content includes data type, type conversion, Set, Map, WeakSet, WeakMap, this, arrow function, closure, deep and shallow copy, prototype chain, inheritance, garbage collection, event loop, etc
JS data type
The latest ECMAScript standard defines eight data types. JavaScript data types and data structures
Basic types: Number, String, Boolean, undefined, null, Symbol, BigInt
Complex type: Object
Event loop
JavaScript execution mechanism
Event loop: In a word, it is the cycle of push to push. Namely: one macro task, all microtasks, render (if rendering is required), one macro task, all microtasks, render…..
Cycle process:
- All synchronous tasks are executed sequentially on the main thread, forming an execution stack (call stack), and asynchronous tasks are placed in a task queue
- When the tasks in the execution stack are completed, check whether the micro-tasks in the micro-task queue are empty and execute them. If the micro-tasks are encountered in the micro-task execution process, add them to the end of the micro-task queue and continue to execute them to complete all the micro-tasks
- After the execution of the micro task, check whether the macro task is empty in the task queue, and then take out the macro task that enters the queue first and push it into the execution stack to execute its synchronization code
- Then go back to step 2 to perform the microtasks in that macro task, and repeat until the macro task is also completed, and so on
Depth copy
Shallow copy: copies only the first layer of the object, and copies the pointer if the key is a reference type. Copy stack does not copy heap
// 1. Expand operator...
letobj1 = { ... obj }// 2.object.assign () merges obj2 into obj1
Object.assign(obj1, obj2)
/ / 3. Written by hand
function clone(target){
let obj = {}
for(let key in target){
obj[key] = target[key]
}
return obj
}
Concat () and slice() with Array methods
let arr1 = [ 1.2, {c:3}]let arr2 = arr1.concat()
let arr3 = arr1.slice()
Copy the code
Deep copy: If the copied key is an object, then the value needs to be copied further, rather than a pointer, so recursion is generally required until all the key values are primitives
Note that when a property references itself, it creates a circular reference, causing stack overflows
To solve the problem of circular reference, you can create an extra storage space to store the relationship between the current object and the copied object. When you need to copy the object, you first go to the storage space to find the copied object, if there is a copy of the object, directly return, if there is no copy, continue to copy, that is solved
// 1. Use serialization and deserialization to create a new block of memory
let obj2 = JSON.parse(JSON.stringify(obj1))
// 2. Handwriting recursion - easy version
function clone(target, map = new Map(a)){
if (typeof target === 'object') { // The reference type continues deep copy
let obj = Array.isArray(target) ? [] : {} // Consider arrays
// Prevent circular references
if (map.get(target)) {
return map.get(target) // If there is a copy record, return it directly
}
map.set(target,obj) // No copy records are stored
for (let key in target) {
obj[key] = clone(target[key]) / / recursion
}
return obj
} else {
return target
}
}
Copy the code
Set, Map, WeakSet, WeakMap
Both sets and maps are strong references and can be traversed, such as for of/forEach
WeakSet and WeakMap are both weak references and more friendly to GC(garbage collection), and neither can be traversed
Set and WeakSet only have key values without key names. Map and WeakMap are collections of key value pairs
Strong and weak: for example: Let obj = {} create a strong reference object by default. If obj = null is used, it will be collected by the garbage collector. If obj is weak, the garbage collector will collect it for you. Less prone to memory leaks
An array of
Several methods change the array: pop(), push(), shift(), unshift(), reverse(), sort(), splice(), fill(), copyWithin()
JS array method overview and traversal method time statistics, not all remember it, but for some common methods to be familiar with and know the difference, such as map() and filter() difference
string
String correlation figure, usage are all in this article JavaScript 28 common string methods and use tips
JavaScript handwritten
Call, bind, apply, freeze, throttle, Promise, deep copy, etc. If you have time, take a look at these. See this list of 22 high-frequency handwritten JavaScript codes
Vue
This piece of knowledge should also be as proficient as possible, it may be that some of the knowledge points are not useful in the work, and the company will not let you write the framework, but how to let others know that you can guarantee the quality and quantity of good development tasks, you need to master the framework
Vue core idea
- Data-driven, view content changes as data changes;
- Componentization, can increase code reuse, maintainability, reflects the high cohesion and low coupling
Vue2 related can see this article: stay up late to summarize 50 Vue knowledge points, all will you are god
Talk about the 9 facts of Vue3 and the 8 types of Vue3 and the 12 types of Vue2 component communication
Vue-router can be seen in the following article: Vue-router interview question summary
Vex5, also known as Pinia, is being written. I will update it in a few days
Every day can see a part, slowly, do not understand the first to skip, know about the first, then to consolidate once on the line
Web + Browser
The process of entering a URL into a page display
This is a really easy question to ask because it involves a lot of knowledge, so be as proficient as you can. Enter the URL into the page to display the front-end architecture knowledge
HTTP related
This is also a high frequency examination point, especially encryption algorithm, signature principle, get and POST difference, common status code, the difference between different versions of HTTP, these several points to consolidate. 20 minutes to help you learn HTTP and HTTPS, and consolidate your HTTP knowledge
TCP/UDP
Through the use of TCP/UDP scenarios and differences, there is an impression. Consolidate your network infrastructure and don’t be afraid to be asked about TCP/IP/UDP
Safety related
In the process of evolution and development of browsers, CSP, SameSite, HttpOnly, Cookies and other new technologies are constantly introduced to enhance security. However, there are still many potential threats, which require us to constantly “check and fill gaps”, so it is easy to be asked some security questions and prevention. Understand browser security (same-origin restriction /XSS/CSRF/ man-in-the-middle attack) and defense
Cross domain related
Cross-domain is our daily development will certainly encounter, how to break through the homology limit of some methods, you can not use, but you have to know. The front end is summarized across domains
Front-end cache correlation
Front-end caches (i.e. browser/HTTP caches), especially strong and negotiated caches, and local storage, which is also a must. Five steps to get through front-end caches to make your pages fly
engineering
This one can be a little more difficult without a lot of practice, but what’s the difference between Webpack and Vite
Webpack
Recommend Liu Xiaoxi’s series of articles, take you deep unlock Webpack series (basic) take you deep unlock Webpack series (advanced) take you deep unlock Webpack series (optimization)
Vite
This section mainly describes the practical process of Vite from installation to configuration: Vite engineering practice
Here is the comparison and principle of Vite and traditional packaging: In-depth understanding of Vite core principles
conclusion
Darling, come on
Thank you for your testimony, and thank you for every like. Thank you so much
Thanks again to the Nuggets