I will graduate this year, two-year master’s degree, this year’s internship. In the first half of my undergraduate study, I was lost in the basic theory learning and course assignments. I knew nothing about the front end in my freshman and sophomore years. I didn’t want to care too much and just wanted to guarantee my postgraduate study. In the summer vacation of my sophomore year, I participated in a school project. When I contacted the front end for the first time, I was at a loss. I found that software engineering still had a lot to explore. Big miho research situation, and to participate in a variety of games, grope for their own interests, finally in a series of games reap the benefits of the front, the original good page so popular (at that time is so shallow understanding), then decided to formally into the pit, at first, with the “front end can make pretty” funny so shallow knowledge, open a new world, enrich themselves step by step, Until this year spring recruitment just two and a half years. The battle line of spring recruitment is very long, which has lasted from the middle of February till now. The competition is only half way. Preliminary results have been achieved so far:

  1. Netease Leihuo third round technology +HR, got the offer.
  2. Bytedance education business three rounds of technology +HR, got the offer.
  3. Meituan two rounds of technology, the leader gave the pass, waiting for the offer.
  4. Alitao Department is currently finished in three sides, and has been fully trained by the big leader. Now, we are preparing to cross sides, and we will gain a lot regardless of success or failure. — Updated on April 8th. The cross section and HR section have been finished, the LETTER of intent has been received, and the corresponding section has been updated in the following.
  5. Tencent PCG to the fourth side, the battle line is very long, I do not know whether to pass. — Updated on April 8th, I did not continue to meet with Tencent, but rejected the offer from Tao department after I got it.

Here I share the interview with my own brief answers and reflections. For the basic problem, we can check the missing, suggested collection; For scenarios or high-level thinking questions, you can refer to these questions, which are customized by the interviewer based on his or her department or each person’s resume. The more rounds there are, the more problems tend to go to the top, which requires more summing up and thinking, finding balance, and even reproduction.

Netease Leihuo Third round technology +HR

One side

One side is generally the basis, on the basis of answering questions, it is best to take the initiative to spread breadth and depth, the interviewer will be very good impression.

  • Introduce yourself and talk about the project.

    • This varies from person to person. Be decent and tell the point. It focuses on what the project was, why it was done, what pain points were resolved, what work you were responsible for, what problems you encountered and solved, how you worked with different modules, and how much architecture you controlled. The last two points need to be thought about and accumulated, the previous clearly can satisfy some interviewers, but big factory interviewers will often want you to say some structure and overall understanding, is a plus.

  • How to write a sleep function with await and async?

function sleep(time){
    return new Promise(function(resolve,reject){    
        setTimeout((a)= >resolve('over'),time);
    });
}

async function run(time){
    let result = await sleep(time);
    console.log(result);
}

run(3000);Copy the code

  • Tell us the difference between an inline element and an inline-block element.
    • In terms of layout, no line breaks, and size, inline Settings are invalid for width and height, inline-block can be used to explain, and some CSS element systems are also spread out.
  • Are margins for inline elements useful?
    • “Inline” is a very awkward entry, which is usually neglected. Fortunately, I prefer to play around with CSS. In the default horizontal direction, the horizontal direction margin works, but the vertical direction does not.
  • Talk about how HTML adds event listeners, and what are the stages of event processing?
    • Add event monitoring is very simple, the document. Can directly to addEventListener, stage of events in chronological order a capture, target, bubbling three parts.
  • Name three HTML tags that you know are not commonly used.
    • Usually ask the usual ones, and the interviewer will do the opposite and admire them.

Second interview

Because I have a large React stack, I have a lot of problems in this area, so you can eat as needed.

  • React distinguishes function components from class components.
    • Since Act 16.9, hooks have been added, bringing many new changes to the component architecture. Function components also have lifecycle features. UseEffect hooks are simply encapsulation of several lifecycle customisations.
  • How does React wrap Redux onto components?
    • The React – Redux library wraps a layer around the root component and binds store to it. Components that need state management use the Connect wrapper to generate container components and map states and events to props. Redux actually has a lot of details and can be extended as the case may be.
  • React components can compare property changes in componentShouldUpdate to see if they should be rerender.
    • The function component gets an optimized component from the React16.6 wrapper function React.Memo ().
  • ES6 proxy.
    • Proxy, which intercepts various types of operations on objects such as get and set, is often used when talking about Vue3.0 in contrast to the Object. DefineProperty of Vue2.0.
  • Object. DefineProperty vs. Proxy: What are the pros and cons?
    • Proxy proxying the entire Object and returning the new Object is a good practice of the single responsibility principle, while Object.defineProperty has to repeatedly hijack each attribute of the Object and cannot hijack the array’s native methods such as push, POP, etc. It can only hack the prototype chain. Proxies, by contrast, are fully functional, require no extra work, and are cohesive.
  • How to implement text overflow display dot dot dot?

