If there is a miracle in life, it must be the path of hard work!

Hello, everyone. I am Koba, an ordinary front-end development engineer who is not willing to be ordinary.

Emmm, today, I would like to talk with you about Koha’s CVTE surprise interview

Why is it a surprise face pinch?

Well, an invitation to interview out of the blue and out of the blue.

When I received the interview invitation, I just started reviewing for two days!!

It was supposed to be pushed by Dull in late March/early April…

I checked my records for the dumb guy, and he was in the talent pool years ago! Didn’t what impression ah, adult I injustice!

Fortunately, if I die, you can pick me up (continue to whip the corpse), and then I will risk it all, rush ah _ φ(°-°)/

Let’s talk briefly about the basic personal situation

【 Basic Information 】

  • Graduated in June, 19,Computer Science and TechnologySlag, this
  • Work experienceA year and a half, the actual working years are 2 years (because the working experience of big factory is calculated from the graduation time)
  • Technology stack:vueFamily bucket series,nodejs,nginx,CI/CD,docker
  • Goal: Front-end development position in guangzhou first-line factory

“Advantages”

  • trained
  • Set up the front-end framework of the company’s projects
  • Participated in and solved company projectsFront-end performance tuningThe problem
  • Served as aThe interviewerHave an overall understanding of the interview topic
  • Open source project koyu Live Streaming Platform
  • Open source project SULG UI component library

“Disadvantage”

  • The technology stack is vUE.
  • One and a half years of experience, twice job-hopping (now it is the second time, both of them want to enter the first-line big factory, but unfortunately, I failed to get the interview opportunity in the first big factory)
  • Github has fewer stars (can you help?)

Koha has experience as a front-end interviewer and has interviewed a number of candidates, so let’s talk about what it feels like to be an interviewer. Koba summed up the candidates, probably can be divided into the following three categories

【 Lack of confidence 】

This kind of partner gives people the impression that they have certain skills, but they are nervous during the interview, which leads to stuttering or intermittent description of skills, and then gives the impression to the interviewer that the candidate is not confident enough and does not have a high degree of technical mastery, which will lower the interview evaluation. Therefore, it is suggested that this kind of friends can organize their answers in their own language during the review, imitating the scene of the interview. If it is caused by tension, you can first go to some non-target companies to practice, hot lower body, mainly to overcome their own psychology.

Ps: Koha also wanted to warm up before facing CVTE, but conditions are not allowed, ak47 ak47 schematic item and loot added

【 overconfidence 】

This kind of friend, how to say, may not have a deep understanding of their own. You feel like you have to be able to answer all the questions the interviewer is asking you (and it’s great to be able to answer all of them). Emmm, how do you say pinch. In fact, it is not necessary to answer all questions in the interview. It is quite normal to not understand one or two questions. When you don’t review or feel that you don’t know enough, you can directly say that you don’t know much about it. The interviewer won’t give you a straight answer because of these two questions. If you think you can answer the question, but you don’t know enough about it, you’re going to get grilled by the interviewer.

Ps: Koba in CVTE technology two, not careful into this situation, anyway more or less is a subclause o(╥﹏╥) O

【 Confidence, sunshine 】

These are the people who have the best chance of passing the interview. They usually do a lot of preparation, and koha’s first impression during the interview was that she was confident. They feel great and want to have them on their team. This kind of friends generally have a solid foundation, and will intentionally or unintentionally lead the interviewer to their best areas in the resume, self-introduction, project description and other dimensions, and then feel like a technical exchange rather than an interview, so this kind of friends are the most likely to pass.

Generally speaking, the time for a round of technical questions is 30-60 minutes. After 60 minutes, the interviewer will finish the interview as soon as possible, even if he still has something he wants to ask. Therefore, friends, try to say as much as you can in your familiar field. However, the interviewer is not obligated to dig out your characteristics, just like the kind of sunny and confident guy just introduced, they will introduce the interviewer into their familiar area from various dimensions, and then show their strengths, as much as possible to say. The interview is all about showing off your strengths, and if you can’t impress the interviewer in your area of expertise, let alone anything else.

