One: JavaScript

1. What is a closure? pros and cons? How to solve the disadvantages?

What is a closure : In JS, the inner function can access the variables of the outer function, and the outer function cannot manipulate the characteristics of the variables of the memory function. We call this feature closures.

Benefits of closures :

Isolate the scope and protect private variables; with closures, there are local variables, otherwise they are all global variables.
Let us use callbacks to operate inside other functions;
Variables stay in memory for a long time and will not be recycled by the memory recovery mechanism, that is, to extend the life cycle of variables;

Disadvantages of closure : the inner function refers to the outer function variable, and the inner function occupies memory. If the memory is not released, if there are too many, it is easy to cause a memory leak.

Solution : If the account cannot be canceled automatically, it should be recovered manually in time, and the reference of the function will be assigned null after use.

2. Deep copy

1. What is the difference between deep copy and shallow copy?

The levels of copying are different. Deep copying means that changes in each layer of data will not affect the original object and the new object. In shallow copying, only the changes in the attributes of the first layer do not affect each other, and the changes in deep data will also affect each other.

Shallow copy: Object.assign
Deep Copy: JSON.stringify and JSON.parse

2. What are the disadvantages of JSON's stringify and parse processing?

If any attribute in the object is function or undefined, it will be filtered out after processing;
If the attribute value is an object, and the instance object generated by the constructor will discard the object constructor;

3、$.extend()

Using the extend method of jquey can not only realize deep copy, but also realize deep merge. specific usage

Deep copy: $.extend({},targetObject) // targetObject is the object to be copied

Deep merge: $.extend(true,{},targetObject1,targetObject2) // You can merge two objects deeply and then return a new object

3. How to judge the empty object? How to distinguish data types?

Judge empty object

1. Use JSON's stringify and parse to convert it into a string, and compare it with '{}';
2. Use ES6 to judge whether the length of the return value array of Object.keys(targetObject) is 0;
3. Use ES5 to judge whether the length of the array returned by Object.getOwnPropertyNames(targetObject) is 0;

Differentiate data types

let a = [1,2]
Object.prototype.toString.call(a)  // '[object Array]'

4. How to change the direction of this? the difference?

call/apply

let a = {
    name: 'sunq',
    fn:function(action){
        console.log(this.name + ' love ' + action);
    }
}
let b = {name:'sunLi'}

// 正常的this指向
a.fn('basketball');   // sunq love basketball
// 改变this指向，并体现call与apply的区别
a.fn.apply(b,['football']); // sunLi love football
a.fn.call(b,'football'); // sunLi love football

// call 和 apply 区别: call 和 apply 都是可以改变this 指向的问题, call 方法中传递参数要求一
// 个 一个传递参数。 但是apply 方法要求传递参数是一个数组形式。

bind

// 还是上面的示例，bind也可以实现call和apply的效果。
// bind的不同之处在于bind会返回一个新的函数。如果需要传参，需要再调用该函数并传参
a.fn.bind(b)('piano'); // sunLi love piano

5. How to do sandbox isolation?

It can be achieved by using iframe, variable isolation

6. Browser storage, the difference between them?

localStorage: permanent storage, stored in key-value pairs, storage space 5M
sessionStorage: Cleared when the tab/browser is closed
cookie: as the request is sent, it is deleted by setting the expiration time
session: saved on the server side

localStorage/sessionStorage is a property of window, cookie is a method of document

7. What are the commonly used array methods?

Change the original array: push, pop, shift, unshift, sort, splice , reverse
Do not change the original group: concat, join, map, forEach, filter, slice

The difference between slice and splice?

The meaning of slice slice is to get the range array according to the incoming start and end subscripts.
splice can implement deletion and insertion operations according to the number of incoming parameters, and directly operate the original array. The first parameter is the starting subscript, the second is the number of deletions, and the third is the data to be added.

How to filter the weight of the array?

8. What is the order of Dom event flow? What is event delegation?

When an element on the page is clicked, the element is captured layer by layer from the document down. Then it bubbles upwards, triggering layer by layer.

Event delegation is to write the event on the parent element, and e.target is the smallest element when the event is captured, that is, the selected element. So you can operate the selected elements according to e.target. In this way, there is no need to bind events to each child element, and the code is more concise.

9. Understanding of the prototype chain?