.container{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}Copy the code

  • Talk about the OAuth2.0 authentication process.
    • Because my project uses Google API, I was asked. Ruan Yifeng’s blog is very clear: Four ways of OAuth 2.0
  • Let’s talk about the authentication process after login.
    • With cookies and sessions, after a user logs in, the back-end session stores user information in the form of key-value pairs and sends the sessionId back to the browser. As long as the browser carries the sessionId in the cookie, the server can confirm the user information. Of course this process is not safe, and it would be a plus if some safety insights could be extended.

On three sides

  • Does the project require login authentication to access other sites such as Google Drive, or to log in once and log in again?
    • It was a third-party license, so it had to be recertified constantly. I had some interaction with the interviewer.
  • Is your project front – end separation? Describe the architecture.
    • No, the architecture question can be answered based on the real situation of the project. There is no need to avoid talking about the shortcomings of your own project. In fact, it is a good answer to point out the shortcomings and think about them.
  • React distinguishes function components from class components.
    • I was asked again. It may be that I am not solid in this respect, or it may just happen.
  • Have you used Hook before? What is its function?
    • Hooks in terms of code refactoring and performance optimization. Check out the official documentation.
  • Is Ref used? What is Ref used for?
    • React is data-driven, but more or less requires DOM manipulation. In this case, the ref instance can be used to obtain the actual DOM of the component. React Vue is no longer an MVVM.
  • How do I get a ref inside a child component from a parent component?
    • The refs can be forwarded by passing the callback function or the React.forwardRef API.
  • Do you have any good practices or insights about state management for components in React?
    • State promotion to the parent is easy for unified management, using Redux and so on.
  • How to solve cross-domain problems?
    • This online information is overwhelming. In addition to traditional JSONP, CORS and other answers, I also talked about the agent in my own project.
  • What does status code 200 stand for? 201?
    • 200 indicates that the user succeeded in creating or modifying data. 201 indicates that the user succeeded in creating or modifying data.
  • Ever used Webpack?
    • This is one of the few points I use all the time. I just mentioned tree-shaking principles, and the interviewer didn’t bother.
  • What kind of server did you use and what did you use it for?
    • College server, all kinds of cloud, have used, used to do their own projects, probably do what also mentioned a little.

HR side

There is no problem when you go to HR, don’t be iron, and “Tencent HR said that they don’t want to go to Shenzhen”, or talk about some negative news about the company, you really have no interest or is the cow force where all beg you when I did not say. In the HR meeting, just calm down and understand the company, share some personal hobbies, talk about life.

  • What are your front-end learning approaches?
  • Why the front end?
    • I wrote a separate joke about this question: The final HR question: Why the front end? Answer: mix mouth rice to eat. Pawn.
  • What is career planning?
  • What are your interests?

Bytedance three-round technology +HR

Byte attaches great importance to basic and coding ability, almost all questions hope you can write a few, usually need to pay attention to the training of basic ability.

One side

  • Tell me about yourself and your project.
  • What is the difference between TCP and UDP?
    • UDP does not have a connection, but TCP does. See this column for more details
  • TCP The process of establishing and disconnecting a connection.
    • Network basics, also a step to getting started with the Web, three handshakes and four waves of the hand are used to confirm the status of each other.
  • How do GET and POST requests differ?
    • The classic problem, in fact, is semantic difference, are essentially sending HTTP request packets.
  • A little bit about front-end caching.
    • The cache-control attribute of http1.1 is used in three progressive cases: no-store, no-cache, and max-age, and then used with eTAG to check whether the backend resource is updated. It’s also interesting to compare http1.0’s expires to cache-control.
  • What are the basic types of JS?
    • Plus Symbol, there are six.
  • Let’s talk about the box model.
    • I talked a lot about CSS layout standards, and finally the interviewer said he just wanted to hear about width and height, Content-box and border-box.
  • Write code, write a closure application.
    • You can do a lot of divergent thinking, and I wrote a very simple singleton function.

