Summary of 2023 front-end interview key knowledge points [detailed] css+js+vue+react+small program+performance optimization, etc.

赶紧点赞收藏起来吧！

css

How to center a box both horizontally and vertically

What are the advantages of less or sass over css?

How to do responsive layout or how to adapt

What are the advantages and disadvantages of css sprite (Sprite or Sprite)? Disadvantages: Increased UI workload. As long as there is a small problem in itself, everything needs to be corrected

Do you know which new features of css3 and new features of h5

What is the difference between the transparency effect of rgba() and opacity

Both rgba() and opacity can achieve transparency, but the biggest difference is that opacity acts on elements, and elements

Transparency of all content within the element,

Whereas rgba() only works on the element's color or its background color. (Child elements of elements that set rgba transparency will not inherit

Transparency! )

js

赶紧点赞收藏起来吧！

What are the js data types? What's the difference

Talk about your understanding of scope: the scope of variables and functions (identifiers). There are three types of scopes: global, local, and block-level scopes (defined in {}). When JS searches for a variable, the search path formed is the scope chain.

Talk about your understanding of prototype: every constructor has a prototype object

prototype (display prototype), there will be a constructor attribute on the prototype that points to the constructor itself. There will be an implicit prototype __ 'proto' __ pointing to the constructor itself on the instance object that is new through the constructor

Prototype chain: When the JS engine searches for the properties of an object, the search path formed is the prototype chain. First check whether the object itself has this attribute, if not, find the prototype object along the implicit prototype, and see if there is any on the prototype object. If not, continue to look for the prototype object of the previous layer along the implicit prototype, knowing that Object.prototype—>null. If the entire function is not found, returns undefined

What is a closure: Advantages: Extend the data life cycle. Cons: Risk of memory overflow/leakage. Concept: call another function from outside a function.

How to modify the this point of a function, what is the difference between these methods?

call, apply, bind. The first two are directly followed by brackets, and the position to be specified is added inside the brackets. bind needs to be accepted and adjusted later. The call accepts an array and directly passes the elements. apply needs to use an array

What is the principle of event delegation or event proxy?

Bubble transfer: transfer from inside to outside, sequentially. The innermost one is called the target event source.

addEventListener: listen

What is the difference between event bubbling and event capturing?

What are the new features of es6 that you know?

Semantic tags, extended operators, destructuring assignments, arrow functions, promise events, let, const

There are several ways of js asynchronous programming

Three types: 1. Callback style (callback hell exists, code readability is poor) 2.promise, but the problem of callback hell has not been completely solved. 3. async / await

Talk about the understanding of promise

​pending fulfilled rejected When we create a Promise object, its status is pending by default. To modify its status, the resolve method or reject method must be called. is an asynchronous solution.

promise.all([p1,p2,p3]).then().catch() . If there is a failure, enter the catch

promise. settler([p1,p2,p3]).then() . All done

promise. race([p1,p2,p3]) . Advanced executes first, only executes one

const myPromiseObj = new Promise((resolve,reject)=>{
	setTimeout(()=>{
		resolve()
	})
})
myPromiseObj.then(()=>{}).catch(()=>{})

How does js shallow copy and deep copy an object

Copy the difference of several layers. Shallow copy only copies one layer of data

​ Shallow copy:Object.assign 或者拓展运算符...

If there is an object in it, only the object address will be copied. Therefore, when the copy object data is modified, the original data will also change. const newObj = Object.assign({},obj)(obj is the original array)

​ Deep copy:const deepCopiedObj = JONS.parse(JSON.stringify(obj))

Deep copy will have problems when facing special characters

The difference between rem and em and px

​ px is a fixed unit, and rem and em are responsive units. The size of 1rem depends on the font size of the root node html (that is, the font-size attribute), and the size of 1em depends on the font size of its parent node. On the mobile side, we generally Use rem, but pay attention: At this time, the fontSize attribute of html should be dynamically calculated, not hard-coded. Generally, the ratio obtained by dividing the width of the current visible window by an empirical value is used as the fontSize attribute value of html.

What is the difference between break and continue in a for loop?

break: break out of the entire loop

continue: Jump out of the grade cycle and continue to execute the following cycle

How to bind two event handlers to a button click event with native js

​ addEventListener

xxx.addEventListener(‘click’,function(){

});

xxx.addEventListener(‘click’,function(){

})