Well, after talking about the basic information and the interviewer’s impressions, let’s start talking about Koba’s fantastic review and interview experience

After receiving CVTE’s surprise invitation, I reviewed for two days and began the interview. During the review period, I got up to brush API handwriting series and Leetcode at 6 am every morning despite fatigue (I used to get up at 9 am to wash and then walk to the office in a leisurely manner). Every day after work, is a quick dinner, and then crazy catch up on Brother Liang’s [job search series]. Thank liang Elder brother’s summary first here, without this summary, xiaoyu no matter how to cram again, also can’t put together those knowledge points strewn at random into a complete knowledge chain.

Introduce my plug – in to everybody, forehead, the strongest aid group!!

CVTE technology side (50min telephone conversation)

Why don’t you hurry up and start the interview? I can’t wait to kick your ass, so there’s no need for introductions. 【 sorry 】

1. Var let const raises stack memory

Var has variable promotion, while let and const are block-level scopes

Var and let can be declared unassigned. Const must be assigned or an error will be reported

Js has basic data types and reference data types

Base data types are stored in stack memory (values) and reference data types are stored in heap memory (addresses)

Const is a constant and cannot be changed if you define a primitive data type. If you define a reference data type, then the data in the reference data type can be changed, because the address is stored, that is, the address cannot be changed.

2. Cookie localStorage sessionStorage differences and application scenarios

[Similarities]

  • All belong to the local cache

【 Difference 】

  • Size: cookie 4k, localStroage, sessionStorage is generally 5M (IE is 3M)
  • Communication: Cookies are carried in the request header each time. LocalStroage and sessionStorage do not communicate with the server
  • Expire time: Cookies expire when the browser closes (expire time can be set to expire), localStorage expires when the browser closes (expire time can be set to expire), sessionStorage expires when the TAB closes

[Usage Scenario] Token, which leads to the following single sign-on and token

3. Sso, token, and system permissions

Interviewer: How is your company’s single sign-on system implemented and what is the token? How do you implement system permissions?

Me: bar bar bar…

4. HTTP 2.0, domain name divergence, domain name convergence

  • Using hPACK algorithm, head compression
  • Binary transfer is supported, http1.x is string transfer
  • Multiplexing (in the middle of the interviewer extended to ask questions about domain name divergence and convergence)
  • Server push

5. The flex layout

Emmm, I forgot what I asked, awkward…

6. Performance optimization

Interviewer: I see you have done performance optimization in the project, can you share?

Me: Blah blah blah…

7. Virtual lists

Derived from performance optimization

This is primarily used to optimize long lists (when pagination is unavailable)

Render only the visual window portion by calculation.

Interested partners can go to see SULG UI, source code

8.nodejs

Interviewer: Have you ever used NodeJS? What have you done?

Me: I learned NodeJS mainly in order to have a deeper understanding of the front and back end interaction, and wrote some simple background and crawlers

Interviewer: Have you ever written about middleware?

I don’t:

And then I stopped asking

9. Webpack, Loader, Plugin

What does an Interviewer Want to Know when He asks WebPack?

10. Project questions

slightly

Phone calls are easy. Most of them are basic + project questions. As koba so dish people have passed, friends should not have a problem to prepare, refueling yo ~

It took about a week between the first round of technical interview and the second round of technical interview, so I finally watched Liang’s job application series from beginning to end (except react, fortunately CVTE can accept Vue to React). In fact, Koha did not brush much leetcode in the second technical interview. She did 5-7 questions a day from the beginning of the review, and about 60 simple questions. She was mainly a graduate student with a basic knowledge of algorithm. This is my best effort, after all, the time is so tight!!

CVTE HR side (video side 40min)

But I didn’t expect the hr interview to follow (about two days later), I thought it was the technical one, another surprise!!

  • Some basic personal information
  • Job-hopping reason
  • Salary history
  • Expected salary
  • Personal planning
  • Family situation
  • Work related situation
  • Time of technical second interview

