preface

This issue is to share Shopee’s face, the middle is more twists and turns. After going through a round of interview on the seller platform, HR said it was inappropriate. Later, THE HR of the supply chain department came to me and said that I could meet the supply chain department again, so I had two interviews, and each time I had technical, first and second interviews as well as HR interviews

I was Shopee in March, and the following is my experience record (it was more than one and a half years at that time). I will summarize some questions and summarize the knowledge points. I hope it will be helpful [for reference only, welcome to discuss].

[Interview said] A year and a half in front of Bigo one, two and three interviews

Talk about the view of the face to face scriptures: As for the face to face scriptures, in fact, my personal understanding is as a function of finding out and filling in the gaps. If I go deep, I still have to rely on other ways of study and practice

The seller platform

One side

How to determine the data type

Event loop, and event loop problem

About the event loop, I wrote a [front-end advanced] simple browser event loop [attached exercises], I think it is more profound and simple. If you can solve the topic at the end of the essay, you are successful

Event delegation

Deep replication and shallow replication

What are the methods of deep replication

The difference between let, var and const

Talk about how variables are stored in JS

Topics similar to the following:

// Basic data type - stack memory
let a1 = 0;
// Basic data type - stack memory
let a2 = 'this is string';
// Basic data type - stack memory
let a3 = null;

// The pointer to the object is stored in stack memory, and the object to which the pointer points is stored in heap memory
let b = { m: 20 };
// The pointer to the array is stored in stack memory, and the array to which the pointer points is stored in heap memory
let c = [1.2.3];
Copy the code

For primitive types, the data itself is stored on the stack; for object types, only a reference to an address in the heap is stored on the stack

The picture above is as follows:

The data in the stack area in memory, after the end of the function call, will be automatically out of the stack, do not need the program to operate, the operating system will automatically execute, in other words: the variables in the stack after the end of the function call, will disappear

Data that cannot be stored on the stack (such as an object) is stored in the heap, and the stack only keeps a reference to the data (i.e., the first address of the block).

Reference: “front-end advanced” JS stack memory heap memory

The pointing to this, the pointing to this in the arrow function

Can I use new as an arrow function?

Arrow function, no prototype, no this point, no arguments, no new

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

  • The grammar is more concise and clear
  • Arrow functions do not create their ownthis
  • That’s inherited from the arrow functionthisThe point is always the same
  • .call()/.apply()/.bind() cannot change the arrow functionthisThe point to
  • Arrow functions have no prototypeprototype
  • The arrow function cannot be used as a constructor. Nonew
  • Arrow functions don’t have their ownarguments

Reference: ES6 – Arrow functions, the difference between arrow functions and ordinary functions

The implementation of the new

function create (ctr) {
    // Create an empty object
    let obj = new Object(a)// Get the constructor
    let Con = [].shift.call(arguments)
    // Bind the object (instance) __proto__ to the prototype constructor
    obj.__proto__ = Con.prototype
    // Bind this and the arguments
    let result = Con.apply(obj, arguments);
    // Make sure the object is returned
    return typeof result === 'object'? result : obj;
}
Copy the code

Let’s talk about how instanceof works

The main function of instanceof is to determine whether an instance belongs to a certain type. The implementation principle is similar to the following:

function new_instance_of(leftVaule, rightVaule) { 
    let rightProto = rightVaule.prototype; // Take the prototype value of the right expression
    leftVaule = leftVaule.__proto__; // Take the left expression's __proto__ value
    while (true) {
    	if (leftVaule === null) {
            return false;	
        }
        if (leftVaule === rightProto) {
            return true;	
        } 
        leftVaule = leftVaule.__proto__ 
    }
}
Copy the code

In fact, the main implementation principle of Instanceof is as long as the prototype of the right variable is in the prototype chain of the left variable. Therefore, instanceof will traverse the left variable’s prototype chain until it finds the right variable’s prototype. If the lookup fails, it will return false, telling us that the left variable is not an instanceof the right variable

Reference: Brief introduction of instanceof and Typeof implementation principle

Cookie, localStorage, and sessionStorage

Let’s talk about HTTP caching

HTTPS handshake, TLS handshake, symmetric encryption, and asymmetric encryption

CSRF

Cross-site request forgery, its principle is that the attacker constructs the request address of a functional interface in the background of the website, and induces the user to click or use special methods to make the request address automatically loaded. When the user is in the login state, this request is received by the server, which will be mistaken as a legitimate user operation. The interface address in the Form of GET can be easily attacked, and the interface address in the Form of POST is not 100% secure either. The attacker can induce the user to enter the page with the parameters of the Form that can be submitted by POST

Reference: “Question of the Day” What is CSRF?

XMLHTTPRequest sets which value automatically carries the cookie

xhr.withCredentials = true;
Copy the code

