My brief introduction: I worked for two years as an undergraduate. I mainly used VUE in my previous work (so there were no react related interview questions). The following are the interviews from the beginning of August to the middle of September this year. If you have any questions, welcome to correct (bow 🙇♀️), looking forward to discussing and growing together ~

Byte non – central area commercialized one after another

  1. What are the ways in which Vue’s parent and child components pass values? Talk more about it.

  2. Handwriting EventEmitter to implement on/emit/ Off method.

  3. The responsive principle of Vue.

  4. If foo=true, then foo=false, and then a=123, will the page render again?

    <template>
<div v-if=foo>
{{ a }}
</div>
<div v-else>
{{ b }}
</div>
</tempate>
Copy the code

  5. What do you know about preflight? Talk about it.

  6. Do you understand the workflow of Webpack?

  7. Plugins are mentioned. Now there are two plugins. Can plugin1 send events that plugin2 listens to?

  8. An event loop code problem

    async function async1(){
  console.log('async1 start')
  await async2()
  console.log('async1 end')}async function async2(){
  console.log('async2')}console.log('script start')
setTimeout(function(){
  console.log('setTimeout')},0)  
requestAnimationFrame(function(){
    console.log('requestAnimationFrame') 
})
async1();
new Promise(function(resolve){
  console.log('promise1')
  resolve();
}).then(function(){
  console.log('promise2')})Copy the code

  9. Algorithm: Find the longest substring that does not contain repeated characters and calculate the length of the longest substring. For example, if you type abcabcbb, then the oldest string without repeating characters is ABC, which is 3 in length.

Byte non – central area commercialization of two aspects

  1. Introduce HTTPS.

  2. Do you know how to handle HTTP requests in HTTPS?

  3. Know the features of HTTP2?

  4. I just mentioned that HTTP2 has a server push feature. Http2 and WebSocet both have server push functionality. Will WebSocket be replaced by HTTP2? Why is that?

  5. Map is implemented using Array’s Reduce method.

    Array.prototype.myMap(fn,_this) {
   let result = [];
   this.reduce((prev,cur,index,arr) = > {
       result[index] = fn.call(_this,arr[index],index,arr);
   },0)
   return result;
}

//arr.map((item,index,arr) => fn(item),_this);
//arr.reduce((prev,cur,index,arr) => {},start);
Copy the code

  6. Event loop problem

    async function f1() {
    return new Promise((resolve) = > {
        console.log(4)
        resolve()
    }).then(() = > {
        console.log(5)})}async function run() {
    console.log(1)
    new Promise((resolve) = > {
        console.log(2)
        resolve()
    }).then(() = > {
        console.log(3)})await f1()
    setTimeout(() = > {
        console.log(6)},0)
    console.log(7)
}
run()
Copy the code

  7. Given a binary array, find the length of the longest continuous subarray with the same number of 0s and 1s, for example [0,0,0,1,1,0,1,0]=>6

    // Write violence first
// function test(arr) {
// let maxLen = 0;
// for(let i=0; i
// for(let j=i+1; j
// let temp = arr.slice(i,j+1);
// let count0 = 0,count1 = 0;
// temp.forEach(item => {
// if(item == 0) {
// count0++;
// } else {
// count1++;
/ /}
/ /})
// if(count0 == count1) {
// maxLen = Math.max(maxLen, j - i + 1);
/ /}
/ /}
/ /}
// return maxLen;
// }

/ / prefix and
function test(arr) {
    let len = arr.length;
    let map = new Map(a);let count = 0;
    let res = 0;
    / / [0] - > 0
    for(let i=0; i<len; i++) {
        count += arr[i] == 1 ? 1 : -1;
        if(map.has(count)) {
            res = Math.max(res,i-map.get(count));
        }else{ map.set(count,i); }}return res;
 }
console.log(test([0.0.0.1.1.0.1.0.0]));
Copy the code

Byte non – central area commercialization of three aspects

