After spending several years as a nuggets player, he’s ready to export something of his own.

About me

First of all, I would like to introduce myself. I graduated from a 211 school in 2017, but because I spent four years in summoner Valley, I did not find a big factory job when I graduated, so I signed a contract with a start-up company and went there. Fortunately, this company is also very helpful, I have been here for three years, 996 as an “all work engineer”, from the front end to the server, from JavaScript to Java, these years have accumulated some experience, not to say proficient, is relatively familiar with.

This July, three years after graduation, it’s time to think about the next step in your career and start preparing for interviews.

The advice here is to consider each job carefully and not to change jobs too often. My reasons and suggestions will also be given at the end of the article.

After preparing for the interview for 2 months, I tried to send some resumes. Fortunately, all of them received interview invitations and some companies also got offers. Also tried to cast a few big factories, Ali, byte, kuaishou is still in the process.

I have also mentioned my resignation to TL. Recently, THERE are few things in work handover, so I will write an article to record my recent experience. First time to write an article in nuggets, hope it can be read.

Three years of work

In a flash, three years have passed, from the time of graduation to the front end of the hopeless to now in the company alone, is also a lot of growth. Well, I graduated three years and have four years of experience (manual dog head).

Let’s write down a running account. You can intuitively feel what I have done at each stage since my graduation three years ago:

  • Around January 2017. I finished my graduation project earlier and began to prepare for the job search earlier. As I graduated from the computer major, my first thought was to find a job related to programming, so I began to understand what front-end engineers and back-end engineers were doing. I found JD from several large factories and began to study it. After listening to my classmates, they said that there were more recruitment and interviews on Niuke, so I went to browse niuke. After seeing niuke, TM was devastated… This interview is really hard. It’s like an interview makes a rocket.
  • The Chinese New Year comes at the end of January 2017. During the Spring Festival back home classmates party, just have a friend is a computer major, suggested that I can learn about the front end, find a front-end development work. When I was a sophomore and a junior, I helped senior students to do projects and wrote some front-end codes. It was interesting to think about it
  • Around April 2017. I studied the front-end knowledge in a systematic way, but found something was wrong. I was too lacking in overall engineering experience as I had never practiced before, and I could not learn deeply just by writing Demo. However, due to the limited time, THERE were more contents to read, so I could only taste them
  • In May 2017. I sent several resumes, interviewed several companies, and offered some, but they were all small companies, yes, the kind of small companies with only about 20 people, and I still gave up
  • June 2017. I came to know a startup company on V2ex by chance. There were not many people, but the treatment was good, so I tried it. The interviewer is very Nice, chat pretty good, although I do not have internship experience it does not matter, he thinks this year’s foundation is good, learning ability is no problem (😁 I believe.
  • June 2017. Signed a tripartite, went on a graduation trip. The alacrity.
  • In July 2017. I graduated from school, joined this startup and started my front-end career
  • July to December 2017. Since the start-up company has a certain scale, there are three front-end companies besides me, so my work is relatively light after I just came here, mainly writing some background pages unrelated to experience and toC mobile page, and the main technology stack is Vue. After I came to the company, I began to learn Vue. After reading the documents, I started to do it directly. If I didn’t know anything, I would CV big method, and if I didn’t know anything, I would shamelessly consult the senior colleagues of the company
  • From January 2018 to June 2018. TL saw that I had gradually mastered the development of front-end technology stack, and began to arrange some challenging tasks for me, responsible for daily maintenance and iteration of some projects with high daily workload. In these six months, I spent more time on business, without much technical thinking. Of course, my hands are still very fast, 5 days of work page I can finish in 3 days, and basically zero bugs. Of course, the fast hand here is not fast keyboard, more is the understanding of the project and the separation of functional modules, as well as page components, module design, to ensure reuse. Here’s my advice: Take a business requirement, understand it before you code it. Understanding includes understanding the business and requirements, disassembling and analyzing the PRD sent by the product, dispatching priority and scheduling of each item, so that the overall project can be controlled
  • July to December 2018. The business has stabilized and the team has grown to about eight people, taking over some of the team’s infrastructure, such as the initial work on the unified scaffolding, unified UI component library, and unified technology stack
  • January to June 2019. Promoted the unification of React with TL as the front-end unified technology stack, just got a relatively important business, and deposited the project scaffolding (including background and mobile) and UI component library (customized and encapsulated based on ANTD) with this project. I also got a promotion in March (essentially a salary change). From July, ’18 to June,’ 19, I was really in pain and happy. Every day, I came off work at the end of the day. I had never been in touch with front-end engineering system before, so I studied day and night. And it’s a tough thing to push the stack together. You have to have enough reasons and evidence to convince the team, and you have to have enough technical support (scaffolding, component libraries, engineering capabilities, knowledge bodies), and luckily TL has been supportive of that. Finally, after one year of work, I successfully built the technical base of the current team (of course, it is still relatively low, and I have been iterating in the future
  • July to December 2019. Basically it’s scaffolding, component libraries, engineering perfection, and CI/CD stuff
  • From January 2020 to June 2020. The development mode of the team is basically formed, and only 2 people per day/week are needed. We also started to settle the team’s unified buried point and monitoring scheme, and built a unified front-end buried point management system, front-end buried point tools and front-end monitoring platform
  • July 2020. Although you may think that I have done a lot of things in the past three years, if you look into the details, many things are small and not systematic, and it may not be able to cover the large volume of business. So I decided to find my new position again and enter a big factory to systematically understand how big factories think and settle in the whole front-end r&d life cycle

Worked for three years, learned a lot. Many people may say: or because this startup is powerful and TL is relatively powerful, so I can stay for three years. Yes, that’s right, and I’m very grateful to TL and the company for giving me such a platform to grow.

However, I want to say that in addition to external objective factors, one’s own subjective factors are also very important. In the above personal experience, I probably wrote about the things that made you feel good, but I didn’t write about many things that made you feel bad.

  • Often up to midnight
  • I’ve been criticized by TL, and I’ve often doubted myself
  • Secretly said business side (this person is too XX, but also every day fishing), scolded the company (the company is too XX, sooner or later finished)
  • Countless times want to leave the experience, understand the people understand, at any time want to hit the computer to leave
  • .

There are so many that IF I had to write, I could write 100 “Why I have wanted to leave my job so many times”.

Life is so interesting, countless times want to leave the job did not go, this is really the initiative to change the environment, and need to give up something.

Review preparation

There are many articles about the interview on the Nuggets, which is also a current situation in the community, so I selected a few articles that I think are better and focused on them:

  • The mind map of this boss is very well organized, the whole review process is to follow the map, and there is no need to search for articles, quite convenient
  • How DID I become an interviewer in Ali: This article is mainly to know what the interview is like in Ali. What does the interviewer care about
  • Ali P6 Summary: Actual combat chapter, the real Ali boss interview experience
  • Bytedance Toutiao front face (4 rounds of technical + HR) : The real bytedance interview experience

The above articles personally feel enough, can take the time to chew down these knowledge, the general interview there is no problem.

Resume ready

Resumes are really important, and that’s how it feels when you’re in school, when you have internships and you don’t. Prepare your resume this time, too.

As for the resume, I think there are two things that interviewers and HR of big companies value most:

  • Project Experience: What did you do
  • Work Experience: Stability

I won’t go into it here, but there are a lot of good articles in the community. In this process, I mainly refer to the following articles, which are recommended:

  • The interviewer looked at the resume he wanted
  • What kind of resume is the interviewer looking for?
  • How to write a preliminary/Advanced front-end resume

Sorting out interview questions

Here sort out the interview questions I have met during the interview, according to the type of points, here only sorted out the questions I recorded, too late to write answers.

JavaScript

1. Talk about JavaScript data types

Let the interviewer warm up the interviewer with a simple question to find the feeling.

  • Basic data types: String, Boolean, Number, Symbol, NULL, undefined
  • Reference data types: Object, Object, Array, Date, RegExp, and Function if subdivided

2. What is the difference between a base data type and a reference data type?

When a basic data type is created, it is allocated a block of memory on the stack and its value is stored directly on the stack. When a reference data type is created, a reference is created on the stack, the contents of the object are stored in the heap, and the reference on the stack points to the address of the object in the heap.

3. What is the difference between copying a base data type and a reference data type?

Because the storage location is different, there are two situations when copying directly: copying the value and copying the reference, also known as deep and light copy.

For basic data types, there is no concept of shallow copy, just creating a new block of memory on the stack for new values. For reference data types, the difference is simply whether the values in the heap are shared or not. Specific did not say, the article is many, casually read two basic have no problem.

  • The ultimate quest for deep copy (90% of people don’t know)
  • Deep and shallow copy of JavaScript topics

Which of the current JavaScript apis are shallow copies and which are deep copies?

You can look at this article, although there are some small problems in the article, do not affect the overall reading

  • JavaScript basics – deep and shallow copy

4. How to implement a deep copy?

Json.stringify and recursion are two methods

5. What’s wrong with implementing deep copy via json.stringify?

If the value is undefined, function, etc., it will be lost during conversion, so be careful to use json.stringify for deep copy

6. What are the problems with implementing deep copy recursively?

Circular and repeated references

The data type and depth copy questions are pretty much covered here. Here’s a tip: If the interviewer asks you the first question, the interviewer should already have in mind that he or she is going to ask you a light copy of the question, and if you are familiar with it, try to take the initiative to introduce it to you.

7. What are the methods of array deduplication? (handwritten)

I wrote two: Set and Hash, and the interviewer didn’t ask any questions.

Hash:

function unique(arr = []) {
  if (arr.length === 0 || arr.length === 1) {
    return arr;
  }
  const newArray = [];
  const hash = {};
  for (let i = 0; i < arr.length; i++) {
    if(! hash[arr[i]]) { hash[arr[i]] =1; newArray.push(arr[i]); }}return newArray;
}
Copy the code

Set:

function unique(arr = []) {
  if (arr.length === 0 || arr.length === 1) {
    return arr;
  }
  return [...new Set(arr)];
}
Copy the code

8. Find the largest number in the array (handwritten)

I only wrote one

function getArrayMax(arr = []) {
  if(! arr.length)return;
  if (arr.length === 1) {
    return arr[0];
  }
  return Math.max(... arr); }Copy the code

9. Say something about the loop of events

Queues and schedules — Tasks, Microtasks, queues and schedules

10. How is fast sorting implemented? Talk about the idea and complexity

Get a feel for two images, and more animations can be found at visualgo.net/zh/sorting

11. How to implement an Observer Mode (handwritten)

12. How to implement a singleton pattern (handwritten)

13. How to parse a URL and get query and hash arguments (by hand)

14. What are the biggest differences between TypeScript and JavaScript

CSS

1. How does Flex implement 9 squares

Set width to flex-wrap

2. In addition to Flex, how else can you implement nine squares

Compare the old float, compare the new grid, and expand on the grid

3. Flex: 1

Flex: 1, flex: 1, flex: 1, flex: 1, flex: 1, flex: 1

4. How does mobile terminal adaptation work? What is the REM principle

Detail the classic REM and Rookie VW layouts on mobile

5. How to solve 1PX on mobile terminal

  • Mobile 1PX solution
  • How do Retina mobile devices achieve true 1px lines?

React/Vue

How do you React and Vue? How do you React and Vue?

Through my own understanding, I have introduced the directions of compilation, life cycle, data flow, core ideas and so on. This question still needs to be prepared carefully. I feel a little confused when I say it, so I will write an article to answer this question

2. For the technology selection of new projects, from what aspects will you consider Vue or React?

When I hear this question, I feel cautious, because I have faced many times of technology selection in a start-up company. From jQuery to Vue and React, we’ve also seen the upgrading of the technology stack. When we were considering the technology selection, we were not considering a new project, but a long-term technology selection for the next 2-3 years or more. We looked at the overall ecology and integrity of React and Vue, including the community activity. Because we don’t have a lot of people to do the underlying work of the framework and some ecological peripheral solutions, it’s more about taking existing solutions to solve our business problems.

When I answered this question, I mostly answered from the perspective of my own business, rather than the impact of the difference between React and Vue frameworks on technology selection.

3. Explain your understanding of the virtual DOM

The virtual DOM is essentially an abstract JavaScript object of the real DOM. I especially mentioned cross-platform. The virtual DOM introduced after Vue 2.x is also partly to solve the problem of cross-platform in the future. Later, it is also combined with WEEX.

4. Talk about the React lifecycle

This has nothing to say, according to their own understanding to say that several life cycles. I also talked about the life cycle that was going to be abandoned and why, and I passed.

5. React What is the difference between functional components and class components

6. What’s the difference between React diff and Vue

One way two way difference

7. What is the function of the key in the list

Give VirtualDOM diff use

8. What are the advantages of React Hooks

React Hooks

9. React Hooks cannot be used in conditional statements

You can ensure that the hooks are called in the same order each time a component is rendered

10. What are higher-order components?

  • High-level components (HOC) should be pure functions with no side effects and should not modify the original component

  • HOC doesn’t care what data you’re delivering (props), and the wrapped component doesn’t care where the data came from

  • The props received by the high-level component should be passed transparently to the wrapped component

11. Are React higher-order components the same type of thing as Vue mixins? Can Vue implement higher-order components like React

High-order components are essentially high-order functions. The React component is a pure function, so high-order functions are very simple for React.

Vue is more like a highly encapsulated function. At a higher level, Vue allows you to do things easily, but the opposite of a high level of encapsulation is the loss of flexibility. You need to follow certain rules to make the system work better.

12. How is the bidirectional binding of Vue implemented

Data hijacking and publishing subscriptions

13. How does Vue collect dependencies

14. What is the mounting sequence of the parent and child components of Vue

Created -> child created -> child mounted -> parent mounted

15. How are COMPUTED and Watch implemented in Vue

16. How is Vue template compiled

Vue-loader has a loader that then handles the template, which is essentially createElement

17. What is the difference between Vue 3.0 and 2.x

DefineProperty, Proxy, more open API, TS, etc…

18. What are the disadvantages of defineProperty? Why did WE use proxy after Vue 3.0

Array, object listening

19. I’m not the front end, how can you introduce me to Vue so I can learn as much about it as possible

engineering

1. Difference between Webpack and rollup

Webpack is good for large and complex front-end site builds, and rollup is good for packaging base libraries

Talk about webpack loader and Plugin

Loader parsing module, plugin extension function

3. Does ESbuild understand

The next generation of build tools, written in Go, will tend to use more non-javascript languages to write front-end tools, which have the advantage of being fast.

4. What is the difference between CommonJS and ESM

This will not expand to say, find two articles on JavaScript modules to look at OK

5. Do you know about Vite and Snowpack? What are the benefits of unbundle

Personal understanding will be a trend of future build tools, build speed/hot update speed is much faster than the current WebPack solution, greatly improving the efficiency of front-end development.

6. Briefly introduce the hot update principle of Webpack

After receiving the update message, the client will pull the latest code for update

7. What does vue-loader do

The webpack loader is used to process.vue files, parse the code, and process the template/style/script…

8. What is tree sharking

ESM, code volume optimization, CommonJS not supported

9. What are the optimizations of Webpack4 compared with previous ones

10. What optimizations did you make with Webpack in the project

  1. usehappypackAccelerate building
  2. throughanalyzePlugins analyze build product size and optimize volume
  3. chunk
  4. dll
  5. .

11. How to release an NPM package, how to release a beta package, and how to change an official package to a beta package

12. How is the version number of the NPM package regulated

See semver.org/lang/zh-CN/ for details on the impact of break change and non-standard NPM version numbers

13. What does DefinePlugin do

Defines global variables that can be used for code removal in different environments

14. How is your team’s project scaffolding implemented

Using the scaffolding developed by Yeoman, a brief introduction to Yeoman’s capabilities and why use it instead of just using off-the-shelf CRA and VuE-CLI

15. What does Babel work on

The compiler. Divided into three stages:

  • Parse: Syntax analysis

  • Transform: Converts the AST

  • Generate: Generates code

The back-end

1. What is the difference between Koa and Express

  • Asynchronous:callback 和 promise
  • Middleware: Linear model and Onion model

2. Talk about Koa’s middleware principles

3. What are the common Node apis

4. How is SSR implemented

5. Serverless

6. Talk about node execution (single thread)

7. Why is Node high-performance

8. Why does Node support high concurrency

  • Fast execution: Runs on the Chrome V8 engine
  • Asynchronous: Libuv event loop
  • Applicable to I/ O-intensive network application development: Solves the I/O performance bottleneck in network application development

9. Talk about the idea of MVC

The Model – view – controller

10. Talk about the advantages of ORM

Is essentially an abstraction of SQL statements, convenient (statement clear), security (a certain degree of anti-injection)

What is the difference between MySQL and MongoDB

Relational and non-relational databases

12. What is dependency injection

network

1. What happens from entering the URL to rendering the page

This is a really big question, and I can say a lot of things, because before I asked this question, the interviewer was talking about the Internet, so I answered this question about the Internet, and as for browser rendering, I just threw it over

2. What is the difference between HTTP and HTTPS

From a security point of view

3. Tell us about the HTTP status code

The interviewer is going to ask you what you mean by a few common status codes, so you should just say that you know a few. If you don’t know anything about them, don’t dig holes for yourself

4. What does the 304 status code mean

The cache

5. Do you know the three-level cache policy of the browser

  1. First look in memory, if there is load
  2. If it does not exist in memory, it looks for it in the hard disk and loads it if it does
  3. If not, make a network request
  4. The requested resource is cached to hard disk and memory

6. What is a strong cache

7. How does websocket set up links

8. How does HTTPS ensure network security

9. How does HTTP implement long connections

keep-alive

Algorithm (handwriting)

1. Loop print matrix

2. Find the largest string

3. The KTH largest element in the array

4. Implement a linked list with JavaScript

5. Print the binary tree from top to bottom

other

1. Tell me about a project that you found interesting

Said a 0-1 project, and in this project, I deposited a set of scaffolding tools and a library of UI components that are currently used in the company. Since it was a 0-1 project, I encountered some cooperation problems during the project cycle, and I also took the initiative to play the role of PM to promote the normal operation of the project, ensure the normal launch of the project, and win praise from the upstream and downstream teams of the business.

2. What is the life cycle of a front-end project at a startup

I have also seen the working process of some big factories on the Internet. Compared with the process of our company, we have all the big backbones, but the small parts are not standardized enough. For example, Code Review, release control, gray rollback capability, etc. At present, in our R&D life cycle, these capabilities are only in the “functional” stage, and we are also strengthening the construction of specifications.

3. In the team, how did you make coding specifications and push them to be implemented

According to the current industry common coding standards, formulate the coding standards, and a set of ESLint StyleLint/CommitLintd static checking tools, of course, Prettier, and then promote everyone to use, in the process of iteration the coding standards.

Do you have any questions you want to ask me

Don’t jump ship too often

At the beginning of the article, I mentioned “don’t change jobs too often”. Here is my personal opinion.

For both interviewers and HR, “frequent job hopping” means two things:

  1. You are not stable enough, so you have to bear the risk that you will run away after a period of time after you come to the company, so it will be a minus item
  2. You don’t have enough precipitation. It takes time for technology and business precipitation. Only with a deep understanding of business can you think about how to solve business problems through technical means

For individuals, “frequent job hopping” means:

  1. I have been preparing for the interview, brushing the questions, without a special period of study
  2. The technology stack is always changing, always adapting, and it’s impossible to understand more deeply
  3. Do not understand the business, not familiar with the team, vicious circle, and want to change jobs

conclusion

This article is mainly to record their own this period of time since some of the experience, I hope to help you. After the output of some “all dry engineer” technical articles here, interested friends can pay attention to first.

Of course, if I have time, I will also compile my answers to the above interview questions and post them on the community.

Recently, I saw that everyone is popular in the public account, I also set up a: full_stack_interview, interested friends can pay attention to, after the article will be first published on the official account, strive to make a high-quality official account.

You can also add me to wechat: Xiaolu950621.