preface

I haven’t summarized the article for a long time. I have been preparing for the interview recently. This article is also to share some of my experience and learning methods for the students with the same one-year experience.

Bytes to beat

Byte at that time is no internal push, direct BOSS cast (negative tutorial), soon HR contact about an interview

One side

  • Questions related to the project (project background, roles, responsibilities, difficulties, etc.)
  • handwrittenBindfunction
  • Implement an algorithm, string contains “[]”, “()”, “{}”, determine whether the correct closure
  • Do you understand front-end routing? What’s the difference?(2 the nexthashRouting andhistoryRouting, and some differences, this is not a complete answer.)
  • What syntax has been used in ES6?(let,constGrammar, and thenPromise, arrow functions, etc.)
    • Have you used symbol before? What are the uses?(Mentioned below to avoid naming duplication, implement private variables, incallandapplyIs useful.
  • Do you know about front-end performance monitoring?(The master askedWrong typeAs well asMonitor the wayI didn’t answer all the questions about the typetry-catch,Promise.catchandwindow.onerror, I can’t talk about it in detail because I don’t know much about it.)
  • What are the ways to optimize the white screen? Lazy loading, preloading, preparsing, loading on demand, caching, skeleton screen, etc.
  • The role of throttling? In what situations is this useful?
  • Talk about the browser’s message loop mechanism
  • The difference between Transition and animation?
  • RequestAnimationFrame is used to fetch frames per second. The requestAnimationFrame is used to fetch frames per second.

Second interview

  • Project related issues
  • Can you tell me how Babel parses the syntax?
    • What is the role of lexical analysis and grammatical analysis?
      • a=1; Will lexical analysis be performed?
      • How is lexical analysis done? (Key words)
    • Which comes first, morphology or grammar?
    • What counts as morphology and what counts as grammar?
    • const const a=1; Can lexical analysis pass? Is the error reported only after parsing?
  • So let’s write a problem, let’s take a tree node, value and children, and find the value and sum of all the nodes
    • What do you see as the downside of recursion? (Mention stack burst and memory overflow)
    • What type of error is stack burst? A system error or something? (Didn’t answer…)
    • How to improve the code for the problem you mentioned? (Talking about bottom-tail recursion and replacing recursion with iteration, which took about five minutes to implement with DFS)
  • How does the browser console render? How to output console to output display in browser console?(Direct mask, see I will not ask the browser display process, the next part of the basic full mask)
    • Where do YOU find the cache for DNS resolution?
    • How do I find the DNS server?
    • How does DNS resolve IP?
    • How do I find the peer party after the IP address is resolved?
    • Why three handshakes? What if it doesn’t go through the third time?
  • Let’s talk about a postcard problem. You have a postcard to send to a stranger. You have a few questions
    • How do you keep it from the Courier? (Wrap the envelope, buried here a pit, did not think of another pigeon communication read inside, with the box lock is more reliable)
    • When the Courier removes the envelope? (Add clues in the content of the letter, add clues outside the envelope for a decryption response, did not get the interviewer for the above tips)
    • The envelope was changed? (Ask an authoritative post office to add a stamp)
    • How does a stranger know which are the seals of authority?(Everyone has a reference table of post offices)
      • What about the seal being renewed? (Post office notification or update yourself)

On three sides

  • Project related issues
  • Write a title. Recover Ip addresses
    • Force buckles the original problem

conclusion

A problem is the front end of the more common knowledge points, although many have not used but at least heard, so can say some, good preparation should be no problem. The second interview basically focused on the same knowledge point, and I failed to answer many questions, including the last postcard question. Because I was nervous and confused, I thought I failed, but the interviewer still gave me the opportunity to answer three questions. I didn’t ask too many questions on the three sides, and didn’t make up the key algorithm questions (too much TAT). After the end, I specially studied the backtracking and made up the answers. In the end, they still failed, and were picked up by another department to start the interview again.

Bytedance changes departments

One side

  • Project related issues
  • cssImplement an equilateral triangle
  • thisRelated topics
  • Prototype chain related topics
  • Tell me aboutnewThe process of!
  • Implement a publish subscribe model
  • Tell me aboutheaderWhat are the common fields? What are the effects?(Some common ones)
    • CookieWhat are the fields? What are their roles(aboutSameSite,HTTPOnly)
    • Access-Control-Request-MethodRole?
  • How to prevent CSRF?
  • Do you know anything about front-end error monitoring? (The answer is similar to that of flying books)
  • Do you know how to communicate with single-page and multi-page apps? (The difference between single page and multiple pages is too much.)
  • What’s the difference between HTTP and HTTPS? (Mainly from HTTPS to solve the problem of the point description)

Second interview

  • Project related issues
  • If you were to implement a scan payment function, how would you do it? (Roughly from the front end and back end of the two perspectives of the idea)
  • How to preventiframeSecurity issues caused by nesting phishing sites?(No ideas.)
    • The interviewer prompts,iframeHow to determine whether it is nested?I think I can get throughtopIs the value of the variable equal towindowTo determine)
  • What considerations do you take into account when implementing a deep copy? How to write a deep copy that will impress your interviewer?

