The author | Youhe (front end) of time and space

Front space and time, one problem of the day. Reply “0” to enter the communication group, reply “1” to see the daily question, reply “2” to see the answer analysis.

preface

March has passed, and my spring recruitment interview has come to an end. During this period of nearly a month, I experienced the tension in the interview, the pain when I failed, and the excitement of getting the offer. At present, the face of byte, Meituan, Tencent, Qingyuan Momo, Ali. I also got internship offers from Byte, Tencent and Qingyuan Momo. This time first from the author from their own heart course combined with interview dry goods. (PS: Because the author did not timely write the interview after the good habit, so that some details are forgotten. I’ll come back as soon as I think of it)

First Interview – Bytedance (front page)

This is my first interview in my life and I am a little nervous. The interviewer is a little serious little sister, see her at the first sight of the author felt that is the image of the program yuan in his mind.

  • To introduce myself
  • CSS selector, priority
  • Standard box model and IE box model
  • Js inheritance (original, constructor, combined, parasitic)
  • Js judgment type (typeof, instanceof, Object. The prototype. ToString. Call)
  • Settimeout is different from setInterval. Macro task, micro task, asynchronous queue
  • A question to examine the promise
let j = (a)= >{

return 2

}

new Promise((resolve, reject) = >{

resolve(1)

}).then(j).then(req= >{

console.log(req); / / 2

})

Copy the code
  • A few HTTP fields (content-Type, cache-Control, Etag)
  • How to configure cros for node
  • HTTP status code and what does it stand for
  • Cookie, Session, and token
  • Have you learned the difference between Express and KOA? Here the author mainly talked about the onion model
  • 1. Breadth-first traversal of binary tree 2. Multi-dimensional array flattening 3.

I didn’t perform very well in the interview. I was very nervous and my hands were shaking when I wrote the programming questions. Fortunately, I was told that I had passed that evening. The second interview begins the next day.

Bytedance (Front page 2)

The second interview was conducted by a younger brother, who did not show his face.

  • Front-end optimization is an open question, which can be answered from many aspects, such as reducing resource request, resource size, network optimization, resource loading, backflow redrawing and so on.
  • Does VUEX state management exist? Unidirectional data flow and centralized management
  • How does vuex action trigger? dispatch
  • Introduce the project and difficulties? I won’t go into detail on this, but every project is different, so you just want to give the interviewer the impression that you have a thought process in place.
  • Pen test
1.Implement an Add method

add(1) (2.3) (4). The value () output:10



function add(. num) {

let curr = function (. out) {

return add.apply(this, num.concat(out))

}

curr.value = function () {

return num.reduce(function (pre, cur) {

return pre + cur

})

}

return curr

}

2.Implement an asynchronous Queue, Queue, requiring callback execution in chronological order

new Queue().task(1000.function () {

console.log(1);

}).task(2000.function () {

console.log(2);

}).start()



The answer1:

function Queue1() {

this.queue = []

this.task = (time, fn) = > {

this.queue.push({fn, time})

return this

}

this.start = (a)= > {

let deffer = 0

for (let i of this.queue) {

deffer += i.time

setTimeout(i.fn, deffer)

}

}

}

The answer2:



function Queue2() {

this.queue = []

this.task = (time, fn) = > {

this.queue.push(function (resolve) {

setTimeout(function () {

resolve(fn())

}, time)

})

return this

}

this.start = async() = > {

for (let i of this.queue) {

await new Promise(i)

}

}

}

Copy the code

The written questions of this interview were full of bugs, which left a bad impression on the interviewer. But at the end of the interview, the interviewer gave me some advice and encouragement. In the evening, HR asked for an evaluation, but the evaluation failed. But remember the second interview little brother of my encouragement, decided to fight again.

Qingyuan ink and ink

The first time I came into contact with Qingyuan Moo was when I took the cet-4 exam and downloaded this app (although I never really used it). During the interview, an HR girl added me, introduced me to the company and informed me of the interview. During the interview, THE boss and the technology met me on wechat.

  • BOSS: Have you ever used momo app?
  • How many words did you recite (more panic, casually say 100 or so)
  • How do you know the existence of Momo app?
  • Your resume says you’re thoughtful, but there’s something wrong with the punctuation on your resume. (emmm)
  • UI issues with the project
  • Technology: Is JavaScript empty array true?
  • Is JavaScript single threaded
  • Js error 0.1+0.2 === 0.3 //false
  • Do you think the level of English will affect the programming (answer: not much)