click: event type. function: event handler function

How does the js engine implement asynchronous?

The js engine is asynchronous through the event loop (Event Loop).

The browser is multi-threaded, and the commonly used main threads are: js engine, GUI rendering engine, http request thread, event trigger thread, timing trigger thread

The two cores of the js engine:

1. Execution stack: All js codes will be loaded into the execution stack for execution. (first in last out)

2. Task queue: storage is the callback function of all asynchronous tasks to be executed.

When the js engine executes the code in the execution stack, if it finds an asynchronous task (such as: sending a request), it will hand over the asynchronous task to other threads of the browser (http request thread) for processing. Then continue to execute the subsequent code.

two lines:

1. The js engine continues to perform subsequent synchronization tasks. When the execution stack is cleared, it will go to the task queue to find out whether there is a callback function to be executed. Some are executed on the execution stack, and after execution, they will be searched in the task queue. Such a reciprocating process is the event loop (Event Loop).

2. Other threads (http request threads) are processing asynchronous tasks. When the asynchronous task is processed (after the request is successfully responded), the previously set callback function will be pushed to the task queue of the js engine.

​ What is an event loop? ?

There are two very important parts in js engine: execution stack and task queue

All code must be loaded into the execution stack for execution

​ If an asynchronous task is found during execution, the js engine will hand over the asynchronous task to other threads of the browser for processing, such as encountering an

​ interface, the js engine will hand it over to the http request thread for processing, and then the js engine will continue to execute the subsequent synchronization tasks, but at the same time as the http request thread

​ Operation, when the request is sent successfully, that is, after the data is obtained, the http request thread will push the callback function we set in js to the task queue of the js engine

​ When the js engine clears the tasks in the execution stack, it returns to the task queue to find whether there are any callback functions to be executed, and if there are any, it will be executed in the execution stack

​ After the execution is completed, it will go to the task queue to find out whether there are any callbacks to be executed. The process of such a cycle is the event cycle. If you understand the event cycle, you will understand it.

  * 浏览器是多线程的，js引擎只是其中一个线程，除此之外还有http请求线程，定时触发线程，事件处理线程，GUI渲染线程

What is function curation?

​ By returning a function from a function (closure), let a function that accepts multiple parameters at one time be decomposed into a combination of functions that only accept one parameter at a time

​ Its function is for the multiplexing of parameters,

function towSum(a,b){
	return a + b;
}

//现在对上面的函数进行柯理化
function towSum(a){
	return function(b){
		return a + b;
	}
}
或者
const res = (a)=>(b)=>a+b;

The difference between DOMContentLoaded and load events

The difference: timing of execution. The former precedes the load event.

What is the difference between anti-shake and throttling, and how to achieve it

​ In high-frequency triggered events , it may cause some performance problems. For example, when the browser on the PC side is zoomed (resize event), if we manipulate the DOM in the event processing function, when the user zooms, it may cause the browser to Caton, this is that we can control the frequency of operating DOM through anti-shake throttling to avoid operating DOM too fast, but the difference between the two is:

​ The idea of ​​anti-shake is: set a delayer, and execute the corresponding logic after a delay of n seconds (that is, logic that may be frequently executed that may affect performance). If it is executed again within n seconds, the delayer will be cleared. And reset the delayer from now on, and execute it after n seconds. Executed after user action

​ The idea of ​​throttling is: within a certain period of time, the corresponding logic must have and can only be executed once.

​

//防抖
function debunce(func,time){
	let timer = null;
	return function(){
		if(timer)clearInterval(timer);
		timer = setTimeout(()=>{
			func.apply(this,arguments)
		},time);
	}
}
//节流
function throttle(func,time){
	let preTime = +new Date()
	return function(){
		const curTime = +new Date()
		if(curTime - preTime >= time){
			func.apply(this,arguments);
			preTime = curTime;
		}
	}
}

code questions

   for(var i=0;i<10;i++){
    setTimeout(()=>{
      console.log(i)
    },1000);
  }

 
 
 for(let i=0;i<10;i++){
    setTimeout(()=>{
      console.log(i)
    },1000);
  }

var age = 100;
let years = 6;
if(age > 12){
    let age = 10;
    var years = age*3;
}
//问：以上代码有问题吗？

