Summary of facial classics

1： How lazy loading is implemented ？
Lazy loading means loading on demand , We do this by putting a large resource file , Package into multiple small resource files , When we click the front-end route, it will be loaded on demand js file , This can shorten the first screen time , Improve performance .

2： Rearrange and redraw
1： Rearrangement is when the layout and arrangement of elements change, it will cause rearrangement .
2： Redrawing is when the appearance of the element changes , It causes redrawing .
a: The causes of rearrangement are ：
increase , Remove elements
Font size in element , Changes in content
The size of the element , Change of position
The first time you load a page
When the browser window zooms
b: The reasons for redrawing are ：
Change of font color
Change of background color
Underline, etc

3： How to use it in anti shake and throttling projects ？( What about other scenes ？)
a: Anti shake effect ： Is to convert multiple successive triggers in a period of time into one trigger .
b: The effect of throttling ： Reduce the frequency of triggering over a period of time
Use in projects ：

Anti shake and throttling are vue A way of project optimization ：
We can do it in vue A package in the project

//  Shake proof 
export function _debounce(fn, delay) {
    

    var delay = delay || 200;
    var timer;
    return function () {
    
        var th = this;
        var args = arguments;
        if (timer) {
    
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
    
            timer = null;
            fn.apply(th, args);
        }, delay);
    };
}
//  throttle 
export function _throttle(fn, interval) {
    
    var last;
    var timer;
    var interval = interval || 200;
    return function () {
    
        var th = this;
        var args = arguments;
        var now = +new Date();
        if (last && now - last < interval) {
    
            clearTimeout(timer);
            timer = setTimeout(function () {
    
                last = now;
                fn.apply(th, args);
            }, interval);
        } else {
    
            last = now;
            fn.apply(th, args);
        }
    }
}

2、 In the component reference that needs to be used

import {
     _debounce } from "@/utils/public"

3、 stay methods Use in

 methods: {
    
    //  Change field number 
    changefield: _debounce(function(_type, index, item) {
    
        // do something ...
    }, 200)
  }

The use of anti shake throttling ：

1） throttle ： It's usually onrize,onscroll Wait for these frequently triggered functions , For example, you want to get the position of the scroll bar , Then perform the next action ; Mouse click to trigger ,mousedown( Trigger only once per unit time )…

 For example, you want to get the position of the scroll bar , Then perform the next action . If the execution after listening is Dom operation , This frequently triggers execution , May affect browser performance , It will even jam the browser .
 We can specify how many seconds he performs , This method is called function throttling 
 const throttle=(fn, delay) => {
    
    // Record the time of the last function trigger 
    let lastTime = 0;
    return () => {
    
        // Record the time when the current function is triggered 
        let nowTime = Date.now();
        if (nowTime - lastTime > delay) {
    
            fn();
            // Synchronization time 
            lastTime = nowTime;
        }
    }
};

2） Shake proof ： Frequent operation and cancellation of praise , Therefore, we need to get the result of the last operation and send it to the server ;search Search Lenovo , When users are constantly entering values …

const debounce=(fn, delay) => {
    
    // Record the last time delay 
    let timer = null;
    return () => {
    
        // Clear the last time delay 
        clearTimeout(timer);
        // Reset the new time delay 
        timer = setTimeout(() => {
    
            fn()
        }, delay)
    }
};

4：axios When requesting from the server , When will two requests be sent ？
axios When he sends a request to the background , The request header defaults to Content-Type: application/json, This request header will be sent before the real request , adopt option To send a request , Judge whether the interface can communicate normally , If not, the interface will not send a request , Otherwise, send a real request .
2： The browser will CORS Requests fall into two categories ： A simple request （simple request） And not a simple request （not-so-simple request）.

As long as the following two conditions are met , It's a simple request .

（1) The request method is one of three ：

HEAD
GET
POST
（2）HTTP The header information of does not exceed the following fields ：

Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type： Three values only application/x-www-form-urlencoded、multipart/form-data、text/plain
If the above two conditions are not met at the same time , It's not a simple request .

Non simple requests are those that have special requirements for the server , For example, the request method is PUT or DELETE, perhaps Content-Type The type of field is application/json.

It's not a simple request CORS request , Will be before formal correspondence , Add a HTTP Query request , be called " preview " request （preflight）.

The browser asks the server first , Whether the domain name of the current web page is in the server's license list , And what can be used HTTP Verb and header fields . Only a positive response , Browser will send out official XMLHttpRequest request , Otherwise, it will be wrong .

Browser processing of these two requests , It's different .

5： Cross domain project ？（ Why is there a cross domain ？ How? ）
When cross domain will occur ： As the agreements ,ip, When the port number is different, cross domain .
Why does cross domain occur ： Because the browser is based on security considerations , Put forward the strategy of homology . If the same origin policy is missing , Browsers are easily accessible XSS、CSFR Such attacks , The normal functions of the browser may be affected . The same origin policy will prevent a domain from javascript The script interacts with the contents of another domain .

Tags that can be loaded across domains ：
1.< img src=XXX>
2.< link href=XXX>
3.< script src=XXX>

Solve cross domain problems ：
jsonp
cors
nginx

6：jsonp Why < script> In the tag src Can achieve cross domain ？ principle ？
utilize < script> This open strategy of elements , adopt script Labeled src Property allows free access to requests from different sites ,JSONP Request must be the other side of the server to do support . Only support GET, I won't support it POST request

The principle of implementation is ：
1：script Tag passed src The path to access the background , Pass the callback function of the front end to the background as a parameter
2： Back building js Code , Then respond to the front desk
3: The foreground is in the callback function , Parse the data generated by the server

cors：
Server add header Set up ;
header(“Access-Control-Allow-Origin:*”);
header('Access-Control-Allow-Method:POST,GET"）;

proxy proxy server ：
Use a proxy to avoid cross domain requests , for example www.a.com/index.html Page to call www.b.com/service.jsp, You can write an interface www.a.com/service.jsp, This interface is used in the back end to call www.b.com/service.jsp And get the return value , And then back to index.html.
7： How to share data between two homologous pages ？
utilize Storge

8： Realization - Cyclic output - green 2s -> yellow 1s-> red 3s -> green 2s
https://blog.csdn.net/XUXIU182/article/details/101037490

9： What are the cyber attacks
CSRF(Cross-site request forgery), I.e., cross-site request forgery , It means that hackers induce users to click on links , Open the hacker's website , Then hackers use the user's current login status to initiate cross site requests

defense ：
（1） utilize Cookie Of SameSite attribute
SameSite It can be set to three values , Strict 、 Lax and None .
a. stay Strict In mode , The browser completely forbids the third party to request to carry Cookie. For example, request sanyuan.com The website can only be in
sanyuan.com Domain name can only be carried by request Cookie, No requests on other sites .
b. stay Lax Pattern , Just a little more relaxed , But only in get Method submit form Or a Tag send get request In case of
To carry Cookie, In no other case can .
c. stay None In mode , That's the default mode , The request will be carried on automatically Cookie.

（2） Verify source site
This requires two fields in the request header : Origin and Referer.
among ,Origin Only domain name information , and Referer Contains Specifically Of URL route .
Of course , Both of them can be forged , adopt Ajax The user-defined request header in , A little less secure .

（3）CSRF Token

XSS An attack is the execution of a malicious script in a browser , Then get the user's information to operate . It is mainly divided into Storage type 、 reflective and file type . Precautions include :
A belief : Don't trust user input , Transcode or filter the input content , Make it unenforceable .
Two use : utilize CSP, utilize Cookie Of HttpOnly attribute .