js implements object-oriented through prototype chain simulation. For example, by instantiating a constructor, each object can be mounted with its own exclusive properties, and by assigning a method to the prototype of the class, it is a method shared by all objects. Each instantiation no longer assigns methods on the prototype chain.

10. What is the difference between anti-shake/throttling?

Difference: anti-shake will only execute the trigger function after the last event, and throttling will ensure that the event function is triggered within the specified time period no matter how frequent the event is.

Anti-shake:

The principle is to maintain a timer and combine many identical operations into one. It is stipulated that the function is triggered after the delay. If the function is triggered before then, the previous timing will be canceled and the timing will be restarted. Only the last operation can be triggered. For example: the input of real-time search will not be sent if it is input all the time.

let input = document.querySelector("input");
let time = null;//time用来控制事件的触发

input.addEventListener('input',function(){
   //防抖语句，把以前的定时删除，只执行最后一次
   if(time !== null){
     clearTimeout(time);
   }
   time = setTimeout(() => {
     console.log(this.value);//业务实现语句，这里的this指向的是input
   },500)
 })

Throttling:

The principle is to judge whether a certain time is reached to trigger an event. A function can only be triggered once in a certain period of time. For example: triggering multiple times within the specified time is invalid

    //节流
    function throttle(fn, time) {//连续触发事件  规定的时间
        let flag = false;
        return function () {
            //使用标识判断是否在规定的时间内重复触发了函数，没有就触发，有就不触发
            if (!flag) {//不为假时 执行以下
                fn();//触发事件
                flag = true;//为真
                setTimeout(() => {//超时调用（在规定的时间内只执行一次）
                    flag = false;
                }, time);
            }
        }
    }
  
    mybtn.onclick = throttle(btn, 3000);//单击事件   节流(btn,3s时间)

Two: Html

1. What is redrawing and rearrangement (reflow/refactoring/overloading)? How to optimize?

The adjustment of the style will cause redrawing, such as font color, background color adjustment, etc.
Dom changes will cause rearrangement, such as positioning changes, element width and height adjustments

Avoid circular insertion into dom, such as table rows. You can generate multiple doms in a js cycle and insert them at one time.

2. What are the new features of HTML5?

Local storage, such as localStorage, sessionStorage
Semantic tags, such as header, footer, nav, etc., make the code structure clear and conducive to SEO
canvas
svg
Web worker, create another thread outside the main thread, which can interact with the main thread
drag and drop function

Three: CSS

1. How to realize a pop-up box centered up, down, left, and right with an unfixed width?

方法一：
.pop{
    width: 300px;
    height: 300px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 1px solid red;
} 

方法二：
.chartLengend {   // 父元素
    width: 60px;
    height: 40px;
    position: relative;
    .line {       // 子元素
      width: 100%; 
      height: 3px;
      background-color: #DEA182;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 2px;
    }
}

2. What is the difference between pseudo-classes and pseudo-elements?

Pseudo-classes are essentially used to make up for the lack of regular css selectors, because if there is no one, we may need to write an extra class, so it is called a pseudo-class

.class:last-child{}
.class:first-child{}

a:link    {color:green;}
a:visited {color:green;}
a:hover   {color:red;}
a:active  {color:yellow;}

Pseudo-elements essentially create a virtual element with content, such as ::before ::after. Because it is equivalent to one more element/node, it is called an element

//  :before用于在某个元素之前插入某些内容。
//  :after用于在某个元素之后插入某些内容。
css
p:before{
    content:"Read this: ";
}

html:
<p>I live in Ducksburg</p>

页面展示：
Read this: I live in Ducksburg

F12看dom中：
before
Read this: I live in Ducksburg

4: Vue

1. What is a single page application? Advantages and disadvantages? How to make up for the shortcomings

A single page changes the content of an entry DOM through routing, and the entire application has only one html page

Advantages of SPA: good user experience, no white screen without page switching;

Disadvantages of SPA: the first screen loads slowly, which is not conducive to SEO

SPA compensation: relieve the first screen slowness through compression and lazy loading of routes; solve SEO problems through SSR server-side rendering;

2. What are the components and communication methods?

2.1. What is a component?

Components are reusable Vue instances with a name: in this case . We can use this component as a custom element in a Vue root instance created by new Vue :

Declare components

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {
   
   { count }} times.</button>'
})

Using components (treating components as custom elements)

