Record an interview with a senior front-end development engineer

preface

The interview was very tiring. I hurried home after work every day to have the interview on an empty stomach. The interview lasted for nearly a month. After the interview, it is best to have a review and check the gaps.Copy the code

A, ctrip

2. Rem, calculate the screen of 375, 1rem, how to deal with the decimal unit. 3. Performance optimization points, Webpack subcontract, home page resource size, request optimization, gzip before or after, React re-render 6. Internationalization site, CDN, what stage in the page to load internationalization file, if there are more than 20 languages how to do 7. SSR is not used 8. 10. React DOM binding events: What is the difference between native events and http2 multiplexingCopy the code

Code problem

 if(! ('a' in window)) {
   var a = 1;
 }
 console.log(a); 
Copy the code

    var a = {}; var b = {}; var c ={};
    console.log(a === b);
    console.log(b === c);
    console.log(a === c);

    var d = e = f = {};

Copy the code

    f = {}
    e = f
    d = e

    console.log(d === e);
    console.log(d === f);
    console.log(e === f);
Copy the code

Mihajlovic tour:

1. HTTP status 301,302, 304, cache related fields 2. Cookie, ws cross-domain 3. 4. Application scenarios of REM and VW 5. Pseudo-code lazy loadingCopy the code

Some foreign companies:

A,

1. Is the following function a closure?

const func = () = > {
   const a = '111'
   const fun2 = () = > console.log(a)
   return () = > console.log('_')}const next = func()


Copy the code

'12345'.split(' ') What happens to the above codeconsole.log("12345" instanceof Object);

Copy the code

3. Let’s implement some, every
4. Flatten implementation

const promise = new Promise(resolve= > {
  console.log("11111");
  setTimeout(() = > {
    console.log("22222");
  }, 0);
  resolve();
  console.log("resolve");
  throw new Error("error");
  console.log("error");
});
promise
  .then(
    () = > {
      console.log("33333");
      setTimeout(() = > {
        console.log("44444");
      }, 0);
    },
    () = > {
      console.log("reject");
    }
  )
  .catch(() = > {
    console.log("catch");
  });
console.log("55555");

Copy the code

6. How do function components prevent repeated rendering

Second,

1. AST function or Babel implementation principle
2. Implement custom hooks,usePrevious. Setcount (count => count + 1) outputs the last count value

Meituan:

A,

1. In my introduction, I mentioned performance optimization and the points of performance optimization
2. Different domain names share cookies
3. On, emit, implementation
4. The realization of anti – shake
5. Enter the URL to the page to return the result
6. Implementation of caching
7. The React component repeats the rendering
8. Webpack subcontract

Byte:

A,

1. Webpack plug-in, life cycle
2. How is umi contract routing implemented
3. Babel implements the remote principle
4. React ref
5. Fib implementation, how to optimize

Box of the horse:

A,

1. Say what you are best at and ask
2. The basis for webpack unpacking. 1. Multiple modules use the cache. 2
3. Canvas click line segment event. What do we do with the overlap
4. Use of webWorker: why not make requests in worker and do data conversion?

Taimei Medical:

1. Generate is different from async
2. Webpack plug-in implementation

Ding Dong Mai CAI:

A,

1. Vue, React
2. Mounted call order of parent and child components
3. Implementation principle of $nextTick
4. The child element is centered horizontally and vertically
5. How to optimize the Fibonacci sequence
6. Business problem: Encapsulates a global popover that can be called within any component. Add-on: How to open 5 popovers at the same time, what is the closing sequence

Second,

1. Encapsulate the Vue plug-in
2. 5 a popup window
3. $nextTick principle
4. Mobile phone number segmentation _ _ _ – _ _ _ _ – _ _ _ _
5. Maximum number of strings, “abcdabcda” to find the longest non-repeating string
6. Sibling communication
7. How does VUEX modularity work
8. How do different domain names share cookies

Conclusion:

For three to five years of front-end development, you should not just know how to use the API, but at least pay attention to the implementation of the technology you are using. This is also the factory candidates study spirit, relatively speaking, there is a distinction. Personal advice is best to master one direction, such as:

• Front-end engineering, Webpack, Babel, Node, etc.
• Proficient in framework source code
• Visualization, 3D orientation
• Streaming media, audio and video

Of course, if you want to enter dachang students, but also have to attack the algorithm part. Leetcode is easy to medium difficulty.