Personal circumstances

  • Graduated from a shuangfei university in Guangdong, the school recruited into qi ‘an Xin (former 360 enterprise security) work, just work for a year (it is difficult to find a job, but people in the river’s lake, involuntarily).
  • Leetcode brushed 200+ questions, basically able to cope with the interview. Wall crack suggested to do algorithm, really cool, and very exercise coding thinking.

Offer Call

One side

Duration: 47 minutes. I missed the interview for so long that I felt I didn’t answer a lot of questions well. An hour later, I actually received a second interview notice, thanking the interviewer for his mercy.

  1. To introduce myself
  2. 360 enterprise security, Qianxin,360 relationship? Why learn the front end? How do you study at ordinary times? Have you been reading anything lately? .
  3. Problem.
var a=1;
function fn(a){ a=2; }
fn(a);
console.log(a); / / 1
Copy the code
var a={a:1};
function fn(a){ a.a=2; }
fn(a);
console.log(a.a); / / 2
Copy the code
'use strict';
var a = 1;
var obj = {
	a:2.b:function(){
		this.a = 3;
	},
	print:function(){
		console.log(this.a); }}; obj.print();/ / 2
var print = obj.print;
print(); // This is undefined by default in strict mode
Copy the code
function F(){
	this.a = 1;
}
var obj = new F();
console.log(obj.prototype); // undefined, object has no prototype, function has prototype
Copy the code
  1. Two ordered arrays A and B. Is B A subsequence of A? No data formats can be converted and no apis can be used
[1.2.3.4.5], [2.3.5] = >true
// Go through the B array and look for the value in the A array. Take advantage of the characteristic of order, record where A traverses, and start from the record point next time.
Copy the code
  1. Project load optimization

Second interview

Duration: 1 hour 04 minutes, being beaten by the interviewer, algorithmic math problems, mushrooms…

  1. When did you learn the front end? Why learn the front end? How did you learn it?

  2. Given string S of length N(1ā‰¤Nā‰¤2000), construct a string T of length N. At the beginning, T is an empty string, and any of the following operations are repeated.

    • Delete a character from the head of S and add it to the tail of T
    • Delete a character from the end of S and add it to the end of T

    The goal is to construct a string with the smallest possible lexicographical order.

  3. TopK problem? What is the time complexity of quicksort? How do I optimize if the array is too large? What is the time complexity of the small top heap?

  4. Find all elements in an array of length n in the time complexity O(n) that satisfy both the following conditions:

    • This element is larger than any element placed to its left;
    • This element is smaller than all the elements placed to its right.

  5. Toss a coin until someone wins. The winning condition of A is heads then tails, and the winning condition of B is tails twice in A row. What is the probability of A winning the game of AB?

  6. There are 600,000 people east of the river, 400,000 people west of the River, if you make a million phone calls, how many will there be across the river?

  7. Cross domains? Why cross-domain restrictions? What are the solutions to cross domains?

  8. Pick a project? How many people are working on it? Which section are you in charge of? What technical difficulties did you encounter?

  9. What happens when you take a hundred thousand for loops and stick them in the middle of your HTML? How to solve the phenomenon of stuck? When will the script execute after the defer attribute is added? After adopting Defer, what happens when the user clicks on the page? Is there another way to disable WebWoker?

  10. What is the difference between loading 10 resources under one domain and loading them under multiple domains?

On three sides

Duration: 50 minutes, other departments are not front end leaders to meet, also have been doing the problem…

  1. Optimize project loading speed
  2. There are 100 bottles of water, one of which is poisonous. Rats will die after 3 days if they taste a little of the poisoned water. How many mice must be able to identify which bottle of water is poisonous in 3 days?
  3. Four values [a,b] and [x,y], how to judge the intersection of these two ranges?
  4. Algorithm problem: stock problem
  5. 25 kids, 5 tracks, at least how many runs to pick the three fastest kids?
  6. Algorithm problem: 701. Insert operations in binary search trees

Offer Call

One side

Duration: 1 hour and 07 minutes. The interviewer will guide you to answer the questions you don’t know. Nice.

  1. To introduce myself
  2. Project introduction
  3. Problems encountered in the project and how to solve them
  4. Problem.