<div id="components-demo">
  <button-counter></button-counter>
</div>

Import components

new Vue({ el: '#components-demo' })

2.2. Pass value from parent to child

Props are some custom attributes that you can register on components . When a value is passed to a prop attribute, it becomes a property of that component instance . To pass a title to the blog post component, we can use a props option to include it in the list of props the component accepts:

Declare prop inside the component

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{
   
   { title }}</h3>'
})

Called in the parent component, assign a value to the prop, and pass it to the component

<blog-post title="My journey with Vue"></blog-post>

2.3. Parent component listens to child component events

In fact, it is by declaring the method in the parent component and binding it to the child component. Pass parameters to the parent component in the form of triggering methods inside the child component to achieve the effect of passing values from the child to the parent. as follows

The method is declared in the parent component and bound to the child component

<template>
<lineChart v-on:getQuotaVal="getQuotaVal"></lineChart>
</template>
<script>
 methods: {
    // 本事件用来监听折线图子组件，从子组件拿到指标数据
    getQuotaVal:function(obj){
      this.lineDateType = obj.lineDateType; // 这样父组件就拿到了，子组件的obj数据
    }
  },
</script>

Subcomponent trigger method

that.val = {};
that.$emit('getQuotaVal',that.val); // 将子组件的数据发送过去；

2.4. Interaction between brother components

Use EventBus（事件总线）, vue.$bus.on and emit methods.

Initialization - global definition, eventBus can be bound to the prototype of the vue instance, or directly to the window object.

//main.js
Vue.prototype.$EventBus = new Vue();

trigger event

this.$EventBus.$emit('eventName', param1,param2,...)

listen event

this.$EventBus.$on('eventName', (param1,param2,...)=>{
    //需要执行的代码
})

Remove listener event

In order to prevent the event from being triggered repeatedly when listening, it is usually necessary to remove the event listener when the page is destroyed. Or during the development process, due to hot updates, events may be bound and monitored multiple times, and event monitoring needs to be removed at this time.

this.$EventBus.$off('eventName');

3. What is the difference between v-if and v-show?

v-if controls the existence of Dom, v-show controls the style

4. What is vuex? About the steps to use

Vuex is a state management tool that centrally manages the state data of all components. Manage components uniformly, abstract the state of components into a store file, and trigger functions in mutations through the commit method to change component properties.

Components can use the computed attribute to monitor data changes to control the display and hiding of components. The chestnut of the loading component is given as follows

In the loading component, according to the Loading data, the DOM is controlled to be visible or hidden

<template>
    <div class="cover" v-show="Loading">
        <div>加载中</div>
    </div>        
</template>

<script>
  import Store from '../../store'
  export default {
    name: "Loading",
    computed:{
      Loading(){
        return Store.state.Loading; 
      }
    }
  }
</script>

Vuex centrally manages the state and creates a js file called store

import Vuex from 'vuex';
Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    // Loading组件
    Loading:false,
  },
  mutations: {
    // Loading组件
    ChangeLoading:function (State,Value) {
      State.Loading = Value;
    }
  },
});

In the component that uses loading, do this

import Store from '../../store'
Store.commit("changeFooter",true);

The difference and use of mutation and action in vuex?

5. What is the difference between vue watch and computed?

computed

Calculate the result and return it, which will only be triggered when the calculated property changes (ie: the result of the calculated property will be cached, unless the dependent response property changes, it will be re-reached).

The above loading component also uses the computed attribute.

watch

Monitor a certain value, and perform related operations when the monitored value changes.

The difference from computed is that watch is more suitable for monitoring a value change and performing corresponding operations, such as requesting background interfaces. Computed is suitable for computing existing values and returning the result. Listening to simple data types:

data(){      
    return{        
        'first':2     
    }   
},   
 watch:{      
     first(){        
         console.log(this.first)    
    }   
 },

6. What is Vue's virtual Dom? Talk about your understanding of the vue diff algorithm? The role of the key?

7. Talk about the understanding of the two-way binding principle of vue?

Two-way binding mainly means that when modifying data, the view will be automatically refreshed without manipulating the DOM. The data bound when manipulating the view will also change accordingly.

data => view

When Vue initializes an instance, it will use the Object.defineProperty method to add a setter function to all data to monitor data changes. When the data is modified, a new virtual DOM tree is generated, compared with the old virtual DOM, and the nodes that need to be updated are found and updated according to the comparison results.

