The following answers, the basic digging gold and Baidu can be found, I just do a record here. Update this article slowly, as soon as new individuals feel the need to update. I have divided different templates according to my own habit, some modules may not have a topic, don’t worry, wait slowly, there will always be, ha ha ha!!

HTTP

Differences between HTTP and HTTPS

http

  1. Stateless: The protocol does not store state for the client and does not have the ability to “remember” things. For example, to access a website, you need to log in repeatedly
  2. Connectionless: Prior to HTTP/1.1, each request required a three-way handshake and a four-way handshake to re-establish a connection with the server due to stateless features. For example, if a client requests the same resource for several times in a short period of time, the server cannot distinguish whether it has already responded to the user’s request. Therefore, it takes unnecessary time and traffic to respond to the request again each time.
  3. Request-based and response-based: The basic feature where the client initiates a request and the server responds
  4. Simple, fast and flexible
  5. Communication uses plaintext, request and response, which do not confirm the communication party and cannot protect the integrity of data

https

Based on HTTP, SSL or TLS provides data encryption, identity verification, and data integrity protection

  1. Content encryption: the use of mixed encryption technology, the middle can not directly view the plaintext content
  2. Authentication: Authenticates the client to access its own server through a certificate
  3. Protect data integrity: Prevent transmitted content from being impersonated or tampered with by middlemen

Http1, http1.1, http2

Http1 and http1.1

version HTTP1.0 HTTP1.1
connection Use non-persistent connections, that is, a TCP connection transmits only one Web object under a non-persistent connection. Each request and response requires a separate connection, and each connection transfers only one object, severely affecting the performance of both the client and the server Persistent connections are used by default (however,HTTP/1.1 clients and servers can be configured to use non-persistent connections). Instead of establishing a new connection for each Web object transfer, multiple objects can be transferred in a single connection. Multiple HTTP requests and responses can be sent over a single TCP connection, reducing the cost and latency of establishing and closing connections. For example, if the Connection request header value is keep-alive, the client notifies the server to return the result of this request and Keep the Connection. Connection When the value of the request header is close, the client notifies the server to return the request result and then closes the Connection. HTTP 1.1 also provides request and response headers related to mechanisms such as authentication, state management, and Cache caching. Two parallel responses are not allowed at the same time.
Cache aspects If-modified-since and Expires are mainly used as the criteria for cache judgment More cache control policies are introduced, such as Entity Tag, if-unmodified-since, if-match, if-none-match, etc. More cache headers are available to control the bandwidth optimization of cache policies and the use of network connections
Status code stateless 24 error status response codes are added. For example, 409 (Conflict) indicates that the requested resource conflicts with the current state of the resource. 410 (Gone) Indicates that a resource on the server is permanently deleted
Broadband optimization There are some waste of bandwidth, such as the client only needs part of an object, but the server sends the whole object, and does not support resumable breakpoints Support to send only header information (without any body information), return 100 if the server thinks the client has permission to request the server, otherwise return 401. The client does not start sending the request body to the server until it receives 100. This saves bandwidth by saving the client from sending the body request when the server returns 401.
The Host header HTTP1.0 assumes that each server is bound to a unique IP address, so the URL in the request message does not pass a hostname. However, with the development of virtual hosting technology, there can be multiple virtual hosts (multi-homed Web Servers) on a physical server, and they share the same IP address. HTTP1.1 Request and response messages should support the Host header field, and an error will be reported if there is no Host header field in the Request message (400 Bad Request)

Http1.1 and http2

version HTTP1.1 HTTP2.0
multiplexing In HTTP/1.1, the browser client has certain data restrictions for the same domain name requests at the same time. Requests exceeding the limit are blocked HTTP2.0 uses multiplexing techniques to process multiple requests concurrently for the same connection, and the number of concurrent requests is orders of magnitude larger than HTTP1.1. And this powerful function is based on the “binary frame” feature.
The first compression Header data compression is not supported Use the HPACK algorithm to compress the header data so that the data is smaller and can be transferred more quickly over the network
Server push When we request data from a Web server that supports HTTP2.0, the server incidentally pushes some resources that the client needs to the client, so that the client does not create a connection to send a request to the server. This is a great way to load static resources