CVTE Technology Second side (video side 70min)

I was going to set up an in-person interview, and I was going to meet the guy, hahaha

But later, due to some circumstances, it changed back to the video surface

1. Introduce yourself

slightly

2. Job content: How to lead new employees

slightly

SULG UI open source component library

What do you do with your friends?

How are components designed?

What are the difficulties?

4. Difficulties in the project: How did you build the structure

There are mainly single page application to multi-page application and performance tuning two bar

And then, blah, blah, blah

5. Have you learned about the micro front end? Why not consider the micro front end when changing from a single page app to multiple pages?

I have seen Alibaba’s Qiankun (Routing distribution micro front end), and I have also written relevant Demo

However, the micro front-end has a higher requirement for the overall capability of the team than multi-page applications. However, our projects are all unified VUE, and everyone will use it. There is no mixed stack of VUE, React, Angular, jquery and other technologies, so there is no need to change to a micro front-end for the time being.

6. HTTP cache

Strong cache, negotiated cache, and heuristic cache

[Strong cache]

Strong caching is controlled using the Expires and cache-Control fields in the HTTP header. In a strong cache, when a request is made again, the browser determines whether the target resource “matches” the strong cache based on the expires and cache-control parameters. If so, the browser directly obtains the resource from the cache without communicating with the server.

Expires is a timestamp. When we try to ask the server for a resource in a second request, the browser compares the local time to the expires timestamp. If the local time is less than the expiration date set by expires, it goes directly to the cache to retrieve the resource.

Its biggest problem is its heavy reliance on “local time”. If the server and client time Settings might be different, or IF I just manually change the client time, then expires won’t meet our expectations. So we have a second method, cache-control.

Cache-control is a length of time, and we use max-age to Control the validity of the resource, which means that the resource is valid for up to the length of time, perfectly circumvents potential problems with timestamps. It has a higher priority and we use cache-control when both occur.

[Negotiated cache]

The negotiated cache depends on the communication between the server and the browser. In the negotiation cache mechanism, the browser needs to ask the server for information about the cache to determine whether to resend the request, download the complete response, or obtain cached resources from the local server. If the server prompts that the cache resource is Not Modified, the resource is redirected to the browser cache with status code 304.

[Heuristic caching]

If no Expires, cache-Control: max-age, or cache-Control: s-maxage is shown in the response, and the response contains no other caching restrictions, the Cache can use a heuristic to calculate the freshness life. The cache time is usually based on two time fields in the response header Date minus 10% of the last-Modified value.

7. Http1.0/3.0/1.1/2.0

This direct reference liang Elder brother’s [jsliang job search series29 – HTTP/HTTPS] can be ~

8. Macro versus micro tasks

I gave you a problem, and I said the order of output. And then I pulled the even loop again

Macrotask and microtask represent two categories of asynchronous tasks.

1. The entire script script is initially executed as a macro task

2. During execution, the synchronized code is executed directly, and the macro task enters the macro task queue and the micro task enters the micro task queue.

3. Check the list of microtasks after the current macro task is executed, and execute them successively until all the tasks are completed.

4. Render the browser UI thread.

5. Check whether Web Worker tasks exist. If yes, execute them.

6. After executing the macro task in this round, return to Step 2 and repeat the process until the macro task and microtask queues are empty.

9. Algorithm (Violent Recursion)

Given a series of tasks, these tasks may have dependencies, some dependencies must be executed successively, and none can be executed simultaneously. Write a function that calculates how long it takes to complete a given task.

