2 years of experience interviewing Netease Lingxi! Too much emphasis on engineering!

foreword

Hello everyone, I'm Lin Sanxin. uses the most simple and easy-to-understand words to describe the most difficult knowledge points. is my motto. is the foundation of .

Today I will share with you the experience of a big factory - Netease Lingxi

topic

one side

1. Talk about the project

2. What is the difference between webpack and rollup, and what is the difference between the packaged products?

3. The principle of postcss

4. Both webpack and babel vue use AST. How do you understand AST?

5. How to improve the build speed of webpack?

6. Have you used vite? Why fast?

7. What should I pay attention to when packaging npm? How to use webpack to build better?

8. How to implement on-demand loading in a vue project?

9. How does webpack optimize front-end performance

10. Have you ever written a loader and a plugin? What is your general idea?

11. Implement the reduce method in Array?

two sides

1. Talk about resumes and projects

2. The principle of nexttick in vue

3. The responsive principle of vue

4. The structure of the applet

5. How the applet communicates with the native layer

6. Algorithms

Require:

求字符串公共前缀，例如  ['abcaaa', 'abcddd', 'abcadad'] ==> 'abc'

7. Algorithms

Require:

// 区间合并：
// 以数组 intervals 表示若干个区间的集合，其中单个区间为 intervals[i] = [starti, endi] 。
// 请你合并所有重叠的区间，并返回一个不重叠的区间数组，该数组需恰好覆盖输入中的所有区间。
 
// 示例 1：
// 输入：intervals = [[1,3],[2,6],[8,10],[15,18]]
// 输出：[[1,6],[8,10],[15,18]]
// 解释：区间 [1,3] 和 [2,6] 重叠, 将它们合并为 [1,6].
 
// 示例 2：
// 输入：intervals = [[1,4],[4,5]]
// 输出：[[1,5]]
// 解释：区间 [1,4] 和 [4,5] 可被视为重叠区间。

answer

one side

1. Talk about the project

slightly

2. What is the difference between webpack and rollup, and what is the difference between the packaged products?

• webpack: code splitting, loading on demand, suitable for application packaging, 06205d841c6c40 has been supported tree-shaking
• rollup: All resources are packaged in the same place, loaded at one time, suitable for library packaging, support tree-shaking

3. The principle of postcss?

• Step 1: Call the postcss related loader and pass in the parameters
• Step 2: Convert the css file to AST
• Step 3: Modify the branches and leaves of the AST according to the parameters of the first step
• Step 4: Convert the modified AST to normal code
• Step 5: Output the code and hand it over to the next loader for processing

4. Both webpack and babel vue use AST. How do you understand AST?

Many tools today, such as webpack, vite, eslint, babel, etc., are inseparable from one thing - AST. AST is normal code, using tools, according to the type of code nodes that are not used, converted into a JSON format data

5. How to improve the build speed of webpack?

There will be a separate article later

6. Have you used vite? Why fast?

• 1. esbuild pre-build dependencies: the code is divided into dependencies and source code, dependencies are those npm packages, which generally do not change and are cached; source code is the part of the code that changes frequently
• 2. Use the browser to run ES Module , convert the code to ES Module and hand it over to the browser, put the pressure on the browser side, thereby improving the project startup speed
• 3. On-demand loading: the browser uses the http request according to ES Module to load the required page on demand
• 4. Using negotiation cache, cache files, unchanged files do not need to be reloaded

7. What should I pay attention to when packaging npm? How to use webpack to build better?

There will be a separate article later

8. How to implement on-demand loading in a vue project?

arrow function + import

9. How does webpack optimize front-end performance?

There will be a separate article later

10. Have you ever written a loader and a plugin? What is your general idea?

loader
The role of loader is to process non-js files. It is a function. The implementation principle is: use the corresponding conversion plug-in to convert the content of the file to be processed into AST (abstract syntax tree), and then follow the loader rules for this AST. After processing, it is converted into the original content format, and then output, to achieve the effect of processing the content