Get and POST

  • GET is harmless when the browser falls back, while POST resubmits the request.

  • The URL generated by GET can be bookmarked, but not by POST.

  • GET requests are actively cached by browsers, whereas POST requests are not, unless set manually.

  • GET requests can only be url encoded, while POST supports multiple encoding methods.

  • GET request parameters are retained in browser history, while parameters in POST are not.

  • GET requests pass parameters in the URL with length limits, whereas POST does not.

  • GET accepts only ASCII characters for the data type of the argument, while POST has no restrictions.

  • GET is less secure than POST because parameters are exposed directly to the URL and therefore cannot be used to pass sensitive information.

  • The GET argument is passed through the URL, and the POST is placed in the Request body.

  • GET generates a TCP packet; POST generates two TCP packets. For GET requests, the browser sends both HTTP headers and data, and the server responds with 200 (return data).

    For POST, the browser sends a header, the server responds with 100 continue, the browser sends data, and the server responds with 200 OK (returns data).

Cross domain processing

fillder

The front end resolves cross-domain requests through Fiddler re matching

Webpack configures the agent

Webpack solves local development cross-domain problems

The HTTP status code

The HTTP status code

JavaScript

Prototype chain inheritance

JS prototype chain, inheritance

closure

Deeply implement closure idea, fully understand the formation process of JS closure

Promise

45 Promise interview questions

es6

  • Deconstruction assignment
  • Arrow function
  • Const lets and temporary dead zones
  • .

Array of several method differences

  • The pop() method removes the last element from the array and returns it

  • The push() method (at the end of the array) adds a new element to the array and returns the length of the new array

  • The shift() method removes the first array element and returns it

  • The unshift() method (at the beginning) adds a new element to the array and returns the length of the new array

  • The forEach() method calls the function (callback) once forEach array element and returns undefined

  • The map() method creates a new array by executing a function on each array element. No function is executed on an array element that has no value. The original array is not changed.

  • The filter() method creates a new array containing the array elements that pass the test.

  • The every() method checks that all array values pass the test. All the elements satisfy the condition

  • The some() method checks whether some array values pass the test. You don’t have to have all the elements

Js determines whether the object is empty

Js several ways to determine whether an object is empty

TypeScript

Css

Flex layout

Flex Layout Tutorial: Syntax section

Grail, twin wings layout

CSS Classic Layout series three – three column layout (Holy Grail layout, two wings layout)

Vertical center

[CSS implements horizontal and vertical centering of elements]

Margin collapse

Cause: Detailed description of the BFC in the CSS

Solutions:

  • Margin-top; margin-top; overflow:hidden; margin-top; margin-top; margin-top

  • Margin-top is added to the parent element in addition to the child element

  • Margin-top: 1px solid transparent; margin-top: 1px solid transparent; (Color is transparent)

  • Change the margin-top value for the child element to the padding-top value for the parent element

Html

Cookie, LocalStroage, sessionStorage three differences

features Cookie localStorage sessionStorage
The lifetime of the data Generally, it is generated by the server. You can set the expiration time. If cookies are generated on the browser side, they are invalid after the browser is closed by default It is stored permanently unless it is removed This parameter is valid only in the current session and is cleared after you close the page or browser
Data storage size About 4 k As a general rule, be 5 MB As a general rule, be 5 MB
Communicates with the server This is carried each time in HTTP headers, and using cookies to store too much data can cause performance problems It is saved only in the client (browser) and does not communicate with the server It is saved only in the client (browser) and does not communicate with the server
Ease of use Requires the programmer to encapsulate, the source Cookie interface is not friendly The source interface is acceptable and can be repackaged to provide better support for objects and arrays The source interface is acceptable and can be repackaged to provide better support for objects and arrays

Vue

The life cycle

Lifecycle hook

Why is data function and returns a new object

A component’s data option must be a function, so each instance can maintain a separate copy of the returned object. When a component is defined, data must be declared as a function that returns an initial data object, because the component may be used to create multiple instances. If data were still a pure object, all instances would share references to the same data object! By providing the data function, each time a new instance is created, we can call the data function to return a new copy of the original data