// Const tasks = [{"name": "task1", "time": 1, "dependency": "",}, {"name": "task2", "time": 2, "dependency": "", }, { "name": "task3", "time": 3, "dependency": "task1" }, ];Copy the code
	function getTime(tasks){
          let taskObj = {},max = 0
          for(let item of tasks){
              taskObj[item.name] = item
          }
          for(let item of tasks){
              let currentMax = item.time
              if(item.dependency){
                  currentMax += dep(taskObj[item.dependency],taskObj)
              }
              if(currentMax > max){
                  max = currentMax
              }
          }
          return max
      }

      function dep(task,taskObj){
            if(task.dependency){
                return task.time+dep(taskObj[task.dependency],taskObj)
            }else{
                return task.time
            }
      }
Copy the code

10. Chain calls

Kohane did so badly that she thought she was going to die.

(CVTE is not lazyMan, but the idea is the same)

CVTE HR Second face (video face 40min)

Because the chain call of the second aspect of CVTE technology was very bad, I didn’t receive the phone for nearly three days, I thought I was hung up in the second aspect of CVTE technology, but unexpectedly the phone rang suddenly!!

  • Job-hopping reason
  • Concerns about the new company
  • The future development trend of the front-end
  • Current working hours
  • What do you do after work
  • A stressful time
  • The company’s technology department
  • Personal ability ranking in the company
  • My study in college
  • Personal career and life planning for the next 3-5-10 years
  • What if your future job or career doesn’t live up to your expectations?
  • Why you want to work in a big factory
  • If there are other better companies, what will you choose
  • Personal interests and hobbies
  • Something or someone that affects you personally
  • Anything else you want to ask me?

Emmm, after the second interview with HR. I received the oral offer about 2-3 days later. I suddenly felt sorry for being dumb, because I lost his award for internal promotion.

CVTE Sivoga surface (video surface 60min)

Emmm, HR had already got the oral offer after the second interview, but because of some special reasons, Xiwo was added (secretly threw a pot to be dumbstruck, it was he who clicked a “like” in the wechat video account, and I clicked it out of my “evil” curiosity. Yeah, and then I got sucked by Sev).

1. Introduce yourself

2. Performance tuning

The following is all about performance tuning

V-for adds key values, then pulls out the diff algorithm, and how to determine if performance is improved

Fair use of V-if and V-show

V-once renders elements only once

Reasonable usage life cycle, usage scenario

Reasonable use of computed and Watch, usage scenarios and the differences between them

Filter API data, Object.freeze ()

How many links are required for 100 HTTP requests, http1.0/1.1/2.0, and why? And then some questions about HTTP.)

CDN, what kind of file is suitable for CDN (out of HTTP cache), what if I need to update the CDN

Nginx tuning

Anything else you want to ask me?

Insert a simple algorithm in the middle (a little nervous, didn’t notice the space at the beginning, the big guy gave some hints to write out, recursion)

// Here are the unit tests

const test = () => { const listArray = [

{ input: [1, 2, [3, 4, 5]], output: '[ 1 2 [ 3 4 5 ] ]', }, { input: [79, [[88, 98], 99]], output: '[79 [[88 98] 99]]',},Copy the code

]

listArray.map(data => {

 const result = stringify(data.input)

 console.log(result === data.output)
Copy the code

})}

test();

const stringify = (list,res="") = > {
    // This function flattens an array into a string, as shown in the example
    // The input array contains only two types of array and number composition
    res += "["
    for(let item of list){
        if(Array.isArray(item)){
            res+=`${stringify(item)} `
        }else{
            res += `${item} `
        }
    }
    res += "]"
    console.log(res)
    return res
}
Copy the code

After the interview, Seval had a video call with Dull, who told me this was his boss and talked about a lot of other things over the phone. Let’s say I accidentally slipped out of my stupid little book and basically talked about a fantasy experience that could have turned into a novel, hahaha.

Ps: Guys, you can guess what The Nerd will do. Whether you guess correctly or not, I won’t tell you.

Hope my CVTE surprise face classics can bring certain help and inspiration to small partners, hey hey

If you have a dream, don’t give up easily, you can believe in yourself, Ou Li!!

In the end, thanks again to my support group (plug group) two big guys, dull and Liang Ge. Incidentally for a wave of attention, love you ~