1. Algorithm: to achieve a link, you can add nodes, delete nodes

function insert(head, n ,val) {
    var node = {
        val: val,
        next: null
    }
    if (head == null) {
        return node
    }
    if (n === 0) {
        node.next = head;
        return node;
    }

    var p = head;
    for(var i=0; i<n-1; i++){
        p = p.next;
    }
    node.next = p.next;
    p.next = node;
    return head;
}
Copy the code

function remove(head, n) { if (! head) { return null; } if (head === 0) { return head.next; } var p = head; for(var i=0; i<n-1; i++) { p = head.next; } p.next = p.next.next; return head; }Copy the code

2. Implement an Instanceof method

function myInstanceOf(left, right) {
    if (typeof left !== 'object' || left == null) {
        return false;
    }
    
    let pro = Object.getPrototypeOf(left);
    while(true) {
        if (pro === null) {
            return false;
        }
        if (pro === right.prototype) {
            return true;
        }
        pro = Object.getPrototypeOf(pro);
    }
}
Copy the code

3. How to implement REM layout flex layout with responsive layout

rem

(function(doc, win) { var docE1 = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docE1.clientWidth; if (! clientWidth) return; Doce1.style. fontSize = clientWidth / 7.5 + 'px'; } if(! doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window)Copy the code

4. Event loop mechanism

• 1. Start the entire script as the first macro task
• 2. In the execution process, the synchronous code is executed directly, the macro task enters the macro task queue, and the micro task enters the micro task queue
• 3. Check the microtask queue. If any microtask queue exists, execute it until the microtask queue is empty
• 4. Render the browser UI thread
• 5. Check whether a Web worker task exists. If yes, perform the task
• 6. Execute the new macro task at the head of the queue, go back to 2, and loop until both the macro task and the microtask queue are empty

5. Design patterns: The difference between the observant-subscriber and observer patterns

6. HTTPS process

HTTPS =HTTP +SSL/TLS. During data transmission, SSL/TLS is used to encrypt and decrypt data, and HTTP is used to transmit encrypted data. Therefore, HTTPS is completed jointly by HTTP and SSL/TLS.

• For security and efficiency, HTTPS uses both symmetric and asymmetric encryption.
• Data is transmitted through symmetric encryption. The symmetric encryption process requires a key on the client. In order to ensure that the key can be securely transmitted to the server, asymmetric encryption is used to encrypt and transmit the key.
• In general, the data is symmetrically encrypted, and the key used for symmetric encryption is transmitted through asymmetric encryption.

Why use symmetric encryption?

Reason: Asymmetric encryption based on large numbers, such as large prime numbers or elliptic curves, is a complex mathematical problem, so it consumes computational energy and is slow. In addition to being slow, a possible disadvantage is that more bits are required, and a symmetric key of the same strength is shorter than an asymmetric key. Symmetric keys are usually 128 bits and 256 bits, whereas RSA is usually 2048 bits, but elliptic curves are shorter

7. Http2 optimization points

1. Head compression: HPACK algorithm is used to establish a “dictionary” at both ends of the client and the server, and the index number is used to represent the repeated string. Huffman coding is also used to compress integers and strings, which can reach a high compression rate of 50%-90%.

2. Multiplexing: Transmission in binary frames, no sequencing, so no queues, and no HTTP header blocking. Both communicating parties can send binary frames to a pair, a two-way transmission sequence of binary frames, also known as a stream. HTTP/2 uses streams to communicate data frames over a TCP connection. This is the concept of multiplexing.

3. Set the request priority: there are other fields in the binary frame to achieve priority and flow control functions

4. Server push Instead of responding to requests completely passively, the server can also create a “flow” to proactively send messages to the client.

8. Introduce CSRF and countermeasures

A CSRF attack is when a hacker exploits a user’s login status and uses a third-party site to do something bad

Countermeasures:

• 1. Make full use of the SameSite attribute of cookies. We can set some key cookies to Strict or Lax mode for the actual situation so that they are not sent to the server during cross-site requests, thus invalidating the hacker’s CSRF attack.

• 2. Verify the source site of the request.

  The server’s policy is to judge Origin first. If the request header does not contain the Origin attribute, it will determine whether to use the Referer value according to the actual situation

• 3. CSRF Token

  In the first step, the server generates a CSRF Token when the browser makes a request to the server. The CSRF Token is essentially a string that the server generates and then inserts into the returned page. In the second step, if you want to make a transfer request on the browser side, you need to bring the CSRF Token on the page, and then the server will verify whether the Token is valid. If the request is made from a third-party site, the CSRF Token value will not be obtained, so even if the request is made, the server will reject the request because the CSRF Token is incorrect.

9. Optimize the white screen

1. Extract third-party libraries, third-party dependency files and package files into the CDN server
2. The route is lazily loaded
3. Add skeleton screen or loading (just to optimize the experience)
4. Optimized WebPack to reduce module packaging volume, code-split load on demand
5. Server side rendering, in the server side pre-assembled the HTML required for the home page
6. Enable GZIP compression on the server
7. UI frameworks such as Element-UI are introduced on demand
8. Package file subcontract, extract the public file package
9. Add the hash name to the file name to solve the problem that the new version needs to clear the dependency
10. Code compression
11. Compress image files to reduce file size
12. The image resources are put into the CDN server
13. Use CSS sprites

10. Advantages and disadvantages of inheritance and composition

11. HTTP cache

1. Determine whether strong caches work first: Strong caches are controlled by fields like Expires and cache-control (which have higher priorities),

Expires: is a field that controls the page cache in HTTP/1.0. The value is the time when the server returns the cached result of the request. If the time is less than the Expires value, the cached result is used directly. In HTTP/1.1, Expire has been replaced by cache-control: the main value. Public: All content will be cached (both client and proxy servers can be cached). Private: All contents can be cached only by the client. Default value of cache-control. No-cache: The client caches the content, but whether to use the cache needs to be verified by the negotiated cache. No-store: Nothing will be cached, either by force or negotiation. Max-age = XXX (XXX is numeric) : The contents of the cache will be invalid after XXX seconds. From memory cache: Memory cache has two characteristics, namely, fast read and timeliness. Fast read: The memory cache directly stores the compiled and parsed files into the memory of the process, occupying certain memory resources of the process, so as to facilitate fast read in the next run. . Timeliness: Once the process is shut down, the memory of the process is cleared. . From Disk cache: The cache is directly written to a disk file. To read the cache, I/O operations are performed on the disk files stored in the cache, and then the cache content is parsed. The reading process is complex, and the speed is slower than that of memory cache. In the browser, files such as JS and images are directly stored in the memory cache after being parsed, so you only need to read from the memory cache when refreshing the page. CSS files, on the other hand, are stored in hard disk files, so every time a page is rendered, it must be read from the disk cache.Copy the code

2. Cache negotiation Cache negotiation refers to the process in which the browser sends a request to the server with the cache identifier after the mandatory cache is invalid. The server decides whether to use the cache based on the cache identifier

The negotiation cache is controlled by the following fields: last-modified/if-modified-since and Etag/ if-none-match (priority) last-modified/if-modified-since: Last-modified is when the server responds to the request by returning the Last time the resource file was Modified on the server. If-modified-since is a field that tells the server when the resource was Last Modified when the client made the request again with the last-modified value returned from the Last request. The server receives the request and finds the if-Modified-since field in the request header. It compares the value of the if-Modified-since field to the last time the resource was Modified on the server. If the server resource was last Modified longer than the value of if-modified-since field, the resource is returned with status code 200. Etag/if-none-match: Etag is a unique identifier of the current resource file (generated by the server) that is returned when the server responds to the request. If-none-match indicates that when the client initiates the request again, it carries the unique IDENTIFIER value returned in the last request. The value of this field tells the server the unique identifier value returned in the last request. After receiving the request, the server finds that the request header contains if-none-match, and compares the value of if-None-match with the Etag value of the resource on the server. If the value is consistent, 304 is returned, indicating that the resource is not updated and the cache file continues to be used. If no, return the resource file with the status code 200. Mandatory caching takes precedence over negotiated caching. If mandatory caching (Expires and cache-control) takes effect, the Cache is used directly. If it does not take effect, the negotiation cache (last-modified/if-modified-since and Etag/if-none-match) is implemented. The negotiation cache is determined by the server. If the negotiation cache is invalid, the request cache is invalid and the request result is obtained again. Put it in the browser cache; If effective, return 304 and continue using cacheCopy the code

12. The difference between require and import

• 1. Native browsers do not support require/exports. You can use Browsersify, WebPack, etc., which support CommonJS module specification, and they will convert require/exports into code that can be used in browsers.
• 2. Import /export cannot be used directly in the browser, we need to import the module
• Although Node.js 13.2+ already supports import/export, node.js is not officially recommended for use in formal environments. It is currently possible to use Babel to compile ES6’s module system into the CommonJS specification (note: The syntax is the same, but the implementation is require/exports)
• 4. Require /exports is dynamically loaded at run time, import/export is statically compiled
• 5. Require /exports exports a copy of a value. Import /export exports a reference to the value
• 6. ES6 modules can use modules before import reference statements, CommonJS requires reference before use
• 7. Import /export can only be used at the module level and cannot be referenced in code blocks such as functions and judgment statements. Can the require/exports
• 8. Whether strict mode is adopted
  • Import /export Exported modules invoke strict mode by default.
  • Require /exports does not use strict mode by default. You can customize whether or not require/exports uses strict mode

13. Implementation of the arrow function

14. Two-way binding of vUE

• 1. Data is converted to getter/setter form through an observer to track changes.
• 2. When the outside world reads data through the Watcher, the getter is fired to add the Watch to the dependency.
• 3. When the data changes, the setter is triggered to notify the dependencies in the Dep (that is, the Watcher)
• 4. When the Watcher receives the notification, it sends a notification to the outside world, and when the change is notified to the outside world, it may trigger an update of the view,

  It is also possible to trigger a callback function of the user, etc.

Second interview

1. Reasons for leaving

2. Usage of TS

3. Observer mode

4. Singletons

Merge sort

function mergeSort(arr) { const len = arr.length; if (len <= 1 ) { return arr; } let mid = Math.floor(len / 2); let leftArr = mergeSort(arr.slice(0,mid)); let rightArr = mergeSort(arr.slice(mid, len)); arr = mergeArr(leftArr, rightArr); return arr; } function mergeArr(arr1, arr2){ let i = 0; let j = 0; let len1 = arr1.length; let len2 = arr2.length; let res = []; while(i<len1 && j<len2) { if (arr1[i] < arr2[j]) { res.push(arr1[i]) i++; } else { res.push(arr2[j]) j++; } } if (i<len1) { return res.concat(arr1.slice(i)); } else { return res.concat(arr2.slice(j)); }}Copy the code

Quick sort

function quickSort(arr, left=0; right=arr.length - 1) {
    if (arr.lenth > 1) {
        const lineIndex = partition(arr,left, right);
        if (left < lineIndex -1) {
            quickSort(arr,left,lineIndex -1);
        }
        if (right > lineIndex) {
            quickSort(arr,lineIndex,right);
        }
    }
    return arr;
}
function partition(arr, left, right) {
    let i = left;
    let j = right;
    let pivotValue = arr[Math.floor(left + (right-left)/2)];
    if (i<=j) {
        while(arr[i] < pivotValue) {
            i++
        }
        while(arr[j] > pivotValue) {
            j++
        }
        if (i<=j) {
            swap(arr,i,j);
            i++;
            j--;
        }    
    }
    return i;
}
function swap(arr,i,j){
    [arr[i],arr[j]] = [arr[j],arr[i]];
}
Copy the code

7. The use of this

• 1. Use this in a normal function. This represents the global object window.
• 2. A method call as an object, where this refers to the object it was called from.
• 3. Called as a constructor, where this refers to the object from which new comes.
• The first argument to this method is the object on which the function is called. This refers to the first argument. If no argument is passed, the default is the global object window.

8. Understanding of Http3

Using QUIC protocol: HTTP/3 chose a compromise method – UDP protocol, based on UDP to achieve similar to TCP multi-path data flow, transmission reliability and other functions, we call this set of functions as QUIC protocol

The QUIC protocol in HTTP/3 provides the following functions:

• 1. Implements functions similar to TCP for flow control and transmission reliability
• 2. The TLS encryption function is integrated
• 3. Implemented the multiplexing function in HTTP/2.

  Unlike TCP, QUIC enables multiple independent logical data streams on the same physical connection. The realization of the data flow alone transmission, the TCP squadron header blocking problem is solved.

9. Http2 optimization points

(See above)

10. Network attack and defense 1. What are the main problems 2

1.Xss: An Xss attack is when a hacker injects malicious scripts into a page and uploads some important data of the page to a malicious server. The three attack modes are as follows: 1. Storage XSS attack 2. DOM based XSS attack

There are three main prevention strategies: the first is to filter or transcode the input content through the server, the second is to make full use of CSP, and the third is to use HttpOnly to protect important Cookie information

2.Csrf(see above)

11. Optimize project network performance

12. Which framework is mainly used, vUE source code related understanding

13. Knowledge of cutting-edge technologies

Finally: share part of the knowledge point article links

• Record the interviews with front-end development engineers from the end of March to April

• Interview high-frequency handwritten JS code

• A large factory face

• Webpack covers everything from the light to the deep, so that your resume is really “familiar” (Series 1)

• Webpack covers everything from the light to the deep, so that your resume is really “familiar” (Series 2)

• Webpack covers everything from the shallow to the deep, so that your resume really says “familiar” (Series 3)

• Webpack covers everything from the shallow to the deep, so that your resume is really “familiar” (Series 4)

• Webpack covers everything from the light to the deep, making your resume truly “familiar” (Series 5)