Difference between computed and Watch

computed
  1. Support caching, only the dependent data changes, will be recalculated
  2. Asynchronism is not supported. It does not work when there is asynchronous operation in computed, and data changes cannot be monitored
  3. Computed attribute values are cached by default, and computed attributes are cached based on their reactive dependencies, that is, computed based on data declared in data or passed by the parent component
  4. If a property is computed by something else, that property depends on something else, it’s a many-to-one or one-to-one, usually computed
  5. If the computed attribute value is a function, the default is to use the GET method; The return value of the function is the property value of the property; In computed, attributes have a GET and a set method, which are called when data changes.
watch
  1. Does not support cache, data change, will directly trigger the corresponding operation;
  2. Watch supports asynchrony;
  3. The listening function takes two arguments, the first of which is the latest value; The second argument is the value before input;
  4. When an attribute changes, you need to perform the corresponding operation, one-to-many.
  5. The listening data must be the data declared in data or the props passed by the parent component. When the data changes, other operations are triggered. The function takes two arguments, immediate: the component loads immediately and the callback function executes, deep: Deep listening is used to detect changes in the value of a complex type of data, such as changes in the contents of an array. Note that it is not necessary to listen for changes in the array. Note: Deep cannot listen for array changes or object additions, as in vUE array mutations, only when triggered in a responsive manner.

Principle of data bidirectional binding

  • Vue2.0

Object.defineproperty (), concrete implementation —

  • Vue3.0

Es6 Proxy, specific implementation – VUE 2.0 and 3.0 bidirectional binding principle of the implementation

Vue route Hash and history

Vue-router specifies the difference between hash mode and history mode

Vue component communication method

There are six modes of communication between Vue components

React

Design patterns

Js implements 23 design patterns

Micro front-end

What exactly is a micro front end?

After I finish learning this by myself, I will practice writing demo. Should summarize a related article, but I don’t have time to do that recently.

  • single-spa
  • qiankun
  • NPM package import mode

Write a method

Gets the parameters in the URL

var url = 'https://juejin.im/editor/drafts/6867127999888621575? name=cyb&age=18&sex=1'
/ / ordinary
function getUrlParamBySplit(url) {
    let paramStr = url.slice(url.indexOf('? ') + 1)//name=cyb&age=18&sex=1
    let paramArr = paramStr.split('&')
    let paramObj = {}
    paramArr.forEach(item= > {
        paramObj[item.split('=') [0]] = item.split('=') [1]})return paramObj;
}
// console.log(getUrlParamBySplit(url))

/ / regular
function getUrlParamByRegExp(url) {
    let paramStr = url.slice(url.indexOf('? ') + 1)
    let paramReg = / &? ([0-9a-zA-Z]*)=([0-9a-zA-Z]*)/g
    let paramObj = {}
    while((res = paramReg.exec(paramStr)) ! = =null) {
        paramObj[res[1]] = res[2]}return paramObj;
    // You can choose one of the two ways
    // let paramStr = url.slice(url.indexOf('? ') + 1)
    // let paramReg = /&? (? 
      
       [0-9a-zA-Z]*)=(? 
       
        [0-9a-zA-Z]*)/g
       
      
    // let paramObj = {}
    // while ((res = paramReg.exec(paramStr)) ! == null) {
    // let {key ,value} = res.groups
    // paramObj[key] = value
    // }
    // return paramObj;
}

console.log(getUrlParamByRegExp(url))
Copy the code

XMLHttpRequest

function ajax(option) {
    let { method = 'GET', params, data, url, async = false, headers } = option;
    return new Promise((resolve, reject) = > {
        let xhr;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
        xhr.open(method, url, async);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                resolve(xhr.responseText)
            } else {
                reject(xhr)
            }
        }
        if (headers) {
            Object.keys(Headers).forEach(key= > xhr.setRequestHeader(key, headers[key]))
        }
        method === 'GET'? xhr.send() : xhr.send(data); })}Copy the code

If the throttle