Same-origin policy and cross-domain solutions

What is the returned status code in strong cache? What about the negotiation cache?

Strong cache :200 OK (from memory/ Disk cache) Negotiation cache :200 and 304

See the following figure for the specific process:

Reference: Distinguish HTTP request status codes to understand caching (negotiated caching vs. forced caching)

What happens after you enter the URL

Defer and async in the script title

Cookies, HTTP – only, secure

If a cookie is set to Secure=true, the cookie can only be sent to the server using HTTPS, not HTTP

Http-only indicates that cookies cannot be accessed through JS, reducing XSS attacks

The difference between E. charter get and E. Charter get

  • e.targetPoints to the object that triggered the event listener
  • e.currentTargetPoints to the object to which the listener event was added

Reference: the difference between E. chart and E. Chart

Difference between Watch and computed

  • computedAsynchronous operations are not supportedcomputedInvalid while there is an asynchronous operation, cannot listen for data changes
  • The results are cached,computedThe value of thegetterIt is cached after execution, and only retrieved next time after the value of the property it depends on has changedcomputedWill be called again when the value ofgetterTo calculate the

Reference: Vue’s difference between computed and watched

The lifecycle of Vue, and which lifecycle gets the DOM

Vue’s Mixin, created, and data value merging strategies

When components and mixins have options with the same name, these options are “merged” in the appropriate manner.

  • For example, data objects are recursively merged internally, and component data takes precedence in the event of a conflict
  • The hook functions of the same name will be merged into an array and therefore both will be called. In addition, hooks mixed in with the object are called before the component’s own hooks

See official documents

Vue $attr and $props

The props object received by the current component. The Vue instance proxys access to its props object properties.

$attr contains property bindings (except class and style) that are not identified (and retrieved) in the parent scope as prop. When a component does not declare any prop, all parent scope bindings (except class and style) are included, and internal components can be passed in via v-bind=”$attrs” — useful when creating high-level components.

In detail, I have written a previous article: [Vue Advanced] – how to implement component property passthrough?

How is Vue bidirectional data binding implemented?

What is the use of Vue’s key value?

Check out my other article: Key values in Vue

Do you know how to implement the Vue array method?

Vue communication mode

CSS center

display:none; Visibility: the difference between hidden

What are some common points of performance optimization

What does HTTP2 have over HTTP1

  • multiplexing
  • Binary transmission.

This is at the heart of all the performance enhancements in HTTP/2. In previous versions of HTTP, we sent data through text. New ones have been introduced in HTTP/2Encoding mechanism, all transmitted data will be split and adoptedBinary format encoding.

  • The server Push
  • The Header compression.

In HTTP/1, we transfer the header as text, and in the case of the header with a cookie, it may be necessary to repeatedly transfer hundreds to thousands of bytes each time. In HTTP /2, ** uses the HPACK compression format to encode the transferred headers, reducing the size of the headers. ** And maintain an index table at both ends to record the headers that have appeared. Later, the key names of the recorded headers can be transmitted in the transmission process. After receiving data, the peer end can find the corresponding value through the key names.

Complex and simple requests

As long as the following two conditions are met, it is a simple request

(1) The request method is one of the following three methods:

  • HEAD
  • GET
  • POST

(2) HTTP header information does not exceed the following fields:

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-type: only three values are allowed
    • application/x-www-form-urlencoded
    • multipart/form-data
    • text/plain

For details, see CORS for Cross-domain Resource Sharing

  • Programming problem
    • Pat down array
    • Deep copy
/** * Deep copy implementation */
function clone(data) {
  let result = {};
  function isObject(data) {
    if((typeof data === "object" || typeof data === "function") && data ! = =null
    ) {
      return true
    } else {
      return false}}if (Array.isArray(data)) {
    result = [...data];
  }

  for (let key in data) {
    if (data.hasOwnProperty(key)) {
      if (isObject(data[key])) {
        result[key] = clone(data[key]);
      } else{ result[key] = data[key]; }}}return result;
}
Copy the code
  • Is there anything you want to ask me?

Second interview

Vue – principle of the router

How to catch errors in await and async

Common asynchronous solutions, and one of the Promise questions

new Promise(function(resolve,reject){
    resolve(Promise.reject())
}).then(function () {
    console.log(1)
}).catch(function() {
    console.log(2)})Copy the code

The answer is 2

Reference: Promise. Resolve ()

Aspects of HTTP requests are optimized

What are the properties of a cookie?

A previous article on cookies: A summary of Cookie knowledge for the front end