Forgive me for only remembering these. Technically, this interview was more oriented to JS basic knowledge and asked a lot of oral judgment questions. You only need to answer yes or no. If you want to go to qingyuan Ink ink such a small company internship, THE author suggests more information about the company, because it is likely to contact the BOSS soul torture. Qingyuan ink ink company pressure compared to large factory small, the company kept a lot of cats, or a cat coffee. If it weren’t for the bread, I’d love it. Although I got the offer, I still declined the offer. The other side also asked me politely, why don’t you come? Do you not like Guangdong? T_T.

Tencent PCG side

The interview was conducted over the phone, and the interviewer spoke clearly and asked detailed questions. Generally speaking, his performance was ok.

  • Why learn the front end?
  • Know Python, go? Understand the python
  • What are the advantages and disadvantages of Node as a back end? Node has a performance bottleneck in high concurrency scenarios
  • Have you done anything with audio and video? A network disk, media file preview function
  • Browser redraw, how to reduce redraw?
  • Priority of asynchronous queue microtasks and macro tasks
  • What are the cross-domain approaches? Same-origin policy CORS, JSONP, postMessage, proxy server
  • How does JSONP work? Use script tags and register global functions
  • Localstorage, sessionStorage?
  • How to implement a horizontal centered Alert window? Fixed width high margin, CalC, Variable width High Transform, Flex layout
  • Webpack packaging process?

1. Initialize the webpack.config.js configuration result 2. Initialize the Compiler object to register all configured plug-ins that listen to the WebPack build lifecycle hooks. Call the run. 3. Analyze module dependencies (deep traversal), Treeshicking 4, according to the entry file. Loader is a function executed from right to left. The input parameter is a string, and the output parameter is also a string 5. Get the result of each file, including each module and the dependencies between them, and generate chunk. Webpack packs all the modules into one function. 6. The resulting bound file is a self-executing function

  • Have you ever used a WebPack plug-in that you think works best? A module hot replacement plug-in
  • What is a SPA application, compared to the disadvantages of multi-page slow first screen, not conducive to SEO crawl
  • What are the advantages of CDN? Has it been used?
  • Browser Cache issues

Strong-cached Expires field (local time limited) Catcel-Control fields max-age, public, private, no-store, and no-catch negotiate caching F-modified-since the client sends last-Modified messages to the server, carrying last-Modified inaccuracy-eTAG. The only identifier introduced into an Etag file is usually the MD5 that calculates the file contents

  • Browser resource loading priority? A: I don’t know, can you tell me about it? As for image resources, the browser will preferentially load the content visible to the user.
  • What have you read recently? nodeJS
  • At 3:20, find the Angle between the minute hands. Note here that the clockwise offset is subtracted by 10 degrees.
  • The written test simulates adding and multiplying large integers
function add(a, b) {

let res = ' '

let newA = a.split(' ')

let newB = b.split(' ')

let c = 0

while (newA.length || newB.length || c) {

c += parseInt(newA.pop() || 0) + parseInt(newB.pop() || 0)

res = c % 10 + res

c = c > 9 ? 1 : 0

}

return res

}

function multiply(a, b) {

let arr = []

let num = 0;

for (let i of a) {

let temp = num

for (let j of b) {

if(! arr[temp]) arr[temp] =0

arr[temp] += (i * j)

temp++

}

num++

}

for (let i = arr.length- 1; i >0; i--) {

if (arr[i] > 9) arr[i- 1] + =parseInt(arr[i]/10)

arr[i] = arr[i]%10

}

return +arr.join(' ')

}

Copy the code

The interview felt good, the interviewer little brother told me a lot of things, but also told me his actual business in the work, the use of the technology stack, the current front-end development. I personally respect and appreciate such interviewers. Make the call!

Ali nailing

Ali nail is in nail nail added group, and the group owner elder brother talked a few words, the last is also the elder brother to meet me. Here are two pen-based tests.

1.Function stabilization?

function throttle(fn,delay) { / / throttling

let lasttime = 0

return function () {

let nowtime = new Date().getTime()

if(nowtime-lasttime>=delay){

fn.call(this)

lasttime = nowtime

}

}

}

2.Stair climbing problems?

function jumpFloor(number)

{

let fib = [0.1.2]

if(number<3) return fib[number]

for(let i = 3; i<=number; i++){

fib.push(fib[i- 1]+fib[i2 -])

}



return fib.pop()

}

Copy the code