function getInstanceFactory(instance){
  return function getInstance(){
    returninstance; }}let getInstance = getInstanceFactory({a:1});
const instance = getInstance();
console.log(instance.a);Copy the code

  • Write code to determine whether a variable is a character substitution or an array.
    • Using instanceof, constructor, the Object. The prototype. ToString.
  • Write code that displays the chapter structure of a document tree, with section labels.
    • Deep traversal, at that time, there is still a little section label is not adjusted, the interview code is always difficult to go over ah.

Second interview

  • What channels do you usually learn the front end and why do you choose the front end?
  • Several visual code to write output code problems.
    • This problem is often not difficult at first glance, in fact, can be very around, usually nothing to play with native JS, otherwise easy to be around, such as this pointing to the scope of variables and so on.
  • Child element width unknown, how to accommodate the neutron element, write CSS.
    • The tansForm method is written directly on the panel
  • What are the cross-domain approaches?
    • I’m going to skip the repetitive questions.
  • How about the all and race methods of Promise?
    • All is resolve until all sub-promises are completed, reject immediately if a promise fails. Race is a parent promise that calls the parent promise binding handle with the child promise’s success return value or failure details as arguments as soon as a promise returns a result. There was even an attempt to write a native JS implementation of RACE, but the interviewer said no.
  • Write code, write an event listener registry.
    • In the gutter, I thought I had written it smoothly, but there were several problems with copy and paste as well as variable names. After a long time, I finally failed to adjust it well. After eating this lesson, I wrote code more carefully and followed the logic before submitting it. Behind just know the panel of the cattle guest network can be full screen, before has been reduced form, write up very easy to miss.
  • Tell me why you had a bug while writing code. What was the whole idea?
    • This is a bug along the previous question, it is an opportunity for the interviewer to give a good description of their thinking and psychology.

On three sides

  • Introduce the project. Keep asking questions, from technology usage to architecture.
    • At such times you must hold on, think calmly, and even if not speak out.
  • Which project have you gained the most from? Talk about harvest.
  • What problems did you encounter with the React project? How is it solved?
    • Refactoring after version update is mainly discussed.
  • What are the methods for HTTP requests?
    • GET, POST, HEAD, PUT, DELETE, CONNECT, OPTIONS, TRACE, PATCH. Name five at that time.
  • What ajax request libraries have you used?
    • I only talked about ANTD and Axios, and then I talked about some library encapsulation issues with the interviewer.
  • Write code, JS algorithm questions, teachers give children cookies, how many children can meet the maximum. When you’re done, ask why.

HR side

Little sister is very lively love laugh, but also understand technology, the whole light communication.

  • Describe the big front end.
    • Communicating with HR was unique and indescribable.
  • Do you think the front end is the interface?
  • Why the front end?
    • Find out that every company has to ask at least once, and the question that comes up most frequently is his.
  • How to learn the front end?

Meituan two round technology

One side

  • Introduce yourself and the project.
  • What are the ways to learn the front end?
  • Write code, write about the various inheritance methods in JS.
    • There are three main approaches: the extends of class in ES6; The prototype chain; Borrow other constructors through the call method;
  • Write the react lifecycle function.
    • 4 for mount, 5 for Update, 1 for umount, exception for didCatch.
  • Describe the React data flow transfer method.
    • One-way data flow, parent to child, data to view.
  • Describe the data flow for Redux.
    • A store is mounted on the outermost Provider and is passed from top to bottom in a waterfall flow. Each component that passes through can get data and add to it, but cannot modify it directly, only through Dispatch.
  • How will React setState be updated and rendered?
    • React updates have changed from synchronous to asynchronous. Compare the two versions and introduce a new data structure called Fiber.
  • Describe the MVC pattern.
    • Draw the data flow diagram between M,V and C.

2:

Originally, the second face is a cross face, but directly jumped to the main face.

  • Tell me about your project. Is also constantly being questioned.
  • How does Angularjs do front-end rendering?
    • Talk about two-way binding, dirty checking.
  • What are the main front-end framework mechanisms?
    • React renders and optimizes React rendering.
  • How to learn the front end?

Ali Tao department three round technology