On three sides

  • Project related issues
  • Implement the merge of two ordered lists(When writing a little nervous the first time did not run, the interviewer gently let medebugOnce, adjust for a while, run past)

All around

  • Project related issues
  • Do you know how Redux works? (No, it should be publish subscribe mode. The interviewer said the core was a little more subtle, let me check it out later)
  • What design patterns do you know?(Singleton, policy, decorator, publish and subscribe, share)
    • Do you understand the adapter pattern? B: No. Just too)
  • What are the features of functional programming? (Good reuse, stateless, idempotent, the interviewer said and delayed execution (e.g., Cremation))
  • What do mainstream frameworks know? Which one is familiar?(Vue, read some source code)
    • Give you a template, write the code after compiling it into the render function.
  • Talk about Vue’s dependency collection process
    • Are dependencies recollected when the data changes?
  • Tell me aboutwebpackHow well do you know?(Familiar with optimization plug-in, packaging principle and hot update principle, read the core source code)
    • Are loader and plugin implemented? Do you know how it works? (the former is a function, the latter is a class, two written form of the difference, at the same time in the source of the execution position)
    • Tell me aboutmodule,chunk,bundle,assetThe difference between?
    • chunkMust it have been generated through a portal? (Not necessarily,importDynamically loaded modules will also act as onechunk)
    • css-loaderThe role of?(Dealing with dependencies)
    • cssHow is the path resolved in?(It should have passedfile-loaderAnalysis (not sure)
    • How do CSS-loader and file-loader work together? (I don’t know.)
  • Give a piece of code that asks to say the printed result
setTimeout(function() {
    console.log('setTimeout1');    / / 8
    new Promise(function(resolve) {
        console.log('promise0');    / / 9
        resolve()
    }).then(function() {
        console.log('settimeout promise resolveed');    / / 10})});setTimeout(function() {
    console.log('setTimeout2');    / / 11
});
const P = new Promise(function(resolve) {
    console.log('promise'); / / 1
    for (var i = 0; i < 10000; i++) {
        if(i === 10) {
            console.log('for');    / / 2
        }
        if (i === 9999) {
            resolve('resolve');
        }
    }
}).then(function(val) {
    console.log('resolve1');    / / 5
}).then(function(val) {
    console.log('resolve2');    / / 7
});
new Promise(function(resolve) {
    console.log('promise2');    / / 3
    resolve('resolve');
}).then(function(val) {
    console.log('resolve3');    / / 6
})
console.log('console');    / / 4
Copy the code

conclusion

Generally speaking, there are some difficulties in the interview, but they are all knowledge points that are usually used. Moreover, the interview is not necessarily a process of giving the best answer at the first time, but a process of thinking and discussing, which I think is also very important. In addition, the interviewer will be able to see the transcript of previous interviews, so you will probably avoid repeating questions when asking questions, which may also test your breadth of knowledge. Fortunately, I passed after one round.

Ali.

One side

  • Five written questions in 40 minutes
    • The parameters are parsed from the URL string
    • Handwritten setInterval
    • Flip the local linked list
    • Given a string, filter out all the numbers
    • Implement a countdown component
  • Project related issues
  • What is the reactive principle of VUE?
  • What is the mechanism of loader and plugin? Just a couple of examples(Said the difference between the two, mentionedstyle-loaderandhtml-webpack-plugin)
  • How do you learn?
  • What’s the difference between HTTPS and HTTP?(HHH)
    • Do you understand the certificate issuing process? (Knowledge blind spot, not very familiar with)

Second interview

  • Project related issues
  • Do you have any highlights to share? (Mainly about memory management in the project)
  • Tell me about the virtualDomthediffThe principle!
  • A career plan for the future

Three sides, four sides

  • Project related issues, in-depth and expansion

conclusion

On the other hand, Ali also studied the front-end basic knowledge, but the project-related problems and some open questions were investigated more, and the space to play would be larger.

Personal Experience sharing

After sharing the interview, I will share my personal experience and learning methods. Of course, due to the limited level, it is more for reference. Mainly from the usual preparation and interview preparation to share two aspects:

Usual preparation

Normal preparation is nothing more than learning, but the benefits and effects of different methods are completely different. I have summarized a few important points myself

Effective learning

The opposite of this concept is ineffective learning, which means that time spent learning equals no learning. I think the key to effective learning can be summarized in these points

1. Learn useful and frequently used things

For example, I found Python interesting and spent a month learning it. I found Docker interesting and also took time to learn it. Mainstream frameworks are hot, I have to learn; There are a lot of similar things, after learning a long time after not used, quickly forgotten, so that is not effective learning.

2. Summarize the knowledge points

A good memory is better than bad writing. Many front-end basic knowledge are theoretical, which may not be frequently used in work. It may take a lot of time to learn it and then have to learn it again after a period of time.

3. Build a knowledge base

I think this is the most important point for me to go further. At the beginning, I shared an article to sort out an exclusive knowledge map. I had been studying piecewise until last Year’s National Day when I took this step and carefully sorted out my knowledge system. In this way, I can plan my time according to the priority of learning, and see the progress of learning intuitively, so as to quickly establish confidence and get positive feedback.

More time and more productivity

There is no doubt that most people are not gifted players and can only learn by spending more time and increasing efficiency.

1. More time

In fact, there is no shortcut to time, either to use the scattered time, or to squeeze more continuous time, for example, I am not good at using fragmented time, so I usually use the morning, evening and weekend time to study.

2. Greater efficiency

Speaking of efficiency, in fact, it is easy to be interrupted by distractions when studying. Here are some common tips

  • Watch chicken soup videos or great people’s blogs before you study to get motivated
  • Don’t study at home if you can. Study in a study room, a library, or a coffee shop will help you get in the mood
  • Get rid of your phone and use something like Tomato Clock to get up and walk for a while (I use Forest myself).

Preparation for an interview

If you usually have a good accumulation of words, then interview time just need to do some targeted preparation on the line

resume

Resume is very important, although many people emphasize it, but many people, including me, do not pay attention to it. At first, I thought my resume should only get me through the screening process, but in reality, the interviewer’s questions will often focus on your resume, and what you add to your resume can be a highlight or a gaping hole, so find someone to help you fix it.

Interview related knowledge

As I mentioned earlier, when interviewing for a job, the interviewer will often ask questions about your resume, so you need to think carefully about what you know about your resume. There is no doubt that they feel sure of the technical stack of bright spots to write in, grasp the grasp of the degree of online there are a lot of articles introduced I will not say, at the same time around the content of writing to review and consolidate. Here’s the caveat: Don’t spend a lot of time learning a technology stack just to force it in.

For example, many companies require the React technology stack, and you spend a lot of time preparing and writing your resume in order to meet this requirement. On the one hand, you will not have enough time to fully master a new knowledge point during the sprint stage of the interview, and on the other hand, you will not be able to withstand questions during the interview stage without the support of a project, which will only be a minus.

Project experience and difficulties

This piece of what to say what line, you can talk to yourself a few times, say a few times can be more smooth expression. If you don’t know the difficulties or highlights of your project at the beginning (I encountered this problem at the very beginning), you can find a friend who is more senior than yourself and give him a detailed dictation of your project bit by bit, asking him to give you some opinions and reference from his point of view.

The interview’s analyse

In addition to checking your knowledge level, the interview itself is also a good learning process. If time permits, try to meet with several companies as much as possible, and learn to improve the questions that have not been answered well, so as to check the gaps and fill in the gaps. After the interview, reflect on your shortcomings so that you can handle similar questions more calmly in the next interview.

conclusion

This article is mainly to share the face and some personal summary, did not involve a lot of knowledge sharing, but online this kind of article should be more and comprehensive. Hope this summary to share to some years of age is not high, is looking for a job, or in the opportunity of the students to help ~ after this period of time should review the knowledge summarized into the article to share, interested students can pay attention to the follow-up ~

Write in the last

  1. Thank you very much to see here, might as well click a “like” support, very grateful ~!
  2. More articles and knowledge points will be updated in the future. If you are interested, you can pay attention to a wave of ~