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:

  1. 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
  2. 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
  3. 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
  4. 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