for(var i=0; i<3; i++){document.body.addEventListener('click'.function(){
    	console.log(i) // Print 3, 3, 3})}Copy the code

How can I change it to 0, 1, 2? Why is var changed to let ok?

Function.prototype.a = () = > alert(1)
Object.prototype.b = () = > alert(2)
function A(){}
var a = new A()
a.a() / / an error
a.b() / / 2
Copy the code

How to modify to execute alert(1)?

A.a()
Function.a()
a.constructor.a()
Copy the code

Continue to

console.log(a)
var a = 1
console.log(b)
let b = 2
console.log(c)
function c(){}
Copy the code

Continue to

var x = 20
function a(y){
  var x = 10
  return get(y)
}
function get(y){
  return x+y
}
console.log(a(10)) / / 30
Copy the code
  1. Promise. AllSettled? Written Promise. AllSettled
  2. Algorithm: 70. Climb stairs
  3. Write a method that generates a random color value, such as #c1c1c1
  4. Vue’s bidirectional binding principle
  5. The implementation principle of computed
  6. Why do browsers block cross-domain requests? How to resolve cross-domain? Does every cross-domain request need to reach the server? How does the browser intercept the sending (sending, not receiving) of cross-domain requests?
  7. What about browser caching? Where do strong caches reside? How to solve the performance cost of calculating the entire file to get etag? What if I don’t want to use the cache anymore and request the latest one every time? What is the difference between no-store and no-cache?

Second interview

Duration: 1 hour, lack of self-perception in the overall interview. After the interview, the interviewer said he needed to meet with the interviewer.

  1. Implement a function, findLastIndex(), that returns the index of the last occurrence of a specified number in an “ordered” array

FindLastIndex ([1,2,3,3,3,4,5], 3) returns 4. What is the time complexity? When is the time complexity highest? 2. Implement a cacheRequest(URL, callback) request caching method to ensure that when Using Ajax, the same API actually sends only one request at the network layer to save network traffic. (Assume that there is a request underlying method to encapsulate ajax requests, and the call format is as follows: Request (URL, data => {}). For example, the caller code looks like this

// a.js cacheRequest('/user', data => {console.log(' I requested user from A, data is' + data '); }) // b.js cacheRequest('/user', data => {console.log(' I requested user from B, data is' + data '); }Copy the code
  1. Implement a function that converts a QueryString in a URL to an object, hoping to consider as many boundary cases as possible. (No query, same key, escaped characters need to be returned)
  2. Talk about the project. How was the project optimized? How is it measured after optimization? How to calculate the first screen time?
  3. Difference between V-show and V-if
  4. How do I calculate how many times a component appears in the viewport? How is IntersectionObserver used? How do YOU know when a DOM node appears in the viewport?
  5. What is the implementation mechanism of VUEX? What are the design patterns used in Vuex? Anything else?
  6. Have you ever used custom commands? In what scenario?
  7. Have common components been maintained? How is it done? Do you send packages through NPM? Have you seen what others have done with their open source component libraries?
  8. Talk about the webPack build process
  9. How does Webpack handle module circular references?
  10. What is the difference between loader and plugin? In what scenario? Have you written your own plugin?
  11. What about other build tools? What are the usage scenarios for Rollup?
  12. How do you learn new skills? What new technologies are you looking at?

On three sides

Duration: 1 hour 04 minutes, talking about the project and then doing the questions. The interviewer is very funny. šŸ‘

  1. Project related (this is a lot of talk)
  2. The random color value of one side I did not do right, the interviewer asked me to continue to do.
  3. Write a method to convert a hexadecimal color value to base 10. (# FFF => RGB (255,255,255))
  4. (CSS weight, relative positioning, absolute positioning, margin-top is negative)

CVTE (Two sides hanging)

Running time: 46 minutes, feeling average.

One side

  1. What about the JS event loop? Is JS multithreaded? What do you know about microtasks and macrotasks? What is the difference between microtasks and macrotasks? Is the callback function that binds an event a macro task or a micro task?
  2. What about JS closures? How do I create closures? What are the defects? How to solve it?
  3. You were talking about recycling. Let’s talk about recycling.
  4. If you want to know if a page is leaking memory, what do you do?
  5. You were talking about performance optimizations. How did you use chrome Developer tools during this process?
  6. What are the downsides of WebWorker? How do I get the main thread context on worker threads? Is there any other solution to the problem of lag besides using WebWorker? The interviewer suggested me to learn about React fiber. Have you tested the time of woker communication?
  7. Technical problems encountered in the project?
  8. What is a virtual list?
  9. Vue bidirectional binding principle
  10. Vue fundamentals what do you know? Talk about the Diff algorithm, see if I can understand it? (The interviewer uses React)
  11. What build optimizations did WebPack do?
  12. What do I need to pay attention to when encapsulating common components?

Second interview

Duration: 42 minutes. Half of the questions are “don’t know.”

  1. Project related, asking for a long time…
  2. Do you understand how to edit documents together?
  3. So object oriented, what is polymorphism?
  4. What does vscode plug-in do?
  5. Do you understand the design patterns? Anything else besides the observer mode? Something you can use.
  6. Let’s talk about wechat mini program
  7. Is there any understanding of mobile adaptation? Rem layout
  8. Does WebAssembly know?
  9. Does Electron know anything about it?
  10. What about TypeScript?
  11. Have you learned anything new recently, besides what we said above.

Betta Fish (once, but HR said someone accepted the offer, no HC)

Running time: 1 hour 13 minutes. The two interviewers took turns to ask questions. To be honest, their saliva was a little dry after the interview.

  1. Project related.
  2. Talk about anti-shake and throttling. Handwriting anti shake.
  3. We have a result that takes a lot of computation to get, and we store it locally and recalculate it only when the resource changes. How do we do that?
  4. What happens when you enter the URL in the address bar? What scenarios are strong cache and negotiated cache applicable to?
  5. There is a scenario where a web page needs to request resources far away, and the company does not have the money to buy a CDN, how to take advantage of cache optimization?
  6. What about closures? What are closures good for? What are the disadvantages?
  7. How does JS do garbage collection?
  8. Vue bidirectional binding principle? Does calling push to add elements to an array update automatically? Why is that?
  9. Have you seen the vue source code? Talk about the Diff principle
  10. Problem.
var a = 1 + '2'
var b = 1 - '2'
var c = [1.2] + [3.4]
Copy the code
  1. How do you determine the JS data type?
  2. JS has synchronous and asynchronous tasks, how do browsers handle them?
  3. Are you familiar with ES6 features? The rationale for Promise. Genertor? Async and await?
  4. How do I get the first intersection point of an intersection list?
  5. What is the difference between call, apply and bind? How does call work?
  6. Problem.
function lottery(whiteList, participant) {}// whiteList: an array of strings of type representing active users counted from other systems. If these users participate in a lottery, they must win. The length cannot exceed 10,000
// Participant: An array of strings of type. The meaning is to represent the actual participants in the activity. The length is about 100,000.

If the participant list is not in the whiteList, the remainder of the Participant list will be randomly selected.
Copy the code

Byte (two-sided hanging)

One side

Duration: 1 hour and 05 minutes, the whole interview process is easy, like šŸ‘

  1. Talk about REM, EM, PX, VH, vw
  2. How to draw a 0.5px line
  3. What are the weights of the CSS?
  4. Which CSS properties are inherited and which are not?
  5. Margin and padding set percentages relative to whom?
  6. Difference between @import and link
  7. What are the property values of justify-content?
  8. Browser rendering mechanism? Redraw and rearrange? Are dom trees and Render tree nodes one-to-one?
const str1 = 'abc'
const str2 = new String('abc')

str1 == str2
str1 === str2
str1.substr()
str2.substr()
Copy the code
  1. Var, let, const What is a temporary dead zone?
function showName() {
    console.log('Toutiao');
}
showName();
function showName() {
    console.log('OceanEngine');
}
showName();
var myname = "abc"
function showName2(){
  console.log(myname);
  var myname = "aabbcc"
  console.log(myname);
}
showName2();
Copy the code
  1. What can I do if I don’t want someone to add or remove elements to an OBJ object?
  2. Perfect the following functions to achieve the loading of pictures
function createImg(url){   }
createImg(url).then((value) = > {
    document.body.appendChild(value)
})
Copy the code
  1. How to solve ES6 compatibility problems?
  2. Function anti-shake and throttling?
  3. Vue bidirectional binding principle? Virtual DOM performance? Keep alive?$setThe use of? $nextTick?
<template>
  <div>{{a.b}}</div>
</template>

<script>
export default {
  data () {
    return {
      a: {}
    }
  },
  created () {
    this.a.b = 1
  },
  mounted () {
    this.a.b = 2}}</script>
Copy the code
for(let i=0; i<10; i++){this.a = i
    this.$nextTick(() = > {
        console.log(this.a)
    })
}
Copy the code
  1. What’s new with HTTP2? What is a multiplexed path? HTTPS encryption process?
  2. What about browser caching?
  3. 301, 302, 403
  4. What do you know about Web security attacks? How to defend?
  5. How to resolve cross-domain

Second interview

I don’t know what I’m doing. I gotta go. After the face did not answer, the question has not been remembered.

Recruitment šŸŽ‰

  • I entered the post quick hand a week, now just hair this article comes out, that affirmation is to want hair hard wide, recruit front end… There are a lot of HC, base in Beijing Kuaishuo headquarters, mentor every day in the interview šŸ˜, but also urge us to resume, don’t be afraid of tired big guy, big guy is superman to šŸ‘.
  • If you need to push it inward, you can add me to wechat HH18316452113. Let’s have an in-depth communication. šŸ˜Š

Write in the last

  • Man disposes, God disposes. When the interview, oneself will, show, passed is strength to fate also arrived, did not pass the word may be fate did not come.
  • Interview makes people grow, through this interview, but also realize their own shortcomings, continue to šŸ’Ŗ.
  • Last thanks@xiaoqing_Extrapolation of, hahaha.