One side (in advance)

  • Tell me about your project.
  • How does AngularJS differ from React and Vue? Description of development experience.
    • This pure look understanding and personal play, the interviewer probably looked at my resume carefully, three frames have been used so ask. There was a lot of talk about frameworks, so don’t memorize MVC or MVVM in this regard.
  • What problems did you encounter in the project and how did you solve them?
  • Have you used Node.js before? Tell me.
    • Not much is said about node’s event loop, and nextTick and setImmediate do the trick.
  • What channels are used for learning at ordinary times?

Second interview

Surprise interview, no appointment time, 11 o ‘clock call directly started. This unprepared situation must be calm, can first let the interviewer wait for a moment to prepare their own equipment, while adjusting the state.

  • What achievements and contributions have you made in the front end field in the past two years?
    • It’s a bold question, and it’s overwhelming to throw it at a surprise interview. I talked about my release project, lab project, community blog (I started to write CSDN blog at the beginning of learning front-end, and recently moved to Nuggets) sharing, FLUTTER and so on.
  • Why did the three frameworks come into being?
    • Very broad and very precise subjective questions, starting from the history of front-end technology, the foothold and development of major companies.
  • What are your thoughts on where front-end frameworks should go?
    • It’s very broad, starting with dynamics, compatibility, and I want to talk about JIT and AOT under new encodings sometime.
  • Have you ever done embedded development like IOT?
    • Raspberry pie, used to run car races at school.
  • What technical problem have you solved the most?
    • Technically, going from 0 to 1 is the easiest, such as completing Google OAuth2.0 authentication and tuning interfaces with a blank sheet of paper.
  • The person you admire or thank most about technology
    • People around you.
  • What do you think I know?
    • I asked a lot of questions about the current structure of Taobao, alibaba’s ecological construction of Flutter, BFF and Serverless, as well as the S1 accident on Taobao IOS that day. I learned a lot.

On three sides

The interviewer is the big leader of the front-end team of P9, who knows everything and is deeper than you. He can only keep calm and try his best.

  • Tell me about your most valuable project.
    • I told the project AngularJS+.Net Framework for my junior year internship.
  • I see you also use Flutter. Tell me how Flutter works.
    • There is a cross-end embedding layer at the bottom layer. The middle layer uses C++ to implement the self-drawing engine and encapsulates it into dart UI library. The upper layer uses dart to develop object components.
  • Does Flutter perform better than ReactNative?
    • The first screen performance of RN is relatively weak, and component redrawing costs a lot. JSBridge involves process switching, and this inherent cost leads to the weaker rendering performance of RN than Flutter, so RN has an architectural reconstruction plan and replaces JSBridge with JSI.
  • What is the structure and principle of micro channel small program?
    • Bad answer, applets are similar to RN’s faction, but I’m confused about the way the underlying UI is implemented.
  • Flutter cannot be directly used for large projects. What do you think is the bottleneck of Flutter?
    • Discuss the disadvantages of Flutter in state management, and mention the customization of Flutter by big factory.
  • What do you want to ask me?
    • The interviewer said that the top layer is the HTML, JS set of Web running in the browser kernel (V8, JSCore, etc.), and the bottom layer is the Use of WebView, plus some native code implementation of webView components supplement.
    • I also asked severless questions that I have been paying attention to. The interviewer is very wise and divides the teaching into two points:
      • In terms of infrastructure, cloud native support must achieve high enough stability to meet hard requirements such as capacity expansion and contraction before critical infrastructure links can be transformed into Severless. At present, there is still a gap, but some non-critical service links have been migrated.
      • On the human side, application engineers must have maintenance skills and problem solving skills in that area. There are a lot of details I don’t understand, but I still get a lot out of listening.

Four sides (cross face, nail)

  • What was your most rewarding project?
    • The internship project in foreign company in my junior year, full-stack development, enabled me to have a lot of experience and understanding of the project control and engineering practice of architecture, servitization and even agile development.
  • The project uses Websocket development, how to develop before docking with the back end?
    • This question was answered because the project was relatively small. After the front-end used the mock data, it directly connected with the back-end without the mock server, and the back-end directly checked the data pushed by the front-end, so it honestly communicated with the interviewer for a while.
  • About the website performance optimization problem, how to solve the problem that SPA is too large and the first screen time is too long?
    • I haven’t been memorizing performance optimizations since my projects are not at the front-end performance bottleneck. Talked about lazy loading and packaging strategies.
  • If your boss tells you that the first screen of your website is taking too long to load, but you don’t know why, how do you take steps to locate and fix the problem?
    • To locate the problem, open the console and look at timeline. If the stages take too long, a long waterfall graph will be displayed. What if timeline looks fine, the interviewer asks? I can only answer that there may be a page error, js file error did not perform some DOM operations correctly, resulting in the element does not display properly.
  • What if a JS file has to be loaded in the header and it manipulates a DOM element that’s only available in the body?
    • You can add an adapted JS file to the js file, manually append a DOM element that is available to the file, and then remove the adapted element after the page onload.