view => data

From the view to the data is relatively simple. After the view changes, it triggers monitoring such as oninput, etc., and modifies the data in the bound method.

8. How to optimize the first screen of Vue?

Use lighter components, such as echart corresponding to vue-chart
Vue-cli enables package compression and background access with gzip;
Routing lazy loading, subcontracting;
Configure to delete the log log when packaging
If the resources are too large, they can be imported using the cdn mode, and they will no longer be packaged locally

9. What are the defects of vue2? How to solve the situation that a certain item in the vue2.0 array changes, but the page does not change?

Defect: If the data is directly adding attributes to an object, or if the data is an array and manipulates the array items by subscripting, the page cannot trigger an update.

Reason: Vue will perform getter/setter conversion on the property when initializing the instance, so the property must exist on the data object for Vue to convert it to reactive. Regarding the array, the author realizes the corresponding data binding by rewriting the methods of push/pop/shift/unshift/splice/reverse/sort, and the rest of the operations cannot trigger page updates;

Countermeasure: You can use Vue.$set(obj,key,value) for objects, and this.$set(obj,key,value) for components to add new ones, and modify the properties of Vue to update the view accordingly. Arrays can also be manipulated through Vue.$set(obj,key,value), or those methods rewritten by the author;

10. Should the asynchronous operation be placed in created or mounted?

If some data needs to be rendered at initialization, such as the drop-down content of the select drop-down box, request it in mounted. The benefits are as follows

Page initialization is faster, reducing user waiting time
Putting it in created is helpful for consistency, because ssr does not support beforeMount and mounted hook functions

11. What are the hook functions of vue-router?

Component internal hooks: beforeRouterEnter(), beforeRouterLeave, beforeRouterUpdate

12. How to jump to the page? How to pass parameters across pages?

router-link label jump
The route jumps as follows, and the parameters are passed by the way. as follows

this.$router.push({
    path: '/url',
    query: {
        par:parid
    }
})

accept parameters

var parid = this.$route.query.par;

13. What is the life cycle of vue subcomponents? When are child elements mounted?

Parent: beforeCreate first initializes the parent element

Parent: created parent element mounts data

Parent: beforeMounte The parent element starts to mount the dom, and the child component is encountered in the tpl

Child: beforeCeate subcomponent starts to mount data

Child: created child element data mounted successfully

Child: beforeMount child element starts to mount dom

Child: mounted child element dom mount ends

Parent: mounted The parent element dom mount is over

Parent: beforeUpdate The following starts similar to the dom event flow

Child: beforeUpdate

child: updated

Father: updated

Father: beforeDestory

Child: beforeDestory

child: destroyed

Father: destroyed

Child elements start loading when the parent element mounts dom. After the child element finishes loading the dom, the parent element ends the dom mount. The latter is similar to the dom event flow.

14. What is the difference between import of vue and require of node?

JS supports two modularization methods, commonjs and ES6.

commonjs is used for nodejs to load modules synchronously. ES6's import loads modules asynchronously in order not to get stuck.

The new version of Nodejs also supports the use of import, but you need to modify the file extension to .mjs, or set the type field to module in package.json.

Five: ES6

1. What is the difference between arrow function and es5 function?

The this point of the arrow function is fixed, and the ordinary this point is variable

let a = {
    name: 'sunq',
    fn:function(action){
        console.log(this.name + ' love ' + action);
    }
}
let b = {name:'sunLi'}

// 正常的this指向调用他的对象
a.fn('basketball');   // sunq love basketball
// 改变this指向
a.fn.apply(b,['football']); // sunLi love football

// 如果将a对象的fn函数改成箭头函数，this.name会是undefined
// 箭头函数的this指向不会改变，且总是指向函数定义生效时所在的对象。

Cannot be used as a constructor, and cannot be used with newcommands on arrow functions, otherwise an error will be thrown.

var Person = function(name){
    this.name = name;
}
let sunq = new Person('sq'); // {name: 'sq'}

var Person = (name) => {
    this.name = name;
}
let sunq = new Person('sq'); // 报错 Person is not a constructor

no argumentsobject
Commands cannot be used yield, so arrow functions cannot be used as Generator functions.

2. What is the new method provided by ES6 to solve asynchronous interaction? the difference?