//var没有块级作用域一说。let 声明是不能重复定义的。外面定义的var不会影响块级作用域的let

 componentDidMount() {
        this.setState({ count: this.state.count + 1 });
        console.log('1', this.state.count);
        this.setState({ count: this.state.count + 1 });
        console.log('2', this.state.count);
        setTimeout(() => {
            this.setState({ count: this.state.count + 1 });
            console.log('3', this.state.count);
            this.setState({ count: this.state.count + 1 });
            console.log('4', this.state.count);
        }, 0);

    }
    
    //打印结果
    

 
 showName();//1
 function Cat() {
           let showName = function () {
                console.log(1);
            }
            return this;
 }
       
        Cat.showName = function () { console.log(2) };
        Cat.prototype.showName = function () { console.log(3) };
        var showName = function () { console.log(4) };
        function showName() { console.log(5) };
        Cat.showName();//2
        showName();//3
        Cat().showName();//4
        showName();//4
        new Cat.showName();//5
        new Cat().showName();//6

        //打印结果？？

 function Cat() {
           showName = function () {
                console.log(1);
            }
            console.log('this',this)
            return this;
           
 }
       
        Cat.showName = function () { console.log(2) };
        Cat.prototype.showName = function () { console.log(3) };
        var showName = function () { console.log(4) };
        function showName() { console.log(5) };
        Cat.showName();
        showName();
        Cat().showName();
        showName();
        new Cat.showName();
        new Cat().showName();
  
        
        //打印结果，注意跟上一题的区别

6. What's wrong with this code?

   this.setState((state,props)=>{
   	return {total:state.total + props.count}
   });
   

7. Check out the following code: If you create a React element in the page, please complete his component definition?

   <Profile username="sofn">
   	{user=>user===null ? <Loading/> : <Badge info={user}/>}{" "}
   </Profile>
   
   import React ,{Component} from 'react';
   import PropTypes from 'prop-types';
   import fetchUser from 'utils';
   //fetchUser接收用户名，并返回promise
   //当得到用户数据的时候返回resolve状态
   class Profile extends Component{
   	//在这里写下你的代码
   	
   }
   

vue

The difference between vue3 and vue2

The difference between watch and computed in vue components

1. watch中一个值的变化可能会引起多个值的变化，而compouted中多个值的变化会只会影响一个值的变化（即该计算属性返回的值）。可以监听属性，data中的数据。
2. 在watch中我们可能会有副作用，比如发送请求等，而computed则没有副作用，仅仅是根据母体数据衍生出新的数据而已。

1. There may be side effects in the watch. That is, a function has a certain impact on the outside of the function during execution, and this impact is called a side effect.

What are the commonly used life cycle hook functions of Vue? What is the role of each?

hook function	created	mounted	updated	beforeDestory
execution time	After the data is initialized	After the DOM is rendered	After the data is updated and the DOM is updated	Before the component is unmounted
effect	send request	Send requests, get DOM, etc.	Send a request (pay attention to adding conditional judgment), get DOM, etc.	Performance optimization related, such as clearing timers, delayers, unbinding events, etc.

How does vue implement component communication (component value passing)? Father-son-brother complex component relationship

​

Component relationship	Father and son	brother	Complex Component Relationships
way of communication	props/binding custom events, $emit	state promotion, event bus	state machine vuex

​

How does the vue project do routing interception?

​ Global routing guard (router.beforeEach), local (internal page) routing guard

Vue's responsive principle Object.defineProperty

​ The data in the data in the vue component will be converted into responsive data by Object.defineProperty before the initial rendering, and then the access and modification of these data can be monitored, and the getter will be triggered whenever the data is accessed, and then The watcher will be notified, and the watcher will do a dependency collection or update, and then the watcher will be responsible for notifying the rendering interface (first converted to virtual DOM, and then mapped to real DOM). Whenever the data is set, the setter will be triggered, and then the setter will also notify the watcher, and the watcher is notifying the rendering interface

The difference between v-if and v-show

The former manipulates nodes, while the latter manipulates styles. The former consumes more, frequently switch with v-show

Can v-if and v-for be used together?

hit off. The latter has higher priority

What does the keep-alive component do?

​ Cache component

What does this.$nextTick do

Similar to updated, you can call it the mobile version of updated. If you want to get the latest state of the DOM after the data is updated, you can use this method (if you get the DOM state directly, you can’t get it, because although the data is updated in vue is synchronous, but the DOM update is asynchronous), of course you can also use the updated life cycle hook function, but it is inconvenient