I don’t remember very clearly, at that time I didn’t record the topic because I felt the surface was so general. I finished soaking in the pool for three sides for a week before I was scooped up

  1. deepclone

  2. How many modes does vue-Router have? What’s the difference? What should be configured in background 404 in history mode?

  3. Algorithm: Given an integer array nums, find a contiguous subarray with the maximum sum (the subarray contains at least one element) and return the maximum sum.

    var maxSubArray = function(nums) {
    // let res = nums[0];
    // let sum = 0;
    // for(let num of nums) {
    // if(sum > 0) {
    // sum += num;
    // } else {
    // sum = num;
    / /}
    // res = Math.max(res,sum);
    // }
    // return res;
    // let res = nums[0];
    // let tep = 0;
    // nums.forEach(num => {
    // tep = Math.max(num+tep,num);
    // res = Math.max(res,tep);
    // })
    // return res;

    let n = nums.length;
    if(n == 0) return 0;
    let dp = new Array(n);
    dp[0] = nums[0];
    for(let i = 1; i < n; i++) {
        dp[i] = Math.max(nums[i], dp[i-1]+nums[i]);
    }
    let res = dp[0];
    for(let i = 0; i < dp.length; i++) {
        res = Math.max(res,dp[i]);
    }
    return res;
};
Copy the code

Shopee Food has done everything

  1. A closure output problem.

  2. Write a shake off. You are writing a non-immediate version, can you write another immediate version?

  3. An event loop code output question, and say why.

  4. Cross domain.

  5. Introduce precheck requests.

  6. Algorithm: raise all attributes of the object to the first layer.

function transfor(obj,stack,result) {
    for(let key in obj) {
        if(parseInt(key).toString() == 'NaN') {
            stack.push(key);
        } else {  
            stack.push(` [${key}] `);
        }
        if(typeof obj[key] == 'object'&& obj[key] ! = =null) {
            transfor(obj[key],stack,result);
        } else {
            let stackStr = stack.join('. ');
            console.log(result) result[stackStr] = obj[key]; stack.pop(); }}return result;
}

let testObj = {
    a: {
        b: 1.c: [0, {d: 1}}}]console.log(transfor(testObj,[],{}))
Copy the code

  1. Introduce the reactive principle of VUE

  2. When a === 1 && a === 2

Shopee Food two aspects

Hung, do not know why the interview when the expression desire is not strong…… I didn’t remember the problem. I felt more interested to know about it.

  1. Compose compose compose compose compose compose compose compose

  2. How virtual lists work. Related article: Talk about long lists in front-end development

    First of all, long lists of noncomplete renderings generally come in two forms: lazy renderings and visual area renderings.

    Lazy rendering infinite scroll is people say, means when scrolling to the bottom of the page to load the rest of the data, is a way of optimizing the front end and back end less a load flow of data can be saved, the front-end render faster, less data for the first time this optimization requires party must accept this kind of product list, Otherwise, you can’t optimize in this way. The implementation idea is very simple: listen to the scroll event of the parent element (generally window), judge whether it reaches the bottom of the page by the scrollTop of the parent element, if it reaches the bottom of the page, load more data. If you want to apply it to production, you are advised to use mature class libraries. You can search for them by using frame name + Infinite Scroll.

    Visual area rendering refers to rendering list items only in visual areas, not at all in non-visible areas, dynamically updating list items as the scrollbar scrolls. Visual area rendering is suitable for scenarios such as:

    • The height of each data presentation should be consistent (not required, but the minimum height should be determined).
    • In terms of product design, a large amount of data needs to be loaded at one time (more than 1000 pieces), and the scrollbar needs to be mounted in a fixed-height area (Windows can also be used, but the entire area needs to display only this list).

    The way a visible area renders a List is usually called a Virtual List. What is a virtual list? Let’s start with a simple definition of virtual lists. Because the time cost of creating and rendering Dom elements is high, the time required for a complete rendering list is unacceptable in the case of big data. One solution is to render only the visible area in any case to achieve extremely high first rendering performance. A virtual list is a list of visual areas rendered. Two basic concepts are important:

    • Scrollable area: Suppose there are 1000 items of data, and each list item is 30 in height, then the height of the scrollable area is 1000*30. When the user changes the current scroll value of the list’s scroll bar, the contents of the visible area change.
    • Visible area: For example, if the list height is 300 and there is a vertical scroll bar to scroll to the right, the visually visible area is the visible area.

    To realize the virtual list is to deal with the change of the visible area after the scroll bar is rolled. The specific steps are as follows:

    1. StartIndex to calculate the start data of the current visible region;
    2. Computes endIndex of the end data of the current visible region;
    3. Calculates the data for the current visible area and renders it to the page;
    4. Calculate the startIndex data offset startOffset in the entire list and set it to the list.

    Related article: “Front-end Advanced” High performance rendering of 100,000 data (virtual list)

Shopee marketplace side