Promise、Genarate、async\await

3. What are macro tasks and micro tasks? Execution order?

4. After requesting two interfaces in parallel first, and then requesting the third interface, how to deal with it?

Use the Promise.all() method to pass two promises into the all method, get the asynchronous result and then request the third one

I know the grammar clearly, but when the interviewer asks me, it just doesn’t connect with the actual scene.

5. The data type of js

string number null undefined boolean object bigInt symbol

6. Talk about the method details of several new ES6 arrays

map instance method, similar to forEach, but returns a new array

find and findIndex instance methods, pass in an anonymous function, and return qualified items or subscripts

... The basic function of the expansion operator is to convert an array into a sequence of parameters separated by commas

7. The difference between for in and for of

for in is suitable for traversing objects, and traversing arrays gets subscripts
for of is suitable for traversing the array, and traversing the array directly gets the items of the array. for of can only traverse types with iterator interface.

8. How to execute multiple data requests sequentially?

Use the then method of promise, or write multiple promises, and use await in async to execute sequentially.

9. What is the difference between the understanding of proxy and defineProperty?

Proxy directly sets interception for all properties, and defineProperty only sets the specified settings
After the proxy is intercepted, it needs to be called with the Proxy instance, and defineProperty can directly use the original object

// es6的proxy
let obj = {name:1,sex:2}
let p = new Proxy(obj,{
    get:(value,key)=>{
        return 'sq的'+obj[key]
    }
});
p.name // sq的1
p.sex // sq的2

// es5的代理
let newObj = {name:1,sex:2}
Object.defineProperty(newObj,'name',{
    get:function(val){  //defineProperty中get函数没有入参
        return 'sq的' + val
    }
})
newObj.name  // sq的undefined
newObj.sex // 2

10. Talk about the principle of promise?

六：ElementUI

1. What to do if you need to modify the style?

Write another style sheet introduction, !important coverage
style penetration

2. How to extend the function of element-ui component through inheritance?

Extend the function of element-ui component by inheritance

Seven: Jquery

1. How to get the last li under the same cl?

$("#id").children().eq(3).remove();

// 获取多个class中的某一个
$(".className").eq(n).attr("class") // 可行
$(".className")[n].attr("class") // 不可行

2. What is the difference between window.load and $(document).ready()? Execution sequence?

window.onloadIt must wait until all elements in the page including images are loaded before executing.
$(document).ready()It is executed after the DOM structure is drawn, without waiting until the loading is complete. Usually abbreviated as$()

Summary: The ready event completes before the load event loads.

3. How to bind a click event?

// 方式一
$("#id").on('click',function(){});
// 方式二
$("#id").click(function(){});
// 方式三
$("#id").bind("click",function(){});

4. What animations are commonly used in Jquery?

Eight: The use of Git

1. What sentences are commonly used?

pull、commit、push、reset、merge、log、branch、stash

How to use stash?

git stash -m 'xxx'
git stash pop

2. Version rollback statement? What is the difference between soft and hard?

git reset --soft version number

git reset --hard version number

soft will back off, and the code changes are still saved locally. hard will delete local changes, completely erasing traces of this version. details

3. Precautions for merging branches?

Before merging your own branch into the target branch, it is best to merge the target branch into your own branch to resolve conflicts, and then merge your own branch back into the target branch.

4. How to carry out branch management?

Nine: Agile development

1. What is agile development?

Personal understanding, agile development is to split a large requirement into multiple independent small requirements. Each small requirement can be independently developed, tested, and launched, and the entire system can be completed step by step. The cycle of each version may be relatively short, such as 2 weeks or 4 weeks.

For example, if a company needs to develop and maintain a huge platform, it may outsource the platform to multiple companies. If the above method is used to develop in parallel, the construction period can be significantly reduced.

If you want to ensure that each version goes online quickly and smoothly, you need to have perfect role support and process specifications.

2. What are the benefits of agile development?

Personal understanding, when the team is a little bigger and the schedule is tight, how to ensure the quality of the version in an orderly manner requires an effective process.

For example, a team receives three requirements at the same time, and each requirement is distributed to multiple front-end and back-end developers. As the person in charge of the version or project, how to control everyone's code quality, completion progress, process traces, and risk avoidance is actually difficult.