What does this.$set do

​ The predefined data in the component data must be responsive, but when we add new properties to some objects in the data in a conventional way (such as someObject.propName = xxx), these new properties are not Responsive, it is possible to use this method. this.$set(target,prop,value) The prop attribute here is responsive

vuex core concept

How does vue do routing lazy loading

​ The value of the component attribute in the routing configuration is changed to: () => import (component path)

What do you think is the difference between vue framework and jquery?

The development ideas are different. Vue is data-driven and can be developed in components, while jquery is DOM-driven, and the development efficiency is low.

How does vue customize instructions

How to package a vue plugin

What is a filter in vue

How does vue extract the common logic of components

​ vuex/mixins/custom directives/plugins

react

What does shouldComponentUpdate do?

​ It is a life cycle hook function of the react component. Every time the data is updated, the hook function will be executed first. If it returns true, it means that the interface can be updated, and then subsequent hook functions will be executed one after another. If it returns false, it means no It can be updated, and subsequent hook functions will not be executed. Of course, it returns true by default.

We generally do not use the hook function directly in the component, but choose PureCompopnent instead of Component, and use the hook function in PureComponent for optimization

What are the characteristics of setState

​ Its function is to update the internal state of the component. It can accept two parameters. One of the parameters is usually an object. In the bottom layer, react will merge the incoming object with the original state through Object.assign. Of course, you can also pass in a function. This function will accept two formal parameters (one for state and one for props) and return an object. It should be noted that when this function is executed, it will ensure that the previous state has been updated, and finally the object returned by the function Merge with the original object. When the new state value will be based on the old state value, we tend to pass a function to the first parameter of setState. Its second parameter is a callback function, which will be executed when the data is updated and the dom is updated.

​ In addition, when we directly call setState in the react event system or component lifecycle hook function, it is asynchronous, and other situations are synchronous, such as calling in setTimeout/setInterval is synchronous