HR

  • What are the current offers and how do you want to choose?
  • What are your front-end goals?
  • How are your grades at school?
  • Are there any location requirements?
    • This can not head iron disorderly talk, want to secure the offer to answer hangzhou honestly.

Tencent PCG three round technology

One side

I went through almost all the front end questions, set a new interview time record, and recorded a few that I answered poorly or was impressed with.

  • What happens when you go from URL input to page presentation?
    • Classic questions, used for a comprehensive test of the network foundation of a front-end, and even can see whether there is a certain full stack capability, the standard answer can be directly 100 degrees, and then can combine some of their own projects.
  • How does the parent element and the child element have unknown width and height?
    • The problem has nothing to do with whether the parent element’s height is known or not, because the parent element in the document flow wraps the child element by default, and the height is supported by the child element.
  • Have you used Webpack? Talk about it.
  • How do I implement promises with ES5?
    • In various versions, the idea is that a chained call to then returns a promise and then pushes the specific callback into a queue for delayed execution, which is simulated by setTimeOut.
  • What are the ways of front-end performance optimization?
    • There is an article on the Nuggets: The 2018 Front-end Performance Optimization Checklist

Second interview

I almost didn’t ask questions about basic knowledge. I always tested my ability to solve problems. I asked a lot of questions about specific scenarios, which were also related to the content of the interviewer’s team.

  • How to learn the front end?
  • How to implement a rich text editor?
    • Set the contenteditable property for the tag, and then use the Document. execCommand command mode API supported by the browser
  • What are the attack risks for rich text editors? How to avoid it?
    • Is a disguised question about network security, XSS and CSRF specific to the scene to answer.
  • What if you want to edit offline without losing data?
    • The first answer is to use localStorage, after the answer is constantly asked, but also asked whether the object can be directly stored, the engine behind the problem.
  • How to implement an editable table that can be extended indefinitely?
    • Here’s the masochet, trying to explain your ideas, such as delayed loading, rolling throttling, etc., but still being asked until you run out of ideas.
  • CSS basics, do you know DEN?
    • CSS basics are ok, but DEN really don’t know…
  • Have you used Webpack? What is tree-shaking in it?
    • Tree-shaking is because of the ability to introduce imports statically, allowing shallow comparisons of file content and removing unused code.
  • How to measure the quality of a piece of software? How to ensure product quality?
    • Talked about some soft armor engineering ideas, and talked about some agile test-driven development, the knowledge of the class finally used a little here.
  • Have you written a test? Is there a tested framework?
    • Can a test written by a programmer be called a test (dog head)?
  • What do you think is your advantage over others?
    • This is a scary question, and I can only talk about my good points without being shy.

On three sides

  • Introduce your project.
  • How does your project implement back-end push?
    • The Websocket thing.
  • Is there any other way to implement backend push besides Websocket?
    • I can only answer polling.
  • Have you developed wechat applets? How do you feel about the relationship between applets and the traditional Web, Flutter and ReactNative?
    • A broad topic, starting with static HTML pages, front-end history and trends.
  • React vs. Vue
    • In principle, React is a self-implemented update system called setState, Vue is nextTick, and each property is hijacked (2.0) or proxy (3.0), which can be precisely positioned to trigger watcher.
  • You know, http2, tell me how it differs from HTTP1, what’s new.
    • Multiplexing, new binary encoding, header compression, server push, etc.
  • What other projects or open source contributions do you have?
    • I wrote about the Flutter project, blog, and new technologies and directions I’m focusing on. Such questions measure technical enthusiasm and activity.

The last

I hope I can summarize and improve myself. Also wish all the people who see this article can get help, harvest ideal offer.

Attached: my CSDN blog has shared technology from the pit to the present.