The interview questions

  • How does front-end security defend against XSS attacks?
  • How to escape
  • Do web crawlers understand
  • What problem is CDN mainly used to solve? (Load balancing and proximity principle)

The questions I encountered in this interview were similar to those in previous interviews, but instead of directly asking me questions, I was guided to answer them from actual questions. I could hear that he was leading me to answer some knowledge, but I just didn’t understand what he was trying to ask. At the end of the interview, he said to me, “You and I are from the same hometown and we talked on Dingding before, so I specially brought your resume to me. I don’t know whether it is good or bad for you. (I know it’s cold.) Then he reminded me that the code for climbing the stairs says an *, which should be a +. (A chill in my heart). In the mind is very grateful to the nail nail elder brother, determined to usually vague concept must understand.

Ali CBU side

  • HTML node type? Block-level elements and inline elements
  • Vue bidirectional binding principle? Subscribe to publish schema and Object.defineProperties
  • What are the differences between VUE3.0, 2.0, and 1.0? Virtual DOM, proxy instead of Object.defineproperties
  • Why use proxy instead of Object.defineProperties, which can only listen for changes to existing properties and not to the contents of arrays
  • How does vue’s parser work? Generate AST syntax tree analysis using template
  • Async browser support, when there is no async simulation? (generator)
  • What does the generator do? For consumption, use next interface
  • Three very simple programming questions (the first two are a bit too much code, so share the third one)
 /* The string hides part of the content

* mask('85022088'); * * * * 88 / / 85

* /


function mask(str, char) {

if (str.length <= 4) return str.replace(/\w/g, char)

let newStr = ' '

let start = 0

let mask = `${char}${char}${char}${char}`

start = Math.floor(str.length / 2 - 2)

newStr = str.slice(0, start) + mask + str.slice(start + 4, str.length)

return newStr

}

Copy the code

The overall feeling of the interview was very good, mainly because the interviewer was very humorous and relaxed, and we chatted a lot. This young man brings me a lot of positive energy and I hope to meet more and more people like him in the future.

Tencent PCG two face

PCG second interview is very sudden, just get up in the morning to the phone, in a hurry to start ~

  • Tell me about your internship experience, what problems you encountered during the process and how you overcame them.
  • Two users, A with A bandwidth of 2M in Shenzhen and B with A bandwidth of 100M in Shanghai, request A server to deploy A 4KB file in Heilongjiang. Who is faster? Personally, I think it is about the same in theory, but in reality it may be faster due to the proximity. My answer may not be right)
  • What happens when you type the url into the browser’s address bar? The general process is as follows:

DNS iteratively query browser cache records, local host file records, local DNS server recursively query root server TOP-LEVEL domain name, secondary domain name, authoritative server layer by layer encapsulation TCP -> IP -> data link layer (first MAC) frame -> bitstream -> routing based on IP -> The IP address is resolved to a MAC address. Layer by layer. TCP Three-way handshake Establish an HTTP connection HTTPS, HTTP establish an HTTPS connection (TLS/SSL handshake)

1 The client sends a request with a supported encryption protocol to the server, and the server returns a public key and certificate to the client. 2 The client certificate authenticates the symmetric key and encrypts the public key. 3 The server private key decrypts the sent public key and encrypts data with the public key. Establish communication

Browsers such as HTTP redirect status codes parse HTML, generate a DOM tree, parse CSS, generate a CSS rule tree, and then generate a rendering tree from the DOM tree and THE CSS rule tree. Render tree. Rearrange and redraw.

It’s an open question, and that’s as far as I can go.

  • Weight salt problem. 140g salt with 2g and 7g weight, a balance, three separate 50g, 90g
  • In the rhetorical section, I asked the interviewer what was my weakness? I was told to the point that I needed to strengthen at the bottom of the computer network.

Byte business realization platform side

  • How to determine the array type? Object.prototype.toString.call([]).slice(8,-1) === ‘Array’
  • Bind, call, apply
  • What happens when you type the url into the browser’s address bar? (This is the same as above)
  • TCP three-way handshake Why three times?
  • HTTP status code?
  • Web communication technology? Comet (HTTP streaming, Ajax polling), SSE, Websocket
  • What back-end languages have you been exposed to? The node, python
  • React vs. Vue? A two-way binding and one-way data flow
  • What does VUex do? State management, centralized management, the public data abstraction, easy to develop and maintain
  • React and jquery? Declarative versus imperative?
  • The MVC and MVVM?

Personally, I think it’s because the questions I asked in the interview happened to be what I know. I had a good impression and even praised my solid foundation. Go straight to the second interview.

Byte business realization platform second side + HR side

This time, the interviewer was the leader of the department and was quite serious

  • What projects have you done
  • Project security question: where is the MD5 encryption in the project (I answered front-end encryption)
  • Preventing XSS and CSRF attacks?
  • Front-end authentication token
  • Have you ever done any management projects
  • An algorithm problem the author did not write out this problem, but said the idea, and said his algorithm is very dish
  • Do you have any questions? I asked what the commercial realization platform is blabla…

I guess it’s those things. I can’t remember. After the interview, he was told that he had passed and waited for HR. Two days later, HR will ask you about your strengths and weaknesses, what you have been reading recently, and how your grades have been. Two hours after the interview, I got the offer. I have to say that the efficiency of byte is really very high. Personally, the reason why Byte develops so fast has a lot to do with byte’s pragmatic, strong technical atmosphere and flat management.

After I got the offer from Byte, netease called for an interview. Due to regional problems (the writer is Northeast Bank), I politely declined the invitation.

Tencent CSIG cross surface + HR surface

After a few days or so, I started the three aspects of Tencent PCG. During this period of time, my desire for interview was very low after I got the byte offer. I turned down the following interview when I was in PCG 3. The opposite asked me why I did not meet, which company to show respect for choice. Two days later, THE CSIG department of Tencent called me and I said that I did not want to continue the interview. The other party understood me and told me that the interview evaluation of PCG was good, and asked me if I would like to come to Tencent if I sent the offer directly. I was surprised and said yes. I didn’t expect to send an email to invite me three times. The interviewer was obviously a big man. He mainly asked about the details of the project in the Tencent conference. The whole process lasted less than 20 minutes, and then he entered the HR interview. When I met HR, the other party was 10 minutes late, SO I quickly called to ask. HR’s little sister said she was sorry that she was in a meeting just now, and the conversation lasted for 20 minutes. Get the official offer one week later.

Meituan to the shop business group cold noodles

I didn’t have any preparation for this interview, and it came suddenly. I couldn’t help feeling proud when I got three offers, thinking THAT I could control everything.

  1. Seven-layer model of computer network
  2. IP which transport layer. What protocols are available at the application layer, such as HTTP and FTP
  3. Talk about TCP four breakups
  4. UDP and TCP are different
  5. TCP traffic control, congestion control? Sliding window, congestion window, slow start, fast retransmission, fast recovery
  6. What protocol do you think QQ chat is used for? I answered TCP, but the other said UDP, TCP is too expensive.
  7. Top ten sorting algorithms? Complexity?
  8. At ordinary times the result how, I answer medium unripe, still had hanged a division.
  9. Why do you come to Meituan?
  10. Pen test: and is the continuous sequence of positive numbers S
function FindContinuousSequence(sum)

{

let [start,end] = [1.2]

let result = []

while(start<end){

// I forgot the summation formula.

let total = (start+end)*(end-start+1) /2

if(total<sum) end++

else if(total>sum) start++

else {

let list = []

for(leti=start; i<=end; i++){

list.push(i)

}

result.push(list)

end++ //start++

}

}

return result

}

Copy the code

Most of the questions in the interview were about the project. The interview brother spoke a standard Northeast Dialect, and we talked for 50 minutes, most of the time we were laughing, or he was silent. Personally, I feel that my performance is not very good, but I have offer in hand, so it doesn’t matter if I fail.

Ali CBU second side

  • To introduce myself
  • Project security (I discussed with you the security problems of localStorage token storage and how to improve them)
  • Vue and React are different
  • What other methods does VUE have besides parent-child transmission? Eventbus, vuex
  • Socket. IO protocol degraded?
  • What is the difference between a KOA framework and a native Node?
  • XSS attacks

When talking about the project in the interview, I mentioned the cloud disk and chat room I did. The other party doubted that I did it in the training class. I said that I was only a junior student (how could I afford to apply for the training class). I’ve answered almost every question I’ve been asked. However, he said there was no bright spot in the project and suggested that I continue to dig in some directions. I appreciate the interviewer’s advice. Although the foundation of the author is OK, but really lack in the project, the opposite also values project experience. Later, the other department added me on wechat and asked me which offers I got (Tencent was mentioned), saying that I could further my study for half a year and that I would contact me again in the autumn recruitment. (Ok.) It is a pity that I missed ali for the second time. Alas, food is the original sin.

That was my interview experience. Thank you for reading. Hope we refueling together, in order to move brick efforts ~

Pay attention to our