this.setState({name:'张三'});
this.setState((state,props)=>({})

When the react list is rendered, the role of the key

​ Improve rendering performance

How to communicate between react components

​ Father-son (props), brother (state promotion, event bus), complex component relationship (state machine)

Explain the core concept of redux

​ store action reducer

What are the commonly used life cycle hook functions in react? what is the effect

hook function name	constructor	render	componentDidMount	componentDidUpdate	componentWillUnmount
Execution timing and role	Responsible for data initialization when the component is initialized	rendering interface	Execute when the DOM rendering is complete, you can send the interface here, get the DOM, etc.	Execute after the data is updated and the interface is updated	Executed when the component is about to be unloaded, you can clear timers, delayers, unbinding events, etc. here

What is the role of refs in react?

1. 获取DOM
2. 获取组件实例

What is redux middleware, what is its function, and what middleware do you commonly use?

What are the three principles of redux?

1. single source of truth
2. The data (state) in the store is read-only
3. Modifications must be performed through a pure function reducer

What is the difference between container components and presentation components in react?

What is the difference between function components and class components (before 16.8)?

How does react extract common logic between components

What are Higher Order Components? what's the effect? What are your favorite high-level components?

What is the difference between controlled and uncontrolled components?

Talk about your understanding of jsx?

What are the data sources of react components? What's the difference between them?

What are react slots? (Or how to achieve component composition in react?)

What is context in react?

Which life cycle hook functions are discarded and newly added in react

Applets

How many files does a page of a small program consist of?

How does the applet interact with the background

(1) Directly use the official interface wx.request interface provided by WeChat, which is similar to jquery's ajax

How to do the scanning function and the payment function of the applet

(1) Call the ready-made interface provided by WeChat (starting with wx.), just refer to the document for how to pass specific parameters

How to get the user's mobile phone number in WeChat? ?

(1) Simple, just use the off-the-shelf component button provided by WeChat directly. The specific usage is to add an attribute opent-type to the button, and its value is getPhoneNumber. If you don’t know how to use it, go to the official WeChat document.

What is Mini Program Subcontracting? what's the effect?

Tip: It has a similar effect to lazy loading of vue routing, which improves user experience and reduces the rendering speed of the first screen

https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html

https://blog.csdn.net/acmdown/article/details/80037660

other

performance optimization

From the user entering the url in the browser to the browser rendering the interface, what happened in the middle?

​ DNS domain name resolution ------ "initiate http or https request ------" server processing request------- "browser accepts the request response and renders the interface

How does SPA (single page application) improve the rendering speed of the first screen (note: not the home page, generally you enter a new path in the url and press Enter, which is a first screen) rendering speed

Partial optimization of DNS domain name resolution

1. DNS prefetch (DNS pre-analysis)

在html头部使用link标签进行DNS预解析
<link rel="dns-prefetch" href="//www.baidu.com">

Initiate request part

1. Reduce the number of requests

   1. Use css sprinte (also called sprite or sprite), that is, if there are multiple smaller background images, you can synthesize one, and then set the background through background-position instead of sending requests for each

   2. Some pictures can be compiled into base64 format (url-loader in webpack will automatically compile pictures with a size smaller than a certain value into base64 format, and then embed them into js files, so when accessing these pictures later, it will not be in requires a separate request)

      • When to use pictures in base64 format? ? , you can refer to the following factors

        1. This type of image cannot exist in the form of CSS Sprite with other images, and can only stand alone

        2. This type of picture has been rarely updated since its birth

        3. The actual size of these images is small

        4. This type of image is used on a large scale in the website

   3. Merge scripts and style sheets, but it depends on the situation. If the size of the package becomes very large after merging scripts or style sheets, it will excessively prolong the network request time, resulting in slower rendering at first

   4. Take advantage of http caching (freshness limit and server validation)

2. When reducing the request or server-side response (of course, mainly the response), the size of the network packet

   1. Compress css/js, images, etc.
   2. Routing lazy loading

3. Shorten the transmission distance of the network and optimize the network transmission path

   1. Using CDN (Content Delivery Network), we generally hand over static resources, that is, resources that rarely change and have relatively large volumes, to CDN service providers for management

Server-side optimization: no need to pay attention

​ Use a separate image server, use redis cache, use load balancing, etc.

browser rendering

1. css is placed before body, script is placed after body

2. ssr (server side render—server rendering)

3. requestAnimationFrame

   For animation: why timers are not a good solution

   1. Developers don't know how long the interval is to start an animation. If the interval is too short, the performance of the browser will be lost. If the interval is too long, the user will feel stuck. And the problem of the timer's own mechanism, the timing of its callback function triggering may not be the time you set, because it has to wait until the tasks in the execution stack are cleared before executing

    	优化要达到的目的：间隔时间合适，同时用户不会觉得卡
   

   ​ Analysis:

   ​ First: The interval time should be appropriate. You must not manually set it yourself, because the timing of the delayer or timer trigger is not accurate.

   ​Second: Users will not feel stuck. First of all, we need to figure out what causes the freeze, so next, we will explain the concept of browser frames

   ​ Frame: The page in the browser is drawn frame by frame. When the number of frames drawn per second (FPS–Frame Per Second) is greater than or equal to 60, the user will not feel stuck, in other words When the time of each frame is controlled within 1s/60, which is about 16.6 milliseconds, the user will not feel stuck.

   ​In a frame, the browser roughly does the following things (sometimes not every step will be executed):

   1. Handle user interaction

   2. js parsing and execution (such as the logic in the user event processing function)

   ​ 3. Call the function registered in window.requestAnimationFrame ( note: this function is actually a function registered in the previous frame, and if a registered function is found in this frame, the function will be executed )

   ​ 4. Layout (layout, if it is triggered for the second time, we call it reflow)

   5. Paint (drawing, if the second trigger we call it redrawing)

   6. If there is still time left in this frame after the first five steps are executed, call the function registered in window.requestIdleCallback

   ​ That is to say, the total execution time of the first five steps (we don’t need to consider the others for now) must be within 16.6 milliseconds to ensure user experience.

   ​ Conclusion: We can use requestAnimationFrame to implement the animation logic, and we don’t need to pass the time. The animation is triggered here. Generally, it can reach 60 frames in one second (of course, the logic in the animation should not be too complicated. In this step, if the execution time If it is too long, it will also cause frame drop (not reaching 60 times in 1 second), so that the user decides to freeze), the specific usage is as follows (realize the effect of an element moving left and right in the horizontal direction)

    <div style="width:50px;height:50px;background-color: red;" id="myDiv"></div>
    
     let originStep  = 10;   
     let step = 10;//每次移动的距离
     let direction = 1;//移动的方向1表示向右，-1表示向左
     let left = 0;//元素的偏移量
     const offsetWidth = document.body.offsetWidth;//body的宽度
     const el = document.getElementById('myDiv');
     const eleWidth = el.offsetWidth;//元素的宽度
     const runAnimation = () => {
         if(direction === 1){
         	const remainOffset = offsetWidth - (left + eleWidth);//向右移动时，距离右边距剩余距离
         if(remainOffset < step && remainOffset !== 0){
         	step = remainOffset;//保证向右的移动不会超出右边接线
         }
         }else{
         	step = originStep;//当向左移动的时候恢复移动速度
         }
         if(left <=0){
         	direction = 1;
         }else if(offsetWidth <= left + eleWidth){
         	direction = -1;
         }
         const xOffset = left += step*direction;
         el.style.transform = `translate(${xOffset}px,0)`;
         requestAnimationFrame(runAnimation);//在注册回调
      }
      requestAnimationFrame(runAnimation)
   

   ​

   • requestAnimationFrame will return an id after execution, just like a timer, we can cancel the corresponding requestAnimationFrame according to this id

     const cancelId = requestAnimationFrame(runAnimation);
     cancelAnimationFrame(cancelId);
     

   ​

4. requestIdleCallback

SSR(Server Side Render)和CSR(Client Side Render)

SSR

​ The page displayed in the browser is a template spliced ​​by the server, then transmitted to the browser through the network, and rendered directly by the browser. Since the content of the web page is carried in the network transmission path, the ssr mode is very suitable for SEO , At the same time, the speed of assembling templates on the server will be much faster than that of the browser, so the SSR mode will also improve the rendering speed of the first screen of the website. But it will also increase the pressure on the server side.

ssr two advantages

​ Conducive to seo

​ Shorten the rendering speed of the first screen

CSR

webpack

What does webpack do?

What is webpack? A modular packaging tool, the principle is that we must provide it with an entry js file, and then webpack will generate a dependency graph based on the entry file, and then escape and compile the files in the dependency graph. Package, and finally generate a resource file that the browser can recognize (css js...)

effect:

1. 让项目模块化
2. 编译scss/less  .vue   jsx 
3. 性能优化：压缩、代码拆分、图片转base64格式。。。
4. 工程化：自动编译、打包

What are the common configuration items of webpack? (webpack.config.js)

1. entry: entry file

2. output: export file

3. module

   module:{
   rules:[
   	{
   			test:/\.css$/,
   			use:['style-loader'，'css-loader'],//从后往前执行
   		}
   	]
   }
   

​

network related

What are the commonly used http status codes?

1. 200 
2. 404 
3. 401  
4. 500
5. 304  
6. 301 资源永久重定向

The difference between http and https

Security: HTTPS protocol encrypts data when transmitting data, while HTTP transmits in clear text

Performance: The transmission performance of the http protocol is higher, because for the transmission of the same amount of data, since the https protocol requires encryption processing, the amount of data on the line will eventually be larger

Cost: https requires the purchase of a certificate, http is free

The default ports are different: https–443 http–80

The difference between websokect and http

Websokect can realize two-way communication between the client and the server, while http can only be one-way communication. The client requests the server, and the server cannot actively push data to the client.

Different application scenarios

​ Websokect Real-time update of real-time communication data

http simple client request server

business related

How to deal with permission issues

For example, in the background management system, different roles see different sidebar items. How to achieve this?

First, the sidebar is abstracted into an array, and each element (object) in the array represents each sidebar, and in each element, we need to add a dictionary representing the role to distinguish what kind of role to be able to see the current sidebar item,

After wiring, it is necessary to filter the current array according to the role of the current login person, and return the sidebar data that the current role can see

Finally, according to the obtained data, perform a traversal loop to render the sidebar

How the front end implements authentication

1. Session In the early years before the emergence of token, browser client authentication was implemented through session. Every time a user logs in, the user name and password are transmitted to the back-end server, and the back-end server verifies the user name and password. If the verification passes, it will Generate a sessionId and store it in the server. At the same time, when the request is responded to the client, the Set-CookiesessionId will be delivered and stored in the client (browser) through the field HTTP-cookies. When the client sends a request to the server next time, it will automatically Carry the cookie with sessionId on it. In this way, the back-end server gets the sessionId and compares it with the previously stored sessionId. If they are the same, it determines that the user is the previous user, and then responds the data to the client.
2. Token sends the user name and password to the back-end server every time the user logs in. The back-end server verifies the user name and password. If the verification is passed, it will generally be encrypted by combining user JWTinformation with a secret key (the secret key will be stored in the server). token, and then return the token to the client, and the client generally stores the token in local storage, such as localStorageor sessionStoragein. Later, when sending the interface, the token will be taken out from the local storage, put in the request header Headerand sent to the backend server. The backend gets the token, and then tries to decrypt the token through the previous secret key. If it can be decrypted, it means that the token is legal, otherwise it is illegal.
3. The difference between session and token
   1. Session needs the help of cookies, and cookies are only supported by browsers. If you want to make an app, there is no way to use sessions to achieve authentication. Only use token
   2. Seesion needs to store the sessionId corresponding to each user in the server, and token only needs to store a secret key.

How to implement data visualization (echart)

option setOption(option)

How to implement real-time data update websocket

How to achieve a senseless refresh of the token in the project

How to improve efficiency when path jump is required in uni-app

​ Use uni.preloadPage to preload pages, but this method has compatibility issues and is only valid on the app side and H5 side

Please tell me how to do the WeChat payment process in your project

Talk about the process of WeChat authorization login in the project. How the front and back ends interact

​ Reference: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

How to render permissions in the project, if the permission granularity of the backend is to be controlled to how to implement each function

Why use uni-app, what compatibility issues you encountered during project development, and how to deal with them

1. Page preloading, only supported by H5 and APP, not supported by applets
2. Set the background image for the element in css, which is supported on the H5 side, but not supported by the applet (you can use the inline style to set the background image on the applet side)
3. The wildcard * in css is supported on the H5 side, but the applet does not support it
4. On the non-H5 side, you cannot use ref to refer to built-in components (such as view, etc.)
   • If you want to write different code for different platforms, you can use conditional compilation

What is the biggest problem encountered in the project

If you want to send 5 interfaces at the same time on the page, after all the interfaces are successfully responded, then do other operations, how to achieve this

​ Promise.all also pay attention to compare with promise.allSettled

How the project is packaged and launched, and what needs to be configured when packaging

How to implement pull-up loading and pull-down refresh in the project, if you want to implement it yourself, let me talk about the idea

After the front end logs in, pass the id to the back end to obtain data. Is this method safe? how did you avoid

1. 把get方式换成POST
2. 如果我用抓包工具，把数据抓下来，在伪装发送接口，怎么办？-----http-->https

How to package the project as apk, if it is an ios system, how to package it

How do the members of the team work together

How to publish and launch WeChat Mini Programs

The WeChat applet is released online, just click the upload button in the upper corner. After uploading, WeChat official will do a review. After the review is passed, we can search for the applet through WeChat.

browser

What is cross domain? How to solve

Cross-domain is a problem caused by the same-origin policy of the browser. When any of our protocols, domain names, and port numbers are different, it will lead to the emergence of cross-domain

In a common scenario, cross-domain occurs when the front-end requests the back-end API, how to solve it?

1. Front-end processing: proxy server webpack-dev-server (vue.config.js)

   devServer:{
   	proxy:{
   		"/api":{
   			target:"http://localhost:8000"
   		}
   	}
   }
   

2. backend processing

   1. set response header

Process of browser rendering page

​ The GUI rendering thread is responsible for the rendering process of the interface

​ Parse html/css at the same time

Parse html ----> DOMTree

Parsing css—> CSSTree

Then merge DOMTree and CSSTree to form RenderTree (rendering tree)

Next start layout (layout, reflow)

draw (redraw)

According to these processes, we can know some things to pay attention to when writing html (performance optimization)

1. css放在头部
2. js放在尾部，因为js是有js引擎去编译和执行的，而js引擎和GUI渲染引擎是互斥的

What is the difference between redraw and reflow

Data structure related

What data structures do you know?

stack, queue, linked list, binary tree

Space Complexity and Time Complexity

These two concepts are two dimensions used to measure the pros and cons of an algorithm. Space complexity indicates the amount of memory consumed by the algorithm, while time complexity indicates the time consumed by an algorithm. In general, we pay more attention to the time consumption of an algorithm. If the time is too long, it is considered that this algorithm is not very good and needs to be optimized, so it is said that space is used for time.

The time complexity can be expressed in big O notation.