If a requirement passes, requirement clarification, scheme design, design review, requirement delivery, version scheduling/review, development division, version development, test case review, internal testing, code review, gray scale trial & testing, version release, business acceptance Waiting for the complete process can effectively reduce the chance of making mistakes. It is also convenient to find the responsible person in the later stage, summarize the problems in each link, improve the work efficiency of the team, and make the delivery more and more stable.

Ten: Open Source Projects

It is written in the interview requirements of some companies, and those who maintain open source projects and have 50 stars are preferred.

I usually maintain a personal website with management/client/server: sunq's blog

When you have nothing to say during the interview, you can talk about it to ease the embarrassment.

The code of the blog is all open source: source code Github address

Eleven: Network related

1. What is the difference between http and https?

HTTP clear text transmission, the data is not encrypted, the security is poor, HTTPS (SSL+HTTP) data transmission process is encrypted, the security is better.
To use the HTTPS protocol, you need to apply for a certificate from a CA (Certificate Authority, digital certificate certification authority). Generally, there are few free certificates, so a certain fee is required. Certificate Authorities such as: Symantec, Comodo, GoDaddy, GlobalSign, etc.
The response speed of HTTP pages is faster than that of HTTPS, mainly because HTTP uses TCP three-way handshake to establish a connection, and the client and server need to exchange 3 packets, while HTTPS adds 9 packets required for ssl handshake in addition to the three packets of TCP. So there are 12 packages in total.
http and https use completely different connection methods and different ports, the former is 80 and the latter is 443.
HTTPS is actually the HTTP protocol built on top of SSL/TLS, so comparing HTTPS consumes more server resources than HTTP.

2. Common status codes

200: successful return
304: The web page has not changed and has been cached, and has not been re-requested
404: The requested resource is not available
500: internal server error
503: Server timed out

Twelve: webpack

1. The difference between dependencies and devDependencies

When installing --save -dev will be placed in devDependencies, --save will be placed in dependencies

The packages used in the development environment are installed in devDependencies, such as eslint and vue-cli-serve;

The packages installed in dependencies are the packages that need to be used in both production and development environments, such as vue, element, vant, etc.

The dependent modules in devDependencies will not be packed into the package in the production environment

Thirteen: Page Optimization

1. The loading of a certain page is slow, from which directions should we analyze and solve the problem?

traditional page

First determine whether the interface is slow or the page is slow. If the interface is slow, the backend is optimized.

If the loading of the front-end page is slow, check whether it is because the resources such as pictures are too large, and try to replace pictures with different formats and volumes. It is time-consuming to locate whether it is a function of some data processing. Or whether to operate the DOM in a loop, js generates the dom and then inserts it in batches.

If the page is directly stuck, it is necessary to analyze whether there is a memory leak. For example, the scheduled refresh of the large screen display is stuck, and the troubleshooting ideas can be as follows:

Use chrome's task manager to operate the page to observe the changes in memory usage. Which operations are located and which piece of code causes the memory usage to soar.

Because js does not have the syntax to directly release the cache, it can only be automatically cleaned up by the browser's garbage collection mechanism. What we need to do is to empty the unnecessary variables in time.

Pay special attention to whether variables are emptied in time after the loop instantiation of big data. Whether there is a memory leak in the closure method such as the timer, whether to clear the previous map data when rendering the map in a loop, etc.

single page application

A single page generally does not load a certain page slowly, and generally concentrates on the white screen for a long time when the first screen loads. The processing method can refer to the above.

2. Use cache

Some interfaces do not need to be requested every time the page is opened, and cookies can be used for timing. Do not refetch for a certain period of time.
Some data can be loaded once during initialization, and can be timed through cookies, and no request is required within a certain period of time.
Some data can be stored in localstorage, the input is filled by default, and the cache is rewritten only when it is updated. This is just a better user experience

Fourteen: Node.js

1. Which plugins (express middleware) have you used?

Cors solves the cross-domain problem of express
body-parser parses post data
mongoClient mongodb official Node.js driver
Crypto is used to encrypt and add signatures
nodemailer is used to send emails

2. What is the difference between mongodb and mysql?

mongodb is a document-type non-relational database, mysql is a relational database
mongodb stores data in the form of json, fields can be added at will, mysql fields need to be determined in advance
Mysql multiple tables can only establish relationships through foreign keys, mysql can be nested in multiple layers or can be split and associated

Summary of front-end interview questions in 2023