Great conversation with the interviewer!

  1. ++/–/+-/-+

  2. Compose implementation (for example, ‘hh’, ‘hh’, ‘hh’)

  3. Event bus implementation

  4. Js to realize the difference between shallow copy and deep copy

    Related articles: www.jb51.net/article/192…

    Shallow copy is a bitwise copy of an object. It creates a new object and copies its members in sequence. If the property is of a primitive type, the value of the primitive type is copied. If the attribute is a reference type, the memory address is copied. So if an object member in the new object changes its address, it affects the original object.

  5. Object.assign () is a shallow copy or a deep copy?

    The object.assign () method can copy any number of enumerable attributes of the source Object to the target Object and then return the target Object. However, object.assign () makes a shallow copy, copying references to the attributes of the Object rather than the Object itself. This method works for both arrays and objects. Array.prototype.concat() and array.prototype.slice () are also shallow copies and only apply to Array.

  6. Parse (json.stringify (obj)) what’s wrong with json.parse (json.stringify (obj))? Will an error be reported when there is a circular reference in an object?

    Json.parse (json.stringify (obj)) can implement deep copies of arrays and objects and basic data types, but cannot handle functions. Because the json.stringify () method is converting a javascript value to my JSON string, it cannot accept the function. Other impacts are as follows:

    • If there is a time object in the object, the time is a string instead of a time object in the copied object
    • If there are RegExp, Error objects in the object, the serialized result is empty
    • If the object has a function or undefined, the result of serialization will lose the function or undefined
    • If the object has NAN, infinity, or -infinity, the serialized result becomes NULL
    • Json.stringfy () serializes only the enumerable properties of the object, and if any of them are generated by the constructor, the constructor is discarded when copied
    • An error is reported if the object has a circular reference and cannot implement deep copy correctly

  7. How to make a deep copy when there are circular references in an object?

    Related articles: blog.csdn.net/weixin_3373…

    Create a Map variable that lasts for the entire execution of the function (Map can be set as a key other than string, which is also a key-value pair structure). Each time the function is executed, the object passed in this round is used as the key and the newly created object is used as the value. At the beginning of the function, it checks whether the incoming object already exists in the map keys, which indicates that the incoming object has been traversed before.

  8. Talk about functional programming.

    • Is a programming style, or a mode of thinking, and object-oriented programming is a parallel relationship
    • Abstract out fine-grained functions that can be combined into more powerful functions
    • A function is not a method in a program, but a mapping in mathematics
    • The same input gives the same output
    • Functional programming is an abstraction of an operational process

    Functional programming requires that functions be pure and have no side effects. Because it’s a mathematical operation, and its original purpose is to evaluate, to do nothing else, otherwise it wouldn’t satisfy the functional algorithm. In short, in functional programming, a function is a pipe. One value goes in here, a new value comes out there, nothing else. (Please refer to teacher Ruan Yifeng’s article for details.)

  9. Talk about the differences between MVVM and MVC.

    This problem has not found a good article (or I can understand more deep = =), related articles: juejin.cn/post/696198…

  10. Know HTTPS?

  11. Talk about caching in HTTP

  12. Know what’s new with HTTP2?

  13. Do you understand the same origin mechanism in browsers? Talk about your understanding of cross-domains.

  14. Know the benefits of layering in browsers?

  15. Talk about your understanding of scoped chains. Closures?

  16. Talking about prototype chains, what do you think are the advantages of prototype chains?

    There is no merit in telling the truth. Properties on the constructor stereotype are shared across all instances of the constructor construction, that is, properties are not privatized, and changes to properties on the stereotype are applied to all instances.

  17. What’s the difference between an arrow function and a normal function?

    The arrow function does not have its own this object. For normal functions, the inner this refers to the object on which the function is running, but this is not true for arrow functions. It does not have its own this object; the internal this is the this in the upper scope of the definition. That is, the this pointer inside the arrow function is fixed, in contrast to the mutable this pointer in normal functions. So there are several differences:

    • Do not use it as a constructor, that is, do not use the new command on arrow functions, otherwise an error will be thrown. (Also because there is no own this)
    • You cannot use the Arguments object, which does not exist in the function body. If you do, use the REST argument instead.
    • Yield cannot be used, so arrow functions cannot be used as generator functions.
    • The following three variables also do not exist in the arrow function: arguments\super\new.target
    • Since the arrow function does not have its own this, it cannot of course use call(), apply(), or bind() to change the direction of this.

  18. How many value types are there in JS? What’s the difference?

    Primitive/reference type. The difference is in how values are stored (stack, heap).

  19. Is there any way to distinguish the data types of JS?

    typeof/instanceof/construtor/isPrototypeOf/Object.getPrototypeOf()/Object.prototype.toString.call()

    Number/String/Boolean/Null/undefined/Object/symbol/bigInt

  20. Object. Is () and ===

    ES5 compares whether two values are equal with only two operators: the equality operator (==) and the strict equality operator (===). They both have the disadvantages that the former automatically converts the data type, the latter that NaN is not equal to itself, and +0 equals -0. JavaScript lacks the operation that, in all environments, two values should be equal as long as they are the same.

    ES6 proposes the “same-value equality” algorithm to solve this problem. Object. Is is a new way to deploy this algorithm. It is used to compare whether two values are strictly equal, basically the same behavior as the strict comparison operator (===). Object.is () fixes some special cases on a strictly equal basis, specifically +0 and -0, NAN and NAN.

    if (x === y) {
    // If +0 does not equal -0
    returnx ! = =0 || 1 / x === 1 / y;
  }
  // For NaN
  returnx ! == x && y ! == y;Copy the code

  21. What is the garbage collection mechanism of JS?

    The answer revolves around V8’s garbage collection mechanism.

  22. What are the differences and connections between ES6 classes and ES5 constructors?

    Basically, ES6 classes can be seen as a syntactic candy that does most of what ES5 does. The new class writing method just makes object prototype writing clearer and more like object-oriented programming syntax. Class has a constructor() method, which is the constructor, and the this keyword represents the instance object. When using typeof, you can find that the data typeof a class is a function, and the class itself refers to the constructor. When using typeof, you can use the new command directly on the class, which is exactly the same as the constructor. The prototype property of the constructor persists on the es6 class. In fact, all methods of a class are defined on the Prototype property. Therefore, calling a method on an instance of a class is actually calling a method on the prototype. Since the class’s methods are defined on top of the Prototype object, new methods of the class can be added to the Prototype object. The object.assign () method makes it easy to add multiple methods to a class at once. The Prototype object’s constructor() property points directly to the class itself, which is consistent with ES5 behavior. However, all methods defined inside a class are non-enumerable, which is inconsistent with ES5 behavior. The class must be called with new or an error will be reported, which distinguishes it from normal constructors, which can be executed without new.

    Object.keys(Point.prototype)
