Portal:

A year of front-end interview to upgrade the road (I)

A year of front-end interview to upgrade the road (2)

A year of front-end interview to upgrade the road (3)

The interview with DXY was the most impressive and memorable, so give a separate section for details

DXY

The company I most want to go to, I have attended their technology sharing meeting, and I have heard about the technical atmosphere. Not limited to commercial projects, but to focus on streamlining processes and improving efficiency, developing open source tools, refactoring old projects, etc

When I asked about the working process of the department, the first interviewer said a word: After determining the selection of technology, how to write cool.

Isn’t this the climax for programmers? !

The whole process lasted nearly 3 hours. It was the most learned interview, and also the most abused one so far.

The written test

There are some general topics, including basic data types, deduplicating array functions, Dom optimization schemes, what elements are in a row, the role of label (this is interesting), and how to find CSS selectors (from right to left). CSS selector priority; SetTimeout Asynchronous flow; The function this points to.

There are also some questions that I am not sure about. Among the unskilled points are re declaration, real-time function execution flow, operator priority, CSS pseudo-class selector priority

Make a list of the topics you are not sure about

<! -- About re --> Correct options for re declarations <! Var a = 1,b =2; console.log(a+++b) <! Var result = (var result = ())function() {return 1;
},function() {return "2"})() console.log(typeof result) <! Id class tag selector attribute value selector pseudo-class selector wildcard selector inheritance selectionCopy the code

After finishing the questions, I checked them once and then handed them to HR for notice.

While I was waiting, I suddenly had a better solution for DOM creation optimization

The title goes like this:

<! Var nodeI,m; Var data = [] // Data is a set of real datafor(var i = 0,m = data.length ; i<m ; i++){
    nodeI = document.creatElement("li");
    nodeI.noteText = data[i];
    var con = document.getElementById("container");
    con.appendChild(nodeI);   
}
Copy the code

I thought about it for a while while writing, and finally just pulled out the container variables to be global, so I didn’t need to loop through creating a variable.

But then it occurred to me that the innerHTML attribute should be added directly to the string, which is the most efficient way the browser can rearrange the elements once, rather than re-rendering the page every time it loops.

With this thought, the interviewer came in

The first

A cold brother, who had nothing to say during the whole journey, looked at the resume I had brought and the test paper seriously.

The first sentence said to me, you write this basic data type wrong, such a basic question

I thought I would not kneel in this kind of topic. Take carefully watched, five kinds of type string, null, number, Boolean, undefined didn’t write wrong. Interviewer: There is object, and Null belongs to object.

I thought he was wrong, so I looked it up on the spot, and it turned out that I was right, so I said something, and I’ll check it out later and then I skipped the subject.

After that, he started pointing to a few answers I’d written and asking me what I was thinking.

No, I said I wasn’t sure, and he didn’t tell me what the right answer was, and I was right. It’s always been a flat look.

After finishing the topic, I began to show the project I had written. I took out the materials and the GIF on my mobile phone. He looked at it casually and then said ok, I know.

Then I asked if I had made H5 and what was the difference between it and PC.

I said that I had not done a complete project. H5 is generally used on the mobile phone, but click events are different. In addition, the page performance requirements are relatively high

Judging from his reaction, he seemed not satisfied with my answer.

I was later asked if I had done a complete workflow from zero to configuration, product development, project packaging, and launch.

I honestly didn’t, because the company didn’t use scaffolding or packing tools for the project. I have used WebPack for my own projects and know some configuration and packaging methods, but have no experience in publishing projects. (In hindsight, he probably meant to ask the difference between the configuration of the development environment and the production environment.)

He said ok and asked if I had any questions for him

This is usually a sign that you want to end the interview. I asked them what they were looking for in the position and what their tech stack was. The interviewer has more patience to answer these points, then I can feel that he is a methodical, quiet, but pragmatic person.

I think it must be after reading the resume and writing the exam, I have already made a prediction that my level is not enough, so it is over very quickly