The options method for HTTP requests

  • HTTP 的 OPTIONSMethod is used to get the communication options supported by the destination resource. The client can use it for a specific URLOPTIONSMethod, which can also be used for the entire site (by setting the URL to “*”).
    • Check the request methods supported by the server. You can useOPTIONSMethod makes a request to the server to detect what the server supportsHTTPMethods:

    curl -X OPTIONS http://example.org -i

    • Precheck request in CORS. In CORS, you can use the OPTIONS method to initiate a precheck request to see if the actual request can be accepted by the server. The access-control-request-Method header field in the pre-check Request packet tells the server the HTTP Method used for the actual Request. The access-control-Request-headers header field informs the server of the custom header field carried in the actual Request. Based on the information obtained from the precheck request, the server determines whether to accept the actual subsequent request

Reference: the OPTIONS

How do you optimize 50 SVG image requests

Webpack performance optimization

How are HTTP requests cached

  • useserver Worker

Follow-up: What solution would you use if you didn’t use a server Worker? Because SW itself has compatibility issues?

  • uselocalStorage

Follow-up: If not localStorage (because the capacity is limited), then what will you use to achieve?

  • To answer theindexDB

Implement the following cache scheme (programming problem)

In effect, the function cache is implemented using closures and higher-order functions:

Here is my implementation


f1('abc'.123, {b:3});  // 10, 1000s
f1('abc'.123, {b:3});  // 10, 1000s

function cache(f) {
  let objCache = {}
  return function () {
    let curArgs = ' '
    // It is better to use deep copy here
    for (let i = 0; i < arguments.length; i++) {
      if (Array.isArray(arguments[i])) {
        curArgs += arguments[i].join(', ')}else if (typeof arguments[i] === 'object') {
        curArgs += JSON.stringify(arguments[i])
      } else {
        curArgs += arguments[i]
      }
    }

    // curArgs
    if (curArgs) {
      return objCache[curArgs]
    } else {
      objCache[curArgs] = f(curArgs)
      return objCache[curArgs]
    }
  }
}

f2 = cache(f1);
f2('abc'.123, {b:3});  // 10, 1000s
f2('abc'.123, {b:3});  // 10, 0s
Copy the code

How does JS implement function caching

  const memorize = function(fn) {
    const cache = {}       // The object that stores cached data
    return function(. args) {        // The array extension operator is used
      const _args = JSON.stringify(args)    // Set the parameter as the cache key
      return cache[_args] || (cache[_args] = fn.apply(fn, args))  // If it has already been cached, use the value directly. Otherwise recalculate and cache}}const add = function(a, b) {
    console.log('Start caching')
    return a + b
  }
 
  const adder = memorize(add)
Copy the code

Have you ever used Vuex

Why do you want to leave?

Describe your strengths and weaknesses in one or two words

Is there anything you need to ask me?

The supply chain

One side

ES6 which ones did you use

The difference between an arrow function and a normal function

Talking about event loops, are microtasks always executed before macro tasks?

Let’s talk about the rendering mechanism of the browser

Understand React, the biggest difference between Vue and React, Vue’s bidirectional data binding implementation

Knowledge of current technologies (such as server Worker)

The latest default value for cookie samesite is Lau

CDN content Distribution Network

  • Reference: WebPack uses HtmlWebpackPlugin to configure the CDN

Do the problems (there are many problems forgotten)

  • The following sequence of execution
new Promise((resolve,reject) = > {
    console.log(1)
    resolve()
    console.log(2)
}).then(() = > {
    console.log(3)})Copy the code
  • The following output
(function () {
    const a = b =1;
    // Here I understand equivalent to
    // b = 1,const a = b}) ()console.log(typeof a)  // undefined
console.log(typeof b)  // number
Copy the code

Reference: Learning JavaScript from ES specification (2) : In-depth understanding of the “constant assignment” problem

Programming problem

Why do I think data structures and algorithms are important for front-end development?

Second interview

Tell me about your project process

What are the technical difficulties

How do you study at ordinary times?

What are the differences between Vue and React?

How to do on-demand loading

Related to background form Schema

What do you know about front end security?

Cross-domain [explain cross-domain, how to solve]

Let’s look at a problem. What is the final output? What is the time complexity?

function my_print(n)
{
    for (var i = 0; i < n; i++) {
        console.log("-\n");
        my_print(n - 1);
    }
}

my_print(3);
my_print(n);
Copy the code
f(n) = n (1 + f(n-1))
       = n + n *(n-1) + n * (n-1) *(n-2) + ...+ n! = O(n!)
Copy the code

conclusion

The overall interview experience was very good. In the supply chain interview, I attended a special interview, and finished the first and second technical interview and HR interview that day. The process was very fast. I have now joined the Supply chain department of Shopee, where the Leader and colleagues are very Nice (young and dynamic team). Technically, we encourage sharing. Currently, the main technology stacks are Vue and React

Have a look, we are still hiring, have want to push, you can name your resume “job name _ name _ work location” to my email: [email protected]

See details in detail

I usually deal with emails on weeknights, please forgive me if I reply slowly