// Alarm prevention immediate Specifies whether the alarm is executed immediately
const debounce = (fn, delay, immediate = false) = > {
    let timer = null;
    return function () {
        const args = [...arguments];
        if (timer) clearTimeout(timer);
        if (immediate) {
            constcallNow = ! timer; timer =setTimeout(() = > {
                timer = null;
            }, delay)
            if (callNow) fn.apply(this, args)
        } else {
            timer = setTimeout(() = > {
                fn.apply(this, args)
            }, delay)
        }
    }
}

/ / throttling
constthrottle = (fn, delay) = > {
    let timeout;
    return function () {
        let context = this;
        let args = arguments;
        if(! timeout) { timeout =setTimeout(() = > {
                timeout = null;
                fn.apply(context, args)
            }, delay)
        }
    }
}
Copy the code

Deep copy

function deepCopy(obj) {
    if (obj === null) return obj;
    if (obj instanceof Date) return new Date(obj);
    if (obj instanceof RegExp) return new RegExp(obj);
    if (typeofobj ! = ="object") return obj;
    let cloneObj = new obj.constructor();
    for (let key in obj) {
        if(obj.hasOwnProperty(key)) { cloneObj[key] = deepCopy(obj[key]); }}return cloneObj;
}
Copy the code

Call, apply, bind

Function.prototype.myApply = function (content = window) {
    content.fn = this;
    let result;
    if (arguments[1]) { result = content.fn(... arguments[1])}else {
        result = content.fn()
    }
    delete content.fn;
    return result;
}
Function.prototype.myCall = function (content = window) {
    content.fn = this;
    let args = [...arguments].slice(1)
    letresult = content.fn(... args)delete content.fn;
    return result;
}
Function.prototype.myBind = function(content) {
    if(typeof this! ='function') {
       throw Error('not a function');
    }
    let _this = this;
    let args = [...arguments].slice(1);
    return function F() {
       if(this instanceof F) {
          return _this.apply(this, args.concat([...arguments]))
       }
       return _this.apply(content, args.concat([...arguments]))
    }
 }
 
Copy the code

The sorting

Check for array and swap elements (used below)

function checkArray(arr) {
    if((! (arrinstanceof Array)) || arr.length <= 2) return;
}

function swap(arr, oldIndex, newIndex) {
    [arr[oldIndex], arr[newIndex]] = [arr[newIndex], arr[oldIndex]];
}
Copy the code
The bubbling
// [2, 1, 5, 4, 3];
function bubble(arr) {
    checkArray(arr);
    for (let i = arr.length; i > 0; i--) {
        for (let j = 0; j < i; j++) {
            if (arr[j] > arr[j + 1]) swap(arr, j, j + 1)}}return arr;
}
Copy the code
insert
function insertion(arr) {
    checkArray(arr);
    for (let i = 1; i < arr.length; i++) {
        for (let j = i - 1; j >= 0; j--) {
            if (arr[j] > arr[j + 1]) swap(arr, j, j + 1); }}return arr;
}
Copy the code
choose
function selection(arr) {
    checkArray(arr);
    for (let i = 0; i < arr.length - 1; i++) {
        let minIndex = i;
        for (let j = i + 1; j < arr.length; j++) {
            minIndex = arr[j] < arr[minIndex] ? j : minIndex;
        }
        swap(arr, i, minIndex);
    }
    return arr;
}
Copy the code
fast
function quickSort(arr) {
    checkArray(arr);
    if(arr.length <= 1) return arr 
    let center = arr.length / 2;
    let centerVal = arr.splice(center, 1) [0];
    let leftArr = [];
    let rightArr = [];
    arr.forEach(val= > {
        val > centerVal ? rightArr.push(val) : leftArr.push(val);
    });
    return [...quickSort(leftArr), centerVal, ...quickSort(rightArr)];
}
Copy the code

webpack

  • Webpack loader and Plugin differences

Project optimization

  • From more than 10 seconds to 1.05 seconds! Front-end performance optimization

other

  • What does the browser do from entering the URL back to the page
  • Virtual list
  • Lazy loading of images

How to learn the front end

I personally is to visit the Nuggets, find B station learning video, and then write demo, something nothing to see the public number of what.

Those who can see here must be very patient people, hahahahahaha