He also said that the lack of members in their group, MY level may not be up to. Just give me a minute, and he’ll see if any of the other groups are interested.

Then he went out.

The first failure, the key issues sorted as follows.

  1. What’s the difference between H5 and PC
  2. Complete process from 0 configuration to release online
  3. Plan for my technical direction in the coming year
  4. View of the front-end industry

No questions about my project, no questions about the problem-solving process, no technical questions beyond the exam.

Second interview

The second interviewer, who had some understanding before, had paid attention to his nuggets, a senior front end, carrying the computer in, smiling from beginning to end, or wenzhou native. It feels very intimate. Secretly @ phase senior once, I don’t know if he will know ha ha ha

Too young too simple. My doubts had begun

First of all, I made a simple self-introduction. In the self-introduction, I quickly took the opportunity to talk about the projects I had done, the technical points I used, and some interesting small demos, which were not shown in the interview

He listened carefully, and I forgot if he said anything. Same as the last interviewer. Maybe it’s because of the lack of interest in JQ’s projects.

Then back to the pen test, I said that should be wrong a lot, and a question I later thought of a better optimization plan.

1. I explained my plan

<! Var nodeI,m; Var data = [] // Data is a set of real data var HTML ="";
var con = document.getElementById("container");
for(var i = 0,m = data.length ; i<m ; i++){
    html += "<li>"+data[i]+"</li>"
}
con.innerHTML = html;
Copy the code
Question 1: Why is this better?

I said that adding content to the page only at the last step reduces the number of times the browser rearranges and redraws

He immediately asked 2: What is rearrangement redraw?

I just saw this concept two days ago and explained my own understanding. Reordering requires a reanalysis of the page element size; Redraw is a change in the style of an element

Q3: Under what circumstances can rearrangement and redrawing be caused?

When I say the page layout is modified or re-rendered.

Q4: Can you be more specific

I didn’t get the answer he was looking for, so I repeated it. What does a layout change mean

Standard answer:

  1. Add or remove visible DOM elements
  2. Element position change
  3. Element size change
  4. Element content changes (e.g., one text is replaced by another image of a different size)
  5. Page render initialization (unavoidable)
  6. Browser window size changed
Q5: Is the show and hide of v-show elements a rearrangement?

I said to calculate. I was probably right, but he probably expected me to say “adding or removing visible DOM elements is a rearrangement”. V-show is a CSS property that is rearranged

And then basically start writing through the questions and building on the original questions.

2. Asynchronous execution of setTimeout

The original is as follows

<! Var a = 2;setTimeout(function(){
   a--;
});
a++
console.log(a);
Copy the code

Again, it’s a little bit easier, and we’re going to get 3.

Here comes the pervert

Question 1: what if the outside a++ loops a million times, in what order?

A, again, setTimeout comes after

Q2: Why is this?

(Standard answer: Synchronization blocks the process.)

This is a little bit of a tangent, but I was influenced by a recent article that was talking about the difference between synchronous asynchrony and blocking non-blocking, asynchronous is done telling you, synchronous is waiting for you to finish; Blocking is when the browser keeps asking whether to complete. I don’t know what I’m talking about, and I don’t think he knows what I’m talking about –)

Question 3: Do you know promise? Write a Promise object, mix setTimeout method, ask to determine the order of output

I know a little bit. I have seen a similar topic, but I don’t remember it for a long time. I was right

Q4: Why is this?

I talked briefly about the event loop as I understood it

See these two articles for more information:

This time, thoroughly understand the JavaScript execution mechanism

The JavaScript event loop mechanism is simple

Q6: Let me give you a requirement to write about. There is a real-time search box, continuous input does not trigger real-time search, when the user stopped for more than 1s, the search results are displayed

The computer swings, let me knock.

Ten faces is what I mean

However, this requirement should not be impossible to write, as previous navigation optimizations used the same method, using clearTimeout to clear the timer without executing the event within the specified time. But I was so obsessed with the time stamp that I didn’t think about it.

Correct term

