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!

Understand why frameworks appear
Understand what issues/difficulties the framework solves
Understand basic framework syntax and usage
Understand the coding specification of the framework
Understand the holes in the framework and why they occur
Understand the principles of framework implementation
Understand the source code of the framework
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!

Dynamic programming
Graph theory
DFS/BFS
Greedy algorithm
The sorting
The heap
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

The first question is usually a leetcode difficulty easy/medium difficulty algorithm, are relatively common, generally linked list/array/string
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.
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

Your project, difficulties, etc
Use the return method of hook to disable event listening
What other memory leaks are there, and how can they be resolved
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

Enter the URL to the page display
Browser storage
How to implement inheritance
Cross domains, which one do you use? Explain
The cache
Redraw the reflux
Performance optimization
The React advantage
React lifecycle
React Best Practices
The React of new features
If the list component needs to add some content, such as title, introduction, etc., how would you change the code (container component -> Presentation component)
CSRF and XSS
flex
Check whether it is an array
typeof arr === ‘object’
Browser event loop, Node event loop
Event delegation
Webpack process, plug-ins
Koa source
Koa onion model
Mobx principle
The first screen to optimize
async/await Promise
The box model
Babel principle
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

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

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.

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

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

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

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!!

Project all kinds of things
How to chat privately
How to do chat record unread messages
Chat offline message processing
Session How to implement session management (After a user logs in, open a new TAB and enter a URL to access resources)
Resource access permission control
Event queue problem
How does websocket connect
Do the design and development of system components (develop more types of questions, how to design components)
User authentication system design
Why is the password table separate from the user information table
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 🤭

Project all kinds of things
Why did the flying pig die
Project the difficulty
How does the applet login work
What components are encapsulated
Suggestion: Online marking, annotation, correction of typos, etc. (Canvas drawing)
Suggestion: Monitor each student’s progress in real time (update on teacher side after selecting the answer/camera monitoring)
A chat with B, and then combine their records and send them to C, how to design
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

Project difficulties (Canvas drawing formula
Websocket realization, chat function realization (heartbeat detection, disconnection reconnection
Project Details
Consistency of chat messages, timing
What do you want to learn from the internship
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.

The project did those things
Applets run pool
Applets and H5 differences
Where does the cache exist (which fields are used to save strong cache and negotiated cache
React vs. Vue
The advantage of the React
Taro compilation mechanism
Taro support what end
Mechanism and advantages of Node
Difficulties of the project, how to solve, problems encountered
How to Monitor Performance
What performance optimizations have been attempted
Collect user information? Data burial point? Performance metrics? Quantitative indicators?
Resource size, loading speed, page rendering time, interface access time
How to optimize node backend interface (SQL optimization, table structure rewrite
What server do you use and what operating system do you deploy on
Has the interface been tested for multiple simultaneous access? Maximum carrying capacity
How does WebPack reduce resource packaging size
Good at what
What are your strengths
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

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

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

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

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

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

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

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

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,

project
Why use token instead of cookie
Cross domain (front end cross domain and front end cross domain, between Iframes)
xss
React vs. Vue
Taro and other multi-terminal frameworks
The main thing is project divergence
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

HTTPS principle, handshake process (when symmetric/asymmetric, who comes first and why)
Common optimizations
How much webP format optimization
The cache is in the form of keys in the browser, what are the keys, what are the values
Design a cache policy, (hash value)
The React of key
React vs. Vue
Taro and applets official framework differences
Applets run pool
React list keys fixed, order switching will render
How do I identify performance bottlenecks
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

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)
Es6 class how to implement private variables (symbol + closure)
How do I monitor performance
Common performance optimization methods
How are memory leaks found and resolved
Garbage collection mechanism
Cross-domain (CORS + JSONP + other uncommon cross-domain methods)
Browser cache
Deep copy, deep copy purpose
XSS, CSRF
Cookie and token working principle, difference, how to design
Http1.1, http2.0
HTTP stateless
What is websocket protocol and how to connect
What are the advantages of Websocket versus rotation
Event loop
Whether setTimeout is on time, and if not, whether it should be advanced or delayed
Webpack process
Common HTTP status codes
Babel principle, Taro principle
Will key values in map be reclaimed (weakMap, weakSet, etc.)
Project… Difficulty, design, harvest
How to Study at ordinary times

Meituan Arrival Department

One side

project
Prototype chain
inheritance
instanceof
Event loop
What are asynchronous tasks and how are they implemented at the bottom (no
websocket
Disadvantages of polling
Disadvantages and advantages of Websocket
TCP three-way handshake
Why three handshakes
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
TCP congestion (no
XSS and CRSF
Cross domain (category, how to use
The same-origin policy
What problem is cross-domain trying to solve
Cookies and token
How to use token, design
Intention to city
Why front-end
Planning for front-end learning
Koa middleware model, Onion model
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

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

On three sides

Project achievement, experience, experience (crazy questions
CSS Moving Blocks (CSS3, setInterval, requestAnimationFrame)
Why does requestAnimationFrame get to 60 frames
Javascript engine, V8 engine, garbage collection
What’s the difference between a V8 engine and anything else
Code compilation process
babel
HTTP is different from HTTPS
What if HTTPS sends a certificate, but I don’t have the CA’s public key
The difference between heap and stack
What other memory blocks are there
The garbage collection
How to manually collect garbage (timers, listening events, objects, etc.
Two questions that this points to
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

Unknown undergraduate chicken dish の for front journey (ali, tencent, Meituan) | the nuggets technical essay

Repetitive words

In the heart to prepare

Common QA

Front-end technology learning path

Front-end framework learning

Dachang algorithm/written test

Pen test

Code evaluation questions/written tests in interviews

Big factory front end requirements

Front-end review key points

Personal advice

preparation

Don’t be nervous

Reflects the thinking

TCP three-way handshake

XSS and CSRF attack and defense

Appropriate guide

Project the difficulty

Warm warm

A little thought

She learned

Part of the surface by the

Hema X Digital Agriculture Division, Arita

At the beginning of surface

One side

The written test questions

The answer to the an

Second interview

On three sides

All around

Five surface

WXG Open Platform Small program Foundation Department

One side

The written test questions

The answer to the an

The interview content,

Second interview

On three sides

Meituan Arrival Department

One side

Second interview

On three sides

Related Posts

China semiconductor industry “core” disease how to cure

The evolution of PyFlink’s core features from 1.9 to 1.11

Windows shortcut key set: two