plugin
The role of plugin is to expand the packaging function of webpack. It is a class, the method of use is new Plugin(option), there is a apply method inside this class, this method will be executed when packaging, and there is a plugin method in the parameters received by this apply method, there are many hook functions in this method, Using these hook functions can do things in different packaging stages, such as modifying files, adding files, deleting files, etc.

11. Implement the reduce method in Array?

Array.prototype.sx_reduce = function(cb, ...args) {
  let pre, start = 0
  if (args.length) {
    pre = args[0]
  } else {
    pre = this[0]
    start = 1
  }
  for (let i = start; i < this.length; i++) {
    pre = cb(pre, this[i], i, this)
  }
  return pre
}

two sides

1. Talk about resumes and projects

slightly

2. The principle of nexttick in vue?

nexttick prefers microtasks, then macrotasks. Set up a callback queue internally, put the rendering watcher and user-defined nexttick events into this queue, and execute the loop asynchronously to achieve asynchronous update

3. The responsive principle of vue

Use Object.defineProperty to intercept the get and set of object properties, and then collect the dependent Watchers through dep, trigger the set when the property is updated, and trigger the notify function to notify the watcher in dep to update. Watchers are divided into rendering watchers, user watchers, and calculation watchers.

weakness is:

• 1. Instead of intercepting the get and set of the array, the prototype method is modified.
• 2. Responsive processing that does not take into account the newly added properties of objects
• 3. Cost performance, after all, it is intercepted by recursion

4. The structure of the applet

do not know

5. How the applet communicates with the native layer

do not know

6. Algorithms

Require:

求字符串公共前缀，例如  ['abcaaa', 'abcddd', 'abcadad'] ==> 'abc'

Problem solving:

var longestCommonPrefix = function (strs) {
  if (!strs.length) return ''
  if (strs.length === 1) return strs[0]
  const start = strs[0]
  let prefix = '',
    pre = ''
  for (let i = 0; i < start.length; i++) {
    prefix += start[i]
    if (strs.some(str => str.indexOf(prefix) !== 0)) return pre
    pre = prefix
  }
  return pre
};

7. Algorithms

Require:

// 区间合并：
// 以数组 intervals 表示若干个区间的集合，其中单个区间为 intervals[i] = [starti, endi] 。
// 请你合并所有重叠的区间，并返回一个不重叠的区间数组，该数组需恰好覆盖输入中的所有区间。
 
// 示例 1：
// 输入：intervals = [[1,3],[2,6],[8,10],[15,18]]
// 输出：[[1,6],[8,10],[15,18]]
// 解释：区间 [1,3] 和 [2,6] 重叠, 将它们合并为 [1,6].
 
// 示例 2：
// 输入：intervals = [[1,4],[4,5]]
// 输出：[[1,5]]
// 解释：区间 [1,4] 和 [4,5] 可被视为重叠区间。

answer:

const merge = function(intervals) {
  if (intervals.length === 1) return intervals
  intervals.sort((a, b) => a[0] - b[0])
  const res = []
  let i = 0, j = 1
  while(j < intervals.length) {
    const iArr = intervals[i]
    const jArr = intervals[j]
    if (iArr[1] >= jArr[0]) {
      intervals[i] = [Math.min(iArr[0], jArr[0]), Math.max(iArr[1], jArr[1])]
      j++
      if (j === intervals.length) res.push(intervals[i])
    } else {
      res.push(iArr)
      i = j++
      if (j === intervals.length) res.push(jArr)
    }
  }
  return res
};

8. Algorithms

Require:

// 仿模板字符串处理功能，
// 如 "Title: ${ title }, MainArtist: ${ artist[0] }, Album: ${ album.name }",
// {
//     title: '珊湖海',
//     artist: ['周杰伦', '梁心颐'],                                 
//     album: {
//         publishTime: '2006-11-1',
//         name: '十一月的萧邦'
//     }
// };

Epilogue

I'm Lin Sanxin, an enthusiastic front-end rookie programmer. If you are motivated, like the front-end, and want to learn the front-end, then we can make friends and fish together haha, touch the fish group, add me, please note [Si No]