Repetitive words

I am now a junior student of Beijing Normal University at Zhuhai. Bewitched by people, I began to look for summer internship in January, and experienced very bumpy. Because also got their beloved offer, some companies have been stable, waiting for HR or waiting for offer, so special to share my experience ha ha ha, I hope to help you!!

In the heart to prepare

There is no halo of famous university, no internship experience in a big factory, no ACM gold medal, nothing but persistence, hard work and thinking can help us

Common QA

These I did not study too much ha ha ha, just a little bit of puff puff

Front-end technology learning path

Personally, I learned it like this

graph LR
css-->js
js-->dom

React-->Webpack
Webpack-->Taro
Copy the code

In fact, to be honest, I haven’t studied the tech stack very closely. Poop-poop, it’s something like this:

• React/Vue
• Webpack
• Babel
• Html5
• Css3
• Typescript
• Sass/Less
• Git

Basically, they are common things that you might encounter when doing projects

Front-end framework learning

Because I got to know React when I was a freshman, I had a special liking for it. Vue only understood some basic principles and application methods without in-depth study. I think if you want to study the framework. That’s it!

1. Understand why frameworks appear
2. Understand what issues/difficulties the framework solves
3. Understand basic framework syntax and usage
4. Understand the coding specification of the framework
5. Understand the holes in the framework and why they occur
6. Understand the principles of framework implementation
7. Understand the source code of the framework
8. Write your own frame (cross it out

Dachang algorithm/written test

In fact, I don’t feel too deeply about this, but my feeling is that bytedance’s algorithm requirements will be higher than those of other big companies (from the side hanging chicken).

Pen test

Because this year Ali pushed no written test, TX has not yet to the conventional approval of the written test, only experienced the United States, Kuaishou written test. You can go to see their pen test, anyway I closed ~

Basically just a few directions, you can go to Leetcode crazy to swipe questions and punch cards!

1. Dynamic programming
2. Graph theory
3. DFS/BFS
4. Greedy algorithm
5. The sorting
6. The heap
7. Array/string

Code evaluation questions/written tests in interviews

You can look at ali and TX code evaluation questions, in fact, they set the question feeling very similar. The basic process is pretty much the same

Generally divided into 3-4 questions

1. The first question is usually a leetcode difficulty easy/medium difficulty algorithm, are relatively common, generally linked list/array/string
2. The second and third questions are usually algorithms based on the actual situation. This year, DFS questions are common, such as simulationCSS selectorsTo find the node, or to load itRely onThe order.
3. The last question is a code synthesis question. It is usually too short to write a code synthesis question. It is like simulating snake or writing a React component

Or maybe it is purely practical operation questions, these are basically the things I have encountered in the interview, such as:

• Implementing deep copy
• Implement observer pattern/subscribe to publish
• Implement underlined form conversion big hump (a_bb_CCC -> ABbCcc)
• sort
• Implement the function Currize
• Flatten the function

Big factory front end requirements

In fact, I do not feel very obvious, as far as I am concerned, I think what they want is that they must understand/be familiar with the principle of things, have done some practice. For example ` :

Interviewer: Webpack, have you ever used Babel? Interviewer: Have you written it yourself?

Like this, we not only need to understand, can use, but also need to know some principles, and will improve.

This is true of everything, like React. They may not ask you how to use it, they like to ask:

Interviewer: How does React prevent bubbles, and how does it differ from native

Dongdong, and so on, is something we might not care about small pit at ordinary times, or need to pay attention to. We need to not only know how to use it but we need to know why to use it.

Front-end review key points

Of course, the foundation of the first ~

• network
• The browser
• css
• js
• performance
• The framework

And so on, for me, I don’t really know what the point is, but I think a lot of interviewers like to ask about front-end performance optimization, right

• Common performance optimization methods
• How do you detect poor performance
• How do I find a memory leak
• How to improve the first screen rendering speed
• How to optimize interface access
• How to achieve high frame rate animation
• Indicators of performance optimization

And so on and so forth, on the performance side of things, the feeling is more often asked

Personal advice

preparation

• The interview is the most important or have a solid foundation HHHH, such as front-end related knowledge points, we can face classics or books to make up! , the foundation must be solid, can not blurt out also want to think about it roughly speak out.
• The most important thing is to have your own project, because big factories value your practical ability, as well as thinking in practice and solving difficulties, so I think having your own project is very useful in resume screening or interview
• Do the usual accumulation, precipitation. For example, it is good to summarize some difficult points or mistakes, publish some blog articles and share them with the community.
• Be sure to insist, everything is difficult at the beginning, may feel the knowledge base is so much, how to pass the interview? But the effort is proportional to the return. How hard you work now, how much you will be grateful for your original dedication
• Comb your hair and change your clothes (a chicken passing by who is teased by the leader about pink pajamas ~)

Don’t be nervous

Job interviews are stressful, sure, but don’t get too nervous. I this person is easy to nervous, so lead to the interview, often nervous speechless ha ha ha, especially just started, the first few interviews, wow, or video interview, nervous speechless HHH straight shaking legs

So I suggest that roar ~ can get up and walk, drink water, 10 minutes before the interview can see B station, calm down, as a chat can!

Reflects the thinking

When many of us interview, we may choose to see some interviews, a lot of basic knowledge points, indeed, it will be more convenient and fast. But there’s a downside…

That is, it doesn’t reflect our thought processes and capabilities.

For example

TCP three-way handshake

The client sends a SYN packet, the server receives it and then sends a SYN + ACK packet to the client. The client sends an ACK packet to the client, indicating that the connection is successful

Emmm, good, but this simple answer, but it’s not rigid, it’s more like reading the standard answer from a book

Interviewer: Do you know the TCP three-way handshake? Tell me about it

The client sends syn to the server, saying “I want to connect”, and enters the syn_send state. The server receives and then sends a SYN + ACK packet to the client, saying “I know, I’m ok” and entering the SYN_recv state. The client sends an ACK and says to the server, “I want to connect! “, enter the establish state, the connection is successful.

Emmm, ⑧ wrong ⑧ wrong, with a little bit of my own understanding, but can also be added to the east, can explain in detail why three handshakes instead of two.

Interviewer :(gives you a look)

Side dish chicken: Because three times is to determine the sending and receiving ability of both parties: for the first time, determine the sending ability of the client. The second time, the server determines its acceptability. The third time, determine the client receiving ability and the server sending ability. For example, if our first handshake is stuck or for some other reason and the connection request is not sent, then the client will make a second connection request, connect successfully, and then disconnect. This time!! This time!! If the request for the first handshake fails and the connection is initiated, and if only two handshakes are required, the client and server are now connected, but the client has nothing to send, so the server resources are occupied.

For example, I don’t know if HHHH is right. In this vein, interviewers are often just trying to determine whether a candidate has the thinking ability and technical potential to take on the heavy responsibilities of the job. This is a great way to show our ability to think.

XSS and CSRF attack and defense

We take another example hahaha, for example, now ask XSS and CSRF, how will big Ga answer?

Interviewer :(start your performance)

CSRF is a cross-site page request to attack, generally we add token to defend, XSS is a cross-site scripting attack, generally we filter script tags, these are OK

We might as well say a little more, play eloquence!!

Interviewer :(start your performance)

Chicken dishes: CSRF attacks is cross-site request page to, just like we are now logged in a bank’s web page, and then we open a new TAB, click on the web page, some attack at this time because we just log in, cookies has not expired, we just click on the web site will make CSRF attacks, using cookies to CSRF attacks, The money is gone……

CSS is a cross-site scripting attack, divided into XXX categories, common for example, there is now a comment component, users input comments stored in the database, and other users can see it when they visit. If the user implants malicious JS code comments at this time, we store in the database, so that other users access will be attacked! We can defend against…… by filtering the corners or converting them to HTML entities

Give an example ~ more vivid! The interviewer will understand you better!

So I suggest roar ~ after we see face classics, may be able to sum up some examples, or some in-depth east, such as “why”, “how to” these east, interview can play eloquence crazy blowing!

Appropriate guide

After a few rounds of interviews, and with some experience, you’ll find that the interviewer will follow along with what you’re saying or ask questions based on your resume. So, in fact, we can guide the interviewer to ask you familiar things. Such as…

Interviewer: Optimize performance?

Chicken side dish: Balabala… Redraw, reflux… balbala

Interviewer: Tell me about coming back

Chicken :(comfortable)

Hey hey, you can use some key words to guide HHHH

Interviewer: Memory leak?

I used React to do a project. There was a monitor scrollbar in the project, but I found that I was still listening after switching pages. It turned out that the time monitor was not cancelled, and there was a memory leak

In fact, here we can guide the interviewer to ask several aspects

1. Your project, difficulties, etc
2. Use the return method of hook to disable event listening
3. What other memory leaks are there, and how can they be resolved
4. How do I find a memory leak

So my suggestion roar, just to take a simple example, is that there are a number of ways that we can lead the interviewer to ask us what we are familiar with, rather than being taken to his or her own pace and “HHHH” you down

Project the difficulty

If you have a project of your own, it’s important to have a particular difficulty, preferably a feature or design that you can’t easily find online. This will stand out ~ mm! Very strong! I decided it was you.

Or the architecture of a system as a whole, reflecting their deep understanding of the product ha ha ha.

Or, can be aimed at their current project, summed up a function point plan, now does not represent the future does not have, can also show that they have understood the relevant knowledge, know the general direction, but now has not been implemented, still in the plan, reflect their enthusiasm!!

Warm warm

Enthusiasm is important. This part is a major, not a major, undergraduate or graduate. No matter who you are, enthusiasm will make a good impression on the interviewer. It doesn’t matter how long it takes, it’s just the passion of your mind. To a functional difficulty in-depth exploration, on the technical principle of repeated elaboration, for their own projects to make more efforts. I think they are very good things!

A little thought

In an interview, it’s normal to ask something you can’t say, but I personally don’t say no immediately. In fact, you can take a moment to think about it, and then think about the context of the question, and then say your own understanding. Ask your interviewer for guidance and see if you can answer it. If really not, you can also tell the interviewer that this aspect also needs to be strengthened. After the interview, you can check the information again to make up for it. The spirit of learning is very important.

She learned

Many of us think the interviewer is tough and stressful, but we should go into the interview with a learning mindset. The interview is just a process of checking and filling in gaps. After the interview, we could have asked the interviewer for a friend or something. Then ask him for life advice, technical guidance, etc. Ask shamelessly and don’t worry about being disliked hahaha. This is how I asked an interviewer, and learned a lot of things, the difficulties of the project, or technical thinking and so on.

Part of the surface by the

Hema X Digital Agriculture Division, Arita

At the beginning of surface

The first interview was the longest conversation ever, more than an hour, but the first interview was really touching and encouraging me all the time, “ok, ok, it doesn’t matter”, ah great, give me this chicken a lot of confidence HHHH

1. Enter the URL to the page display
2. Browser storage
3. How to implement inheritance
4. Cross domains, which one do you use? Explain
5. The cache
6. Redraw the reflux
7. Performance optimization
8. The React advantage
9. React lifecycle
10. React Best Practices
11. The React of new features
12. If the list component needs to add some content, such as title, introduction, etc., how would you change the code (container component -> Presentation component)
13. CSRF and XSS
14. flex
15. Check whether it is an array
16. typeof arr === ‘object’
17. Browser event loop, Node event loop
18. Event delegation
19. Webpack process, plug-ins
20. Koa source
21. Koa onion model
22. Mobx principle
23. The first screen to optimize
24. async/await Promise
25. The box model
26. Babel principle
27. Taro principle

One side

One side I put pen test questions and I do the situation ha ha ha, one side of the interviewer told me topological sorting, I knew there was this kind of thing (tears…

The written test questions

1. Given a linked list, determine if there are any rings in the list, such as the one shown below.
   

   

   Bonus: Use space complexity O(1) implementation

---

2. Analyze the dependency structure of a project and prioritize dependencies. Given the dependency structure of a project, it is expected to load related components asynchronously in the front end by way of Loader, while we expect dependencies in the loading process:

• Each dependency is executed as soon as it is loaded, so if a dependency is to be loaded, its children should be loaded first
• Each dependency does not want to be redundant when there is a large amount of money. If there is a multi-version dependency, the updated version is used by default. For example, the known project dependency structure is (where @ is the dependency version number) :

ProjectA
- [email protected]
    - [email protected]
    - [email protected]
- [email protected]
    - [email protected]
    - [email protected]
- [email protected]
Copy the code

Is one of the output depends on the prioritization: [‘ [email protected] ‘, ‘[email protected]’, ‘[email protected]’, ‘[email protected]’, ‘[email protected]’]

Output analysis: in order for a to be executed after loading, d and C must be loaded first. Similarly for B, and because the latest version of C is 0.2.0 under the whole dependency relationship, the above output result is obtained.

---

3. React implements a search box component that includes:

• Word limit for input text
• You can configure input text constraints, such as numbers only
• Keywords can be searched and related items are displayed in a drop-down box
  

  

---

The answer to the an

1. The first leetcode comes from the original leetcode, so circular lists are like, you can use fast or slow Pointers or simple sets

const cycle1 = function (node) {
  let set = new Set()
  while (node) {
    if (set.has(node))
      return true
    else
      set.add(node)
    node = node.next
  }
  return false
};



const cycle2 = function (node) {
  let start = node
  let end = node.next
  while(start ! == end) {// Null if there is no ringif (end === null || end.next === null) return false
    start = start.next
    end = end.next.next
  }
  return true
}
Copy the code

2. In the second question, the first thing THAT comes to my mind is DFS to find those dependencies, and then finally compare the versions of those dependencies (in fact, it should be optimized with sets and topological sorting).

This problem has been pointed out in the comments section! The previous version compared strings, but ignored the multi-digit versions, such as [email protected] and [email protected]. The result should be the former, but the previous version printed the latter, now it has changed! All right!

function update(npmList) {
  let versions = {}
  letRes = [] // Compare version numbersfunction cmp(a, b) {
    const versionListA = getVersion(a).split('. ')
    const versionListB = getVersion(b).split('. ')
    for (let index = 0; index < 3; index++) {
      const versionA = parseInt(versionListA[index])
      const versionB = parseInt(versionListB[index])
      if (versionA > versionB) return a
      else if (versionA === versionB) continue
      else return b
    }
    returnA} // Get the version numberfunction getVersion(str) {
    return str.substr(str.indexOf(The '@') + 1)}function dfs(npmList) {
    if (npmList.length === 0) returnForEach ((NPM) => {const {name, deps = []} = NPMlet key = name.substr(0, name.indexOf(The '@') // If the dependency does not exist, add it; if it already exists, take the latest versionif(! versions[key]) { versions[key] = name }else{versions[key] = CMP (versions[key], name)} // Add to the final load list res.push(key)})return} DFS (npmList) // Remove duplicates and then convert package names to dependent names, eg: a -> [email protected]return [...new Set(res)].map(key => versions[key])
}
Copy the code

3. For the third one, I wrote it roughly and poof, I didn’t write it very well either. React

Import React, {Component} from. Import React, {Component} from'react';
import './input.css'

function debounce(fn, delay = 500) {
  let timeout = null
  return function(e, ... args) { e.persist && e.persist() timeout && clearTimeout(timeout) timeout =setTimeout(() => { fn.call(this, e, ... args) }, delay) } } class Tips extends Component {render() {
    const { tipsList } = this.props
    returntipsList && tipsList.length ! = = 0? ( <div className="tips__container">
        {tipsList.map((item, index) => {
          return (
            <a href="#" key={index} className="link">{item}</a>
          )
        })}
      </div>
    ) : <div></div>
  }
}

export default class Input extends Component {
  constructor(props) {
    super(props);
    this.state = {
      keyWords: [
        'Front-end Engineer 1'.'Advanced Front-end Development 1'.'Back End Engineer 1'.'Test Development 1'.'Project Supervisor 1'.'dress'.'Recent'.'123456'.'awdad1'
      ],
      inputValue: ' ',
      inputType: 'text', inputMaxLen: 20, wordsList: [] } this.handleInput = debounce(this.handleInput, 200) this.handleMaxLenChange = debounce(this.handleMaxLenChange, 400) } handleInput = (e) => { const { target: { value } } = e const { keyWords } = this.state const tipsList = ! value ? [] : keyWords.filter(item => { const res = item.search(new RegExp(value,'i'))
        returnres ! == -1 }) this.setState({ inputValue: value, tipsList }) } handleTypeClick = (e) => { const { target: { name } } = e this.setState({ inputType: name }) } handleMaxLenChange = (e) => { const { target: { value } } = e const { inputValue } = this.state const newInputValue = inputValue.substr(0, Value = newInputValue This. setState({inputMaxLen: value, inputValue: newInputValue }) }render() {
    const { tipsList, inputType, inputMaxLen } = this.state
    return (
      <div className="container">
        <div className="control__container" onClick={this.handleTypeClick}>
          <button name="text"<button name= <button name="number"</span> </span> <inputtype="number" placeholder="Default: 20" onInput={this.handleMaxLenChange} />
        </div>
        <div className="input__container">
          <div className="input__wrap">
            <input
              ref={input => this.input = input}
              placeholder="Please enter keywords"
              type={inputType} maxLength={inputMaxLen} onInput={this.handleInput} /> <button> Search </button> </div> <Tips tipsList={tipsList} /> </div> </div> ) } }Copy the code

// Container {width: 600px; width: 600px; height: 400px; margin: 0 auto; padding: 30px; background: #fff; } .input__container { margin-top: 30px; } .input__wrap { display: flex; align-items: center; } .input__wrap input { box-sizing: border-box; width: 85%; height: 50px; padding: 0 10px; border: #666 1px solid; border-right: 0; outline: none; } .input__wrap button { cursor: pointer; box-sizing: border-box; width: 15%; height: 50px; color: #fff; font-size: 20px; border: none; border: #666 1px solid; outline: none; background: #1890ff; } .control__container { display: flex; align-items: center; } .control__container button { cursor: pointer; width: 50px; height: 30px; margin-right: 10px; color: #fff; outline: none; border: #333 1px solid; border-radius: 8px; background: #1890ff; } .control__container span { margin-left: auto; margin-right: 10px; color: #666; font-size: 14px; } .tips__container { overflow-y: scroll; max-height: 200px; border: #333 1px solid; border-top: 0; } .tips__container .link { display: block; height: 30px; padding: 5px 10px; color: #666; line-height: 30px; text-decoration: none; } .tips__container .link:hover { color: #fff; background: #666; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { display: none; }Copy the code

Second interview

The second face is mainly combined with the project to ask, seize a function divergent, such as the chat room function of my project, scared me good panic good panic HHH, but the interviewer has been very good guide me, especially those scenes, guide me to think, ah, too touched!!

1. Project all kinds of things
2. How to chat privately
3. How to do chat record unread messages
4. Chat offline message processing
5. Session How to implement session management (After a user logs in, open a new TAB and enter a URL to access resources)
6. Resource access permission control
7. Event queue problem
8. How does websocket connect
9. Do the design and development of system components (develop more types of questions, how to design components)
10. User authentication system design
11. Why is the password table separate from the user information table
12. Design of database tables

On three sides

This aspect is also asked in conjunction with the project. Ah, the three face of the interviewer is really too good, at the beginning of my small project no difficulty (I thought cool through the woo woo), and then the interviewer gave me a few suggestions, let me go to think deeply, after the interview to ask him questions, also has been very patient to give me guidance, ah, great 🤭

1. Project all kinds of things
2. Why did the flying pig die
3. Project the difficulty
4. How does the applet login work
5. What components are encapsulated
6. Suggestion: Online marking, annotation, correction of typos, etc. (Canvas drawing)
7. Suggestion: Monitor each student’s progress in real time (update on teacher side after selecting the answer/camera monitoring)
8. A chat with B, and then combine their records and send them to C, how to design
9. In addition to compiling into small programs, have you tried app

All around

The four sides should be the director’s side, and I still have to thank the interviewers from the three sides for their suggestions. After I made them, I found that this could be a difficult point to brag about in the project. All around basically still will ask around the project, I personally feel those who pay attention to is oneself thinking, to technical understanding, to oneself future development plan wait macroscopical content

This is the little function, Canvas does homework annotation and so on

1. Project difficulties (Canvas drawing formula
2. Websocket realization, chat function realization (heartbeat detection, disconnection reconnection
3. Project Details
4. Consistency of chat messages, timing
5. What do you want to learn from the internship
6. Technical planning, and then what

Five surface

Five is the cross face, scared to jump purr purr, I hope not to hang up… Ask five face are mostly the basics, but also combined with the project to ask, this side the interviewer’s main concern is the content of the performance, such as data buried point ah, page load time, the interface response time and so on a series of questions about the performance, he hope is a thing of quantitative data, specific implementation, achieve what etc.

1. The project did those things
2. Applets run pool
3. Applets and H5 differences
4. Where does the cache exist (which fields are used to save strong cache and negotiated cache
5. React vs. Vue
6. The advantage of the React
7. Taro compilation mechanism
8. Taro support what end
9. Mechanism and advantages of Node
10. Difficulties of the project, how to solve, problems encountered
11. How to Monitor Performance
12. What performance optimizations have been attempted
13. Collect user information? Data burial point? Performance metrics? Quantitative indicators?
14. Resource size, loading speed, page rendering time, interface access time
15. How to optimize node backend interface (SQL optimization, table structure rewrite
16. What server do you use and what operating system do you deploy on
17. Has the interface been tested for multiple simultaneous access? Maximum carrying capacity
18. How does WebPack reduce resource packaging size
19. Good at what
20. What are your strengths
21. The goal? Planning?

WXG Open Platform Small program Foundation Department

One side

One side is written examination + interview, I also put the topic with my answer!

The written test questions

1. Implement a function reverse(a, n) that reverses an Array a containing n integers.

---

2. CountLongest (tree), input a binary tree, return the distance between the longest distance in the binary tree between the two leaf nodes.

var x = [0, 1, 2, 3]
reverse(x, 4) // x = [3, 2, 1, 0]
var y = [1, 2, 3, 4, 1]
reverse(y, 5) // y = [1, 4, 3, 2, 1]
var tree1 = {
  value: 1,
  left: {
    value: 2
  },
  right: {
    value: 3
  }
}
countLongest(tree1) // 2
var tree2 = {
  value: 1,
  left: {
    value: 2,
    left: {
      value: 3,
      left: {
        value: 6
      }
    },
    right: {
      value: 4
    }
  },
  right: {
    value: 5
  }
}
countLongest(tree2) // 4
Copy the code

---

3. In front-end development, multiple JS files are usually merged into one file to reduce the number of network requests and achieve the goal of optimized loading speed. However, when there is a dependency between files, there will be certain requirements for the sequence of JS merging. For example, A.js depends on B.JS. B.js needs to come before A.js. Resolve (tree) implements a function that outputs an array in a reasonable packing order based on the js dependency tree.

The sample

var tree1 = {
  name: 'main.js',
  require: [{
    name: 'A.js'
  }, {
    name: 'B.js'
  }]
}
resolve(tree1) // ['A.js'.'B.js'.'main.js']
var tree2 = {
  name: 'page.js',
  require: [{
    name: 'A.js',
    require: [{
      name: 'B.js',
      require: [{
        name: 'C.js'
      }]
    }]
  }, {
    name: 'D.js',
    require: [{
      name: 'C.js'
    }, {
      name: 'E.js'
    }]
  }]
}
resolve(tree2) // ['C.js'.'E.js'.'D.js'.'B.js'.'A.js'.'page.js']
Copy the code

---

4. Given an array of integers a, implement countMax(a) to calculate the maximum sum of noncontiguous elements from a.

The sample

var x = [1, 4, 5, 3]
countMax(x) // 7
var y = [3, 12, 6, 2, 4]
countMax(y) // 16
Copy the code

The answer to the an

1. It’s a simple inversion of HHH

function reverse(arr) {
  let len = arr.length
  for (let start = 0; start < Math.floor(len / 2); start++) {
    let end = len - start - 1;
    [arr[start], arr[end]] = [arr[end], arr[start]]
  }
  return arr
}
Copy the code

2. This is leetcode and it’s like, let’s just do the depth

function countLongest(tree) {
  if(! tree)return 0
  let res = 0

  function dfs(node) {
    if(! node)return 0
    const leftMax = dfs(node.left)
    const rightMax = dfs(node.right)
    res = Math.max(leftMax + rightMax, res)
    return Math.max(leftMax, rightMax) + 1
  }
  dfs(tree)
  return res
}

console.log(countLongest({
  value: 1,
  left: {
    value: 2
  },
  right: {
    value: 3
  }
}))
console.log(countLongest({
  value: 1,
  left: {
    value: 2,
    left: {
      value: 3,
      left: {
        value: 6
      }
    },
    right: {
      value: 4
    }
  },
  right: {
    value: 5
  }
}))
Copy the code

3. Does the third question look familiar? Ha ha ha, it seems that it is DFS looking for it

function resolve(npmList) {
  const res = []

  function dfs(npmList) {
    if (npmList.length === 0) returnnpmList.forEach((npm) => { const { name, require = [] } = npm dfs(require) ! res.includes(name) && res.push(name) })return
  }
  dfs(npmList)
  return res
}


console.log(resolve([{
  name: 'page.js',
  require: [{
    name: 'A.js',
    require: [{
      name: 'B.js',
      require: [{
        name: 'C.js'
      }]
    }]
  }, {
    name: 'D.js',
    require: [{
      name: 'C.js'
    }, {
      name: 'E.js'}}}]]]))Copy the code

4. Let’s use dynamic programming

function countMax(arr) {
  const len = arr.length
  const dp = new Array(len).fill(0);
  dp[0] = arr[0]
  dp[1] = arr[1]
  dp[2] = arr[0] + arr[2]
  for (let i = 3; i < len; i++) {
    dp[i] = arr[i] + Math.max(dp[i - 2], dp[i - 3])
  }
  return Math.max(dp[len - 1], dp[len - 2])
}

console.log(countMax2([1, 4, 5, 3]))
console.log(countMax2([3, 12, 6, 2, 4]))
Copy the code

The interview content,

1. project
2. Why use token instead of cookie
3. Cross domain (front end cross domain and front end cross domain, between Iframes)
4. xss
5. React vs. Vue
6. Taro and other multi-terminal frameworks
7. The main thing is project divergence
8. How to realize the wheel broadcast graph

Second interview

The second surface is basically some basic bar, but some places will go deep to dig this way

1. HTTPS principle, handshake process (when symmetric/asymmetric, who comes first and why)
2. Common optimizations
3. How much webP format optimization
4. The cache is in the form of keys in the browser, what are the keys, what are the values
5. Design a cache policy, (hash value)
6. The React of key
7. React vs. Vue
8. Taro and applets official framework differences
9. Applets run pool
10. React list keys fixed, order switching will render
11. How do I identify performance bottlenecks
12. Project all kinds of things

On three sides

Three feelings is not enough for two difficult, ask more common should say, and then also ask the project like this

1. Algorithm: determine whether there are two numbers in the array add equal to the target value, give a variety of ideas and time space complexity (violent cycle, cycle pruning after sorting, dynamic programming)
2. Es6 class how to implement private variables (symbol + closure)
3. How do I monitor performance
4. Common performance optimization methods
5. How are memory leaks found and resolved
6. Garbage collection mechanism
7. Cross-domain (CORS + JSONP + other uncommon cross-domain methods)
8. Browser cache
9. Deep copy, deep copy purpose
10. XSS, CSRF
11. Cookie and token working principle, difference, how to design
12. Http1.1, http2.0
13. HTTP stateless
14. What is websocket protocol and how to connect
15. What are the advantages of Websocket versus rotation
16. Event loop
17. Whether setTimeout is on time, and if not, whether it should be advanced or delayed
18. Webpack process
19. Common HTTP status codes
20. Babel principle, Taro principle
21. Will key values in map be reclaimed (weakMap, weakSet, etc.)
22. Project… Difficulty, design, harvest
23. How to Study at ordinary times

Meituan Arrival Department

One side

1. project
2. Prototype chain
3. inheritance
4. instanceof
5. Event loop
6. What are asynchronous tasks and how are they implemented at the bottom (no
7. websocket
8. Disadvantages of polling
9. Disadvantages and advantages of Websocket
10. TCP three-way handshake
11. Why three handshakes
12. What happens if there are two handshakes, is it primarily the browser side or the server side that is affected most by maintaining unnecessary links
13. TCP congestion (no
14. XSS and CRSF
15. Cross domain (category, how to use
16. The same-origin policy
17. What problem is cross-domain trying to solve
18. Cookies and token
19. How to use token, design
20. Intention to city
21. Why front-end
22. Planning for front-end learning
23. Koa middleware model, Onion model
24. Three algorithms

1. Merge two ordered lists 2. Find the KTH largest number in array 3. The road of his city can be regarded as a graph composed of N points and M undirected edges, each edge having a fixed length. Chenchen has obsessive-compulsive disorder, he runs to a destination must take the shortest path (of course, there are several shortest path can be randomly selected). Chenchen wants to know the number of destinations he can reach by running exactly k meters. Note that the destination may be at points and sides in the figure, and that the destination is exactly k meters away from the start of the chenchen. If k is greater than the sum of all paths, there is no such destination, and the output is 0.Copy the code

Second interview

1. Function and arrow functions
2. What’s so special about the arrow function
3. What is unsafe about the React lifecycle and why
4. Why React Hooks
5. Please note the difference between Memo and useCallback
6. Hooks simulates the life cycle
7. A memory leak
8. How to monitor memory leaks, how to detect (global variables, closures, listening events, timers
9. Advantages and disadvantages of SPA
10. How to optimize the first screen loading
11. The difference between webpack plugin and Loader
12. The CSS is vertically centered
13. Margin relative to who
14. What is the layout for mobile
15. How to restore the design draft
16. Em, rem
17. Margin-top percentage relative to what
18. The difference between image formats
19. How do I detect if the browser does not support Webp (img onError
20. How do you use the ‘reject’ and ‘catch’ scenarios of Promise
21. The difference between class and function
22. Class implements static variables
23. For in and object. keys
24. Class inheritance characteristics
25. What is the difference between ES6 maps and objects
26. git rebase/stash/commit
27. How to wrap multiple elements without div (Fragment, <><>).
28. Prototype chain, function, how to achieve, principle
29. The box model
30. Array flat sort to remove weight
31. Pen test: to achieve the Currie function

On three sides

1. Project achievement, experience, experience (crazy questions
2. CSS Moving Blocks (CSS3, setInterval, requestAnimationFrame)
3. Why does requestAnimationFrame get to 60 frames
4. Javascript engine, V8 engine, garbage collection
5. What’s the difference between a V8 engine and anything else
6. Code compilation process
7. babel
8. HTTP is different from HTTPS
9. What if HTTPS sends a certificate, but I don’t have the CA’s public key
10. The difference between heap and stack
11. What other memory blocks are there
12. The garbage collection
13. How to manually collect garbage (timers, listening events, objects, etc.
14. Two questions that this points to
15. The written part

Implement a custom array under the sorting method (mount to the array prototype) implement underline string conversion large hump (ASF_AD_ADA_ADWA -> AsfAdAdaAdawa) implement publish subscribe (on,off,emit,once)Copy the code