// []
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]
Copy the code

    Specific article: es6.ruanyifeng.com/#docs/class

  23. What are the ways to load JS asynchronously? What’s the difference?

    Defer: The moment it happens is when the entire page has been fully parsed (the DOM tree has been built). Ie9 is available below and you can write the JS code internally

    Async: script will be executed after loading. Ie9 can be used for all of the above, only external scripts can be loaded. Js cannot be written in script tags

    You can’t put the two in the same label.

    The onreadyStatechange event can be used to monitor the readyState of the script (loading/complete/loaded). Ie can use this method. Browsers other than Internet Explorer can listen for script’s onload event setting to set the callback function.

  24. Is the event processing model understood? What’s the sequence?

    The event processing model has event capture and event bubbling. Structurally (but not visually) nested elements have event capture and event bubbling functions, that is, the same event bubbles from the child element to the parent element; Capture from parent element to child element. The triggering sequence is capture first and then bubble. Notice that there is no bubble or capture at the place where the event is triggered. It is only normal event execution, and the execution sequence is in accordance with the code writing sequence.

  25. Talk about understanding requestAnimationFrame

  26. Cookies/localstorage/sessionstorage/indexDB difference between?

    Relevant article: www.cnblogs.com/fundebug/p/…

  27. What fields can be set for cookies?

    Related articles: blog.csdn.net/qq_39834073…

    Name and value: Name and value are a key-value pair. Name is the name of the cookie. Once the cookie is created, the name cannot be modified and is generally case-insensitive. Value is the value of the cookie corresponding to the name. If the value is a Unicode character, the character must be encoded. If the value is binary data, base64 encoding is required.

    Domain: The Domain determines in which Domain the cookie is valid, that is, whether to carry the cookie when sending a request to that Domain. For example, if Domain is set to. A.com, b.a.com and c.a.com can use the cookie. If Domain is set to b.a.com, c.a.com cannot use the cookie. The Domain parameter must start with a dot (“. To begin with.

    Path: Path is a valid Path for cookies, similar to Domain, and also applies to subpaths. For example, the Domain in Cookie1 and Cookie2 is a.com, but the Path is different. Cookie1, whose Path is /b/, and Cookie, whose Path is /b/c/, are accessible only to Cookie1 on the a.com/b page, and to Cookie1 and Cookie2 on the a.com/b/c page. The Path attribute needs to end with a slash.

    Expires/ max-age: Both Expires and max-age are the expiration dates of the Cookie. Expires is the timestamp when the Cookie is deleted in the FORMAT of GMT. If it is set to the previous time, the Cookie is deleted immediately. If this parameter is not set, the Cookie is deleted when the page is closed by default. Max-age is also the Cookie validity period, but it is expressed in seconds, that is, the number of seconds after which the Cookie will be invalid. If max-age is set to 0, the Cookie will be invalid immediately; if max-age is set to negative, the Cookie will be invalid when the page is closed. Max-age The default value is -1.

    Size: Szie is the Size of this Cookie. In all browsers, any cookie size that exceeds the limit is ignored and never set. Each browser has different limits on the maximum and maximum number of cookies, which are sorted into the following table (data source network, untested) :

    The browser Maximum number of cookies Cookie Maximum length/unit: bytes
    IE 50 4095
    Chrome 150 4096
    FireFox 50 4097
    Opera 30 4096
    Safari infinite 4097

    HttpOnly: The value of HttpOnly is true or false. If this value is set to true, this value is not allowed to be changed by the script document.cookie.

    Secure: Secure is the security attribute of the Cookie. If this parameter is set to true, the browser transmits the Cookie only over Secure protocols such as HTTPS and SSL, but not over insecure HTTP.

    SameSite: SameSite is used to limit third-party cookies to reduce security risks. It has three attributes, which are: Scrict is the most strict and completely forbids third-party cookies. Cookies will not be sent under any circumstances when crossing sites; The Lax rule is slightly relaxed, and third-party cookies are also not sent in most cases, except for Get requests that navigate to the target url;

    None, the site can choose to explicitly turn off the SameSite property and set it to None. However, the Secure attribute must be set at the same time (cookies can only be sent through HTTPS). Otherwise, cookies are invalid. To disable SameSite, enter: chrome://flags/ Find: SameSite by default cookies, cookies without SameSite must be secure set the preceding two parameters to Disable.

    Chrome’s proposal defines three priorities: Low, Medium, and High. When the number of cookies exceeds, the cookies with the lower Priority are cleared first. The Priority attribute does not exist in 360 Speed browser and FireFox. It is not clear whether the Priority attribute takes effect after being set in such browsers.

  28. Do you know the matching order of the CSS?

    The CSS is matched from right to left. Because it’s more efficient to go from right to left.

  29. Vue3

I don’t remember the second interview.

Rich way three aspects of the classics

I have no impression on one side and two sides. Futu does not write algorithms, but basically every side has intelligence questions/code questions. I can’t afford the increase

  1. Quiz: Monkeys eat peaches
  2. Probability: poker probability
  3. Code problem: split url extraction parameters
  4. This section describes the browser XSS and XSRF attacks
  5. Introduce the difference between anti-shake and throttling

Crypto does everything

The headhunter introduced a blockchain company with 20+ annual leave per year. Before the interview, I took a written examination of five algorithm questions and received the interview notice. I felt that the interviewer was quite competent after the interview, but I gave up the subsequent interview due to personal reasons.

  1. Flex/Grid? How to implement adaptive layout (multiple blocks spaced identically)
  2. Do you know CSS cascading contexts? The child element is set to position:fixed, and the child element is set to translate.
  3. Introduce cross-domain and precheck requests;
  4. Describe the steps of xmlHttprequest;
  5. Es6 modules are different from commonJS modules.
  6. Introduce the event loop, one of the execution points of the microtask, okay?
  7. Introduce the caching mechanism in HTTP. Know what the downsides of Expires are? What data types are stored in Expires? What data types are stored in the cache-contorl max-age? Negotiation cache, okay?
  8. Do you know the difference between Map and WeakMap?
  9. Introduce your understanding of front-end engineering;

Sort out some interview questions

When I recorded before, I only remembered a few topics that impressed me deeply, and I also forgot to remember the company. Most of the topics below are from Ping An/Wezhong/Baidu. BTW, Baidu’s interview experience personally feel very good, micro people have a personality test we must do well (three after the headhunter told the personality test hung for a year can not pick up the pain who knows), peace will not say……

  1. Promise, async/await distinction, use scenario

  2. Prototype chain/inheritance

    Prototype chain is the main method of implementation inheritance, the idea is to use the prototype to a reference type inherits another reference type attributes and methods, if we make a prototype object is equal to another type of instance, then the prototype object contains a pointer to another prototype, and if another prototype object is another instance of the prototype, Then the above relationship still holds, and the successive steps form a chain of instances and prototypes, which is the concept of prototype chain.

    Inheritance: stereotype chain inheritance, constructor inheritance, composite inheritance, primitive inheritance (Object.create ()) parasitic composite inheritance, class class

  3. What are the methods on function? Call /apply/bind Can handwriting be written?

    //call
    Function.prototype.myCall = function(context, ... arr) {
      if(context === null || context === undefined) {
        context = window;
      } else {
        context = Object(context);
      }
      const fn = Symbol('fn');
      context[fn] = this;
      letresult = context[fn](... arr);delete context[fn];
      return result;
    }


    //bind
    Function.prototype.myBind = function(objThis,... params) {
      let thisFn = this;
      let fToBind = function(. secondParams) {
        let isNew = this instanceof fToBind;
        let context = isNew ? this : Object(objThis);
        returnthisFn.call(context,... params,... secondParams); }if(thisFn.prototype) {
        fToBind.prototype = Object.create(thisFn.prototype);
      }
      return fToBind;
    }
Copy the code

  4. What about HTTP caching? Mandatory cache negotiation What are the status codes returned by the cache? Know what the downsides of Expires are? What data types are stored in Expires? What data types are stored in the cache-contorl max-age?

    HTTP caches are divided into mandatory cache and negotiated cache. Mandatory cache: http1.0 — expired, http1.1 — cache-control: private/public/no-cache/no-store/max-age. Negotiation cache: HTTP1.0 — last-modified /if-modify-since, http1.1 — eTag /if-none-match Both Expires and max-age can be used to specify when a document expires, but there are some subtle differences. An expires is an absolute expiration date, and doing so causes at least two problems: 1. The client and server time are out of sync, causing a problem with expires configuration. 2. It is easy to forget the expiration time after the configuration, which results in an expiration surge. Max-age specifies the time to live since the document was accessed. This time is relative (for example, 3600s) to the request_time recorded by the server when the document was first requested. In addition, the expires time can actually be the last access time (atime) or modification time (atime) for the relative file.

  5. Talk about TCP three handshakes four waves.

  6. What are the vUE modifiers?

    Event modifiers: stop, prevent, capture, self, once, passive

    Key modifiers: Enter, TAB, delete, ESC, space, Down, Up, left, right, exact

    Mouse modifiers: left, right, middle

    sync

    Form modifiers: lazy, number, trim

  7. Common HTTP request headers

    For example, cache headers, accept headers (Accept, accept-encoding, accept-charset, accept-language), user-agent, host, cookie, Connection, Origin, Referer.

  8. A page has multiple forms, how to solve the verification when submitting

    You can use promise.all

  9. One-dimensional arrays build tree structures

function getTree() {
  let map = new Map(a); arr.forEach(item= > {
    map.set(item.id,item);
  })
  let tree;
  arr.forEach(node= > {
    let parent = map.get(node.parentId);
    if(parent) {
      if(! parent.children) { parent.children = []; } parent.children.push(node); }else {
      tree.push(node)
    }
  })
  return tree;
}
Copy the code

  1. Related to Web security, why there is no CSRF problem with token?

    Cookies have an expiration time. During this time, the cookies are stored on the client. When the client visits the same website again, the browser will automatically carry the cookies after the login of the website user in the HTTP request. CSRF attacks also take advantage of this by borrowing users’ cookies to perform operations that are not intended by users. The token authentication rule is that the server reobtains the token set from the request body or request parameters, and then compares it with the token in the cookie. If the token is consistent with the cookie, subsequent requests will be made. However, CSRF attacks only borrow the cookie, so the token cannot be set in POST or GET when sending requests. When the request is sent to the server, the token authentication fails and the request will not be processed. (doubt)

  2. How to get reactive data for vue template compilation

  3. Are webpack plug-ins parallel or serial? Webpack workflow and principles? Can plugin1 send events that plugin2 listens to?

  4. How do computed functions collect all the variables inside using dependencies? What about inside the Watch?

  5. Did you learn about other ecology? React, why did you design Rn, Flutter

  6. What plug-ins are now configured in WebPack?

  7. What loader should be configured to write JSX in vUE project?

  8. Student: Regular?

  9. Webpack hot update principle

Some of the answers are not very clear, welcome to discuss!