var time = null;
input.addEventListener("input",()=>{
    cleartimeout(time);
    time = setTimeout(()=>{ seach(); })})Copy the code

Senior said if this is just the beginning, if you can answer it can also ask the abstract, but I did not answer the first step

Tears ~ ~ ~ ~

3. What is this

The original problem is to make it easy to choose the correct method to call, and the correct option looks like this

var opt = {
    name:"Amy",
    say:function() {return this.name}
}
Copy the code

Extension began

Question 1: What is the meaning of this in the function

Refers to the object calling the function

Question 2: What about this of the arrow function

The forehead. If I don’t change this, I’m going to go wherever the outside of the function points to, okay

Question 3: What about the setTimeout function

Point to the global

Question 4: LET me add one to the topname2:this.nameOutput what?

undefined.. (Rather, the output varies depending on the execution environment. In this case, this refers to the global; window.name exists in the browser and is generally an empty string.

What if I change the say method to this
say:function() {setTimeout(function() {return this.name})
}
Copy the code
Q5: How about this instead
say:function() {setTimeout(()=>{return this.name})
}
Copy the code

Can only say must be confident, although for this is understood, but asked after I have no confidence, do not dare to say.

I can’t remember what I said in the last two questions. The correct answer is undefined because the function context is global when you say()

4. Cross domain

The original problem is to write some cross-domain solutions

I wrote cors, json, window name

Question 1: How is JSONP implemented

I said through the script tag

Q2: Why is this possible and how is the data returned?

I said script tags are cross-domain access to the CDN

JSONP consists of two parts: callback functions and data. The callback function is the function that should be called in the page when the response arrives. The name of the callback function is usually specified in the request. The data is the JSON data passed into the callback function.

Question 3: Limitations of window.name

Only in the same window, size 2m

Question 3: Do you know the difference between LocalStorge and SessionStorge

Local means the closed window will still exist, and the data will be kept forever, unless the browser cache is cleared, and the session closed window is cleared

Question 4: Is localStorge related to domain names? What about sessionStorge

Under the condition of the same browser, local can be shared under the same domain name and port, but different pages cannot share the session data (note: if the same source and belong to the IFrame of the same window, the session is also shared).

4. About the vue

I started by asking a few basic questions about VUE

Expand the start

Question 1: What do you think are the advantages of VUE over JQ

I talked about easier maintenance, and how the data renders the page in a way that separates logic from the page and makes it more efficient

He asked again, not seeming satisfied.

I said there are two biggest advantages, one is two-way binding and one is component. He nodded and continued:

Question 2: What is the principle of vUE’s bidirectional binding

When I say I’m changing the attributes of the input field, I’m actually calling the defineProperty get and set methods (more technically called wacher) to change the value of the bound element in the defineProperty method.

Question 3: Do you know anything about the virtual DOM

Know.. I don’t know much about

Question 4: Why does data not directly return object data when it is written instead of returning the result as a function?

Um… Don’t understand

Q 56789: Ah I already said I don’t understand so I don’t know what he is asking after the question…

But he started telling me how the DOM worked, and then he would ask me a few questions. How do you think he did it? How would you do that?

I was thrown a problem in the middle, where the virtual DOM detected that the code had run out and inserted it into the real DOM. Let me check. He went to the bathroom.

I didn’t find anything for a while, and then he came back and explained.

Vue has an asynchrony mechanism similar to setTimeout. After all synchronization processes have finished, the asynchrony operation will be executed as the end of the process.

Similar to a++ 10,000 times, setTimeout is still executed at the end.

Um… Unknown sleep and complete

6. About JS native

Question 1: How do I implement the find method to find elements?

Never seen this type of question, so I thought for a while, and then weak chicken said traversal ah…

Q2: He said that traversing a child node can only traverse one layer. What about the children of the child node?

Go on, recurse…

Question 3: What’s a more efficient alternative to traversal?

I don’t know.

And he kind of guided me through it, and he said there’s a method called querySelector, you know, I know, I’ve seen it but I haven’t looked at it.

He began to tell me that this efficiency is the highest, I asked why, he said because the bottom is not written in JS, I do not feel li, expressed surprise. However, silently teasing, you don’t want me to write a method! You can’t open a plug like that!

The performance of this method is still not as good as that of js native getElementById, but it is much faster than that of JQ

// Test code console.time('$(".item")');
for (var i = 0; i < 10000; i++) {
  $(".item");
}
console.timeEnd('$(".item")'); / / $(".item"Ms) : 56.569091796875 the console. Time ('querySelectorAll');
for (var i = 0; i < 10000; i++) {
  document.querySelectorAll(".item");
}
console.timeEnd('querySelectorAll');
//querySelectorAll: 1781ms

console.time('getElementsByClassName');
for (var i = 0; i < 10000; i++) {
  document.getElementsByClassName("item");
}
console.timeEnd('getElementsByClassName');
//getElementsByClassName: 54ms

Copy the code

7. About CSS:

1. How to set vertical center for inline elements and block level elements

I said four ways:

  1. Commonly used absolute positioning
  2. Flex layout, however, the flex layout property name is not remembered
  3. And display is set to table
  4. Use transform or margin to move back 50%

2. What are the methods to clear the float

Both -clear and Overflow: Hidden are discussed

3. The difference between NTH-of-child and NTH-of-type

Nth-of-child: indicates that the location is searched first. Nth-of-type: indicates that the element is searched first

4. How to realize that when there is space between two elements, move to another element and still let it display

I said it could be done with CSS3 animation.

He asked if there was another way

I did not answer, even his explanation can not make me understand, how to set the display attribute of another element after one element hover? Can it be implemented without JS?

5. How and why do triangles exist?

Set the width and height of the element to 0, then leave only one side of the border and the other three sides transparent. I drew a picture to show why.

6. How do I set a shadow on a triangle

I said drop shadow in filter, and he said why, what else can I do, and I thought about it a little bit and I said I could just put another triangle underneath, or I could just put a rectangle underneath and rotate it

About CSS I think the answer is ok, including the feedback is also said to be good at CSS. But it could also be that at the end of the day the interviewer is getting too tired to expand.

8. How do you study at ordinary times

I said watch a video, read a book

Q: What books

I said I had recently looked at DOM programming art and JS object-oriented

He immediately asked, What are the ways of inheritance

I talked about the two that I understood, the book that I read about a dozen ways of inheritance

Q: Do you know the class

I said I knew some

Q: Is it different from constructors

There is a difference, his attributes are not enumerable

This part should be not very good, I have not used, but I have briefly browsed the document before, I guess because I have been interviewed for a long time, so I did not expand more.

That’s the end of the interview.

conclusion

The above is the problem record, some problems are very simple, the length of the problem did not write out one by one; Some of the questions were so beyond comprehension that I didn’t even know what he was asking. I can only repeat his exact words in my short-term memory

The point of advanced front-end is, not only do you have to know how to use it, but you have to know why to use it.

Finally he asked if THERE was anything ELSE I wanted to ask him. I was stupid enough to ask how I was doing, and he said so-so, neither good nor bad

Actually, I would like to ask him how you study and what advice you have for my development.

At that time was asked some despair, just want to know if they have a play

Technical director

Since it was their closing time, the director asked two questions

1. Why is your company still using JQ (at present, I am the only one in the department who writes the front-end full-time, but there is no one to reconstruct the project!)
2. What do you think are your technical strengths

I can only try to express my learning ability, after all, the working time is not long, and the interview performance is not very good, and it does not match their technology stack.

However, 90 percent of the questions in the interview were my learning results outside of work. If I were confined to the business of the company, I would not be exposed to many new concepts.

In the end, it’s a waiting game. I can only say that this is a merit-based place, not depending on how many years you have worked, not depending on your personality, no one wants to know your potential, very realistic input-output ratio, just depends on whether you can create value for them now.

But it doesn’t matter, harvest a lot, continue to work hard hey ~