Job-hopping reason

The former employer department is doing tourism, under the impact of the epidemic, basically finished.

So I took a three-month sabbatical and got a redundancy package at the end of April. So far, I have been looking for a job for almost two months.

This is not the standard face classics, want to get from the big factory job-hopping experience can rest.

More is to talk about the vast majority of you like me, education slag technology is poor, no big factory experience of the front end how to go.

1. Offersituation

I am lazy, so I may meet 2 or 3 people a week, only in the afternoon. Some weeks there were no interviews.

Limited by the degree + company, I used the two recruitment software as “Boss direct rejection” and “hook hanging”.

After rough calculation, we have met about 12 large, medium and small companies, and only 4 offers are offered, respectively:

  • A game company
  • A small company
  • The wind changed programming
  • Jinshan department some division

As a social orphan, I also found many problems in this job-hopping process, and listen to me slowly.

This post is a bit depressing, but you can find the answers (I made almost every stupid interview mistake)

Part of the company has: 360 strange dance company, a listed game company, wind change programming, Jinshan department some department, Ali.

2. Summary of frequent interview questions

I’ve met a lot of companies, just for the record.

1. The whole process from “Enter the domain name in the browser” to “page static resources are fully loaded”

See: a game company, Gosling, Ali Side, three other small companies

To answer this question, I combine yCK’s Tips for Front-end Interviewing with the browser principles column:

The process can be broken down into several steps:

  1. User input

    When the user enters the keyword and enters Enter, it means that the current page is about to be replaced with a new page, but before the process continues, the browser also gives the current page the opportunity to perform a beforeUnload event, which allows the page to perform some data cleaning before exiting. You can also ask the user if they want to leave the current page.

  2. URL Request process

    First, the network process looks up whether the local cache has cached the resource.

    If there is a cached resource, it is returned directly to the browser process. If the resource is not found in the cache, the network request flows directly. The first step before the request is to perform a DNS resolution to get the server IP address for the requested domain name. If the request protocol is HTTPS, you also need to establish a TLS connection.

    • Among them,DNSThere are also several steps of caching: browser caching,hostsFile,
    • If the local DNS server does not record the domain name, the system starts recursive and iterative resolution
    • TCPThree handshakes,HTTP.TLSShaking hands,HTTPS.

    The next step is to establish a TCP connection with the server using the IP address. After the connection is established, the browser side will construct the request line, request information, etc., and attach the data related to the domain name, such as cookies, to the request header, and then send the constructed request information to the server.

    Before the data goes to the server, it may also pass through the load-balancing server, which distributes the request reasonably across multiple servers, assuming that the server responds with an HTML file.

    So the first thing the browser will do is figure out what the status code is, if it’s 200 it’ll keep parsing it, if it’s 400 or 500 it’ll get an error, if it’s 300 it’ll redirect it, and there’s a redirect counter in there, so if it redirects too many times, it’ll get an error if it redirects too many times.

    The browser starts parsing the file, unzipping it if it’s in Gzip format, and knowing how to decode the file based on its encoding format.

  3. Prepare the render process

    By default, Chrome assigns a render process to each page, meaning that a new render process is created for each new page opened.

  4. Rendering phase

    After decoding the file successfully, the rendering process will officially start. DOM tree will be built according to HTML first, and CSSOM tree will be built if CSS is available. If a script tag is encountered, it will determine whether async or defer, the former will download and execute JS in parallel, and the latter will download the file first and wait for HTML parsing to complete and then execute sequentially.

    If none of the above is present, the rendering process will be blocked until JS execution is complete.

After the CSSOM and DOM trees are built, the Render tree is generated, which determines the layout, style, and many other aspects of the page elements

During the Render tree generation, the browser starts to invoke GPU rendering, compose layers, and display the content on the screen.

2. eventloopMechanism,promiseImplementation and static methods,asyncThe implementation.

It’s a big topic to talk about, processes, threads, coroutines. Some will be accompanied by the most classic disheventloopThe title.

See: Ali side, gosling, Toutiao side, 360 side, wind change programming, and four other companies, must test.

Event LoopWhat is?

There are two types of JavaScript events, macro-tasks and micro-tasks.

  • Macro task: includes the overall codeScript, setTimeout, setInterval
  • Micro tasks:Promise. Then (the new Promise).In the process. NextTick (node)
  • The order of execution of events is macro task first, then micro task, this is the basis, tasks can be synchronous task and asynchronous task, synchronous task into the main thread, asynchronous task intoEvent TableAfter the asynchronous event completes, the callback function will be put inEvent QueueMedium (macro and micro tasks are differentEvent Queue). After the synchronization task is complete, theEvent QueueThe callback function may also contain different tasks, so the above operations are executed in a loop.

PromiseThe meaning of

Promise is an asynchronous programming solution. In simple terms, promises are like a box that holds events that will end at some point in the future.

Three states:

  • pendingIn:
  • fulfilled: Have succeeded
  • rejected: Failed state change, can only frompendingbecomefulfilledorrejectedThe state is irreversible.

Async implementation and common methods

asyncAnd the way that functions are implemented is that theGeneratorFunction and autoexecutor, wrapped in one function.

Generator functions are an ES6 implementation of coroutines with the best feature of surrendering execution of the function (i.e., suspending execution).

Coroutines are lightweight threads in user mode, and the scheduling of coroutines is completely controlled by users. Coroutines have their own register context and stack. When the coroutine schedules the switch, the register context and stack are saved in other places, and when the switch is cut back, the previously saved register context and stack are restored. The direct operation of the stack basically has no kernel switching overhead, and you can access global variables without locking, so the context switch is very fast.

3. Vue 和 ReactThe difference between

From YCK, The Way of The Front-end Interview

  1. Vue forms can use v-Model to support two-way binding, which is much easier to develop than React. Of course, V-Model is a syntax candy, essentially the same way React forms are written.

  2. React requires the use of setState to change the state, and there are some pitfalls to using this API. In addition, the bottom layer of Vue uses dependency tracking, so page update rendering is already optimal, but React still requires users to manually optimize this aspect.

  3. After React 16, some hook functions will be executed multiple times due to the introduction of Fiber, which will be covered in a later section.

  4. React requires the use of JSX, which has an initial cost and requires a complete toolchain support. However, you can use JAVASCRIPT to control pages, which is much more flexible. Vue uses template syntax, which is less flexible than JSX, but it can be run in a browser by writing the Render function directly out of the toolchain.

  5. In terms of ecology, there is not much difference between React and Vue. Of course, React has far more users than Vue.

  6. In terms of start-up cost, Vue’s initial positioning was to reduce the threshold of front-end development as much as possible. However, React was more about changing users to accept its concepts and ideas, and the start-up cost was slightly higher than Vue.

4. Vue 3.0The interview questions

See: 360 side, wind change programming, is expected to test in the second half of the year.

  1. Vue3.0What are the important new features?
  • It is recommended to look at Composition apis and tree-shakingReact Hooksandwebpack 的Tree-shaking
  1. Vue3.0contrastVue2.0What are the advantages of?
  1. Vue3.0andReact 16.XWhat are the differences and similarities?
  • It’s time to update your answers and highlight that the two are starting to learn from each other. Remember to admireVue3.0Copy it and do it better.
  1. Vue3.0How to reuse code logic?
  • You can compareComposition APIandmixinThe differences are highlightedVue2.0The downside of that code bouncing up and down.

Most of the answers can be found in the following two blogs:

Copy notes: Yuxi talked about this in Vue3.0 Beta live…

What’s so good about Vue3? (Detailed comparison with React Hook)

5. ReactFrequent Interview questions

  1. React 16.X 的FiberThe principle of
  1. setStatePrinciple, when is it synchronized?
  1. React HooksRelative higher order components andClassWhat are the advantages/disadvantages of components?
  1. React 16.XLife cycle, and why replace the previous one?
  1. ReactCross-platform implementation principles.
  1. sayreduxAnd thanfluxAdvanced reasons.

To be fair, if the technical stack is not requested before the interview, it is recommended to cite the Vue direction. React interview questions to one or two difficulty….

6. HTTPFrequent Interview questions

See: Alibaba, Toutiao, 360, FVC, and four others.

  1. Talk about strong caching and protocol caching, okay?
  1. HTTP / 2.0What are the features? How does head compression work?
  1. TCPThree handshakes and four waves? For its meaning of existence.
  1. Status code.302.304.301.401.403The difference between?
  1. Status code.204and304What are the roles of the two?
  1. HTTPandHTTPSHandshake differences?
  1. CSRFCross-site request forgery andXSSWhat is a cross-site scripting attack?
  1. How do you solve cross-domain? How many are there?
  1. nginxUnderstand? What do you do with it?
  1. The 【The if-modified-since last-modifiedWhy should there be [ETag, If - None - Match】

I have summarized a xmind map, welcome to my public account.

7. JS/CSSHigh frequency basic problem

See: Alibaba, Toutiao, Wind programming, and many other companies, very high frequency.

  1. Elastic boxflex: 0 1 autoWhat does it mean?
  1. The arrow function worksnewInstantiate? Have a chatthisIs pointing to the problem.
  1. Talk about prototype chains.
  1. The difference between heap and stack in garbage collection.
  1. 0.1 + 0.2 != 0.3The principle behind it?
  1. TypeScriptThe used? Talk to you aboutTypeScriptUnderstand?
  1. Image lazy loading principle.
  1. The call, the applyandbindMethod usage and differences
  1. WebpackPrinciples, and common plug-ins

8. Project and optimization related

  1. Difficulties encountered in the project and solutions.
  1. How did you do itWebPerformance optimized? How to handle the first screen rendering?

This is a big question, and I have a short version of the answer, which comes from the browser Principles and Practices column:

It mainly revolves around two phases: loading phase and interaction phase

Loading stage:

  1. Reduce the number and size of key resources (WebpackUnpacking/closing, lazy loading, etc.)
  2. Reduce critical resourcesRTTThe time (GzipCompression, edge nodesCDN)

Interaction phase:

  1. JSCode should not occupy the main thread for too long, scripts that are not related to the first screen plus delay processing (aysnc/defer) attributes, andDOMIrrelevant toWeb Worker.
  2. CSSBind with a pair of selectors (as far as possibleClassorId), otherwise it will traverse multiple times.
  3. If there is animation in the first rendering, addwill-changeProperty, the browser opens up a new layer of processing (triggering the composition mechanism)
  4. Avoid forcible layout synchronization and layout jitter.
  5. Lazy loading of images (four ways)
  1. Is there a plan for reporting buried data?
  1. Front-end architecture thinking, how do you measure the department’s technology stack?
  1. Thinking about front-end refactoring, how to weigh old projects between new business urgency and refactoring technical debt?

9. Full link as wellDevOpscognitive

Since my second company department is DevOps platform, some interview questions have nothing to do with the front end.

  1. Have you done any unit tests? How did you do it?
  1. dockerPreparation process?
  1. DevOpsKey platform function points?
  1. Automated testing,CI/CDWhat are the key cores of?
  1. How to guaranteeDevOpsTo promote?
  1. How to optimize the interface?MockPlatform building scheme?

3. How you feel about the interview

This year, it was so, so hard. @Muyiyang this paragraph is quite right:

First of all, the environment, feel very bad, for a second line of Internet recruitment few companies, layoffs, internal adjustment, lock HC is really a lot of, so we must not resign naked when changing jobs, the risk is too big.

This year’s interview is a little different from previous years. I pay more attention to the key and difficult points and highlights of the project, my contribution to the team, my awareness of being the Owner of the project, and more investigation on my programming ability.

Simply put, education is the first competitiveness, you rely on APP to send resume almost no feedback, the most reliable push.

Secondly, if you only have junior college, ability is not high irreplaceable (or big man is willing to do trust endorsement), do not recommend in this year frequently cast big factory (waste precious opportunity), I have experienced a variety of resume and HR face hanging, part of the reason:

  1. Frequent job-hopping (THREE in four years, two of which were disbanded/closed)
  2. Too much blogging, not enough focus, not enough English.
  3. No highlights in past projects.

To be fair, past job changes haven’t gone so well, but this year I really hit the ceiling:

  1. Big companies don’t apply for resumes.
  2. Small companies can’t afford it.

Fully appreciate a sentence:

You’ll spend the rest of your life paying for not working hard in high school.

4. Interview skills

Strictly speaking, this is not enough interview skills, but there are some good things I didn’t do well. I suggest you take a look:

1. Pay someone to wrap your resume

If you don’t have a degree and a resume, your resume sucks.

Trust me, you’ll get a lot more feedback if you pay a couple of dozen bucks to have your resume revised by a big shot.

2. Excellent self-introduction template

Hello, interviewer!

  1. My name is ***, very happy to apply for ** position today, I have *** work experience, work content includes **, *** ** and so on, have participated in *** projects/work, complete ** achievements, these experiences exercise my *** ability. In addition to daily business development, I am also engaged in ***…..

  2. Before the interview, I learned that our company is mainly engaged in consumer products

Product, belongs to the industry ranking the best enterprises, I am very optimistic about this industry, but also want to develop in this line for a long time! This position requires ** *** ability and experience, which is a good match with my work experience, I believe I can be competent for this position, thank you!

3. Prepare drafts of project questions in advance

About a month after the interview, I found that I was always on the second/third side, so I began to examine my own questions:

  1. I was too hasty in answering the difficulties and solutions of the project. I only described what I did, but did not reflect the progress that the plan brought to the project.
  2. Lack of breakpoints, nonstop talking, lack of command of sentences.

To tell the truth, it is quite difficult to tell, especially I have no big project experience, I have been doing middle and background system for the first three years, I can only start from some details, the following is my draft (although it is very bad), for your reference. :

Vue background fine particle permission control and anti-multi-person operation:

  1. Simple permissions are typically defined by roles, but developers/operations want to create their own members, requirement 1

  2. I gave them a module for permission management, but because DevOps has too many functional modules to remember, developers/operations want to intuitively modify permissions, requirement 2.

  3. With this pain point in mind, I designed an “authorization mode”, with high permissions and switching capabilities.

    After switching, all buttons in the module will first block the left click, and block the default right click, with a custom attribute. And the Authorization/freeze menu. Authorization function, directly have selected members of the tree control popover.

    After use upload member array + custom properties. The custom property object is returned the next time you visit the background to determine the new permissions.

    After the permissions issue was resolved, developers/operations found that a deployment/release click module had many simultaneous operations. Will conflict. 4.

  4. In the multi-person frequent trigger module, joined the WebSocket management, to achieve similar online document display function, display the current operator, and set shielding (simultaneous operation will show the name, and locked).

    • Simple version: after the current button is clicked, the background will set a time threshold, during which other people will pop up to remind the current operation.

    • Complex version: Multi-party WebSocket maintains a value.

Scenario: DevOps platform

5. People who run against themselves

Wrote an annual review last year:

My name is “xiao Vain”, 16 years of geographic information system professional college graduate, self-study front. I have three and a half years of experience. I have worked for several small and medium companies, made Python crawlers, and worked in o&M development department. The first two years of work, are struggling for a living, do code farmers only because of their own no specialty, see this line of high wages, crowded in. — “The Road to Self-elimination of front-end Waste”

Y1s1, I have a bad base. It took 1 year to understand the layout, 2 years to understand function return, and 3 years to understand React.

Since entering this line, although there are bole all the way, but in front of the field is still in the majority alone.

But thanks to this line, let me know that “outside the well, the world is big”. The more excellent people you know, the more you want to work hard and improve.

So I have been busy reading some good books/columns:

  1. How networks are Connected. Difficult. Suggested notes.
  2. “DevOpsField Notes, fun, but with some foundation.
  3. The perspectiveHTTPAgreement, not bad, worth two brush.
  4. The illustratedGoogle V8“, relative to the first “browser principle”, water a lot, part of the value of two brush.
  5. “NginxCore knowledge 100 lectures, is currently reading.

How can I improve my technical competitiveness (or income)?

  1. Write a tech blog. “In a way, my blog is my best study note and personal card. A tech blog is one of the best ways to get to know a developer in the IT industry, especially if you don’t have a decent degree or a stellar career track record. The past should not be remonstrated, but the future can be pursued.” — @Xingzhou in Langli “The tech blog Thing”
  2. Based on the front end, scan the whole link. This year I thought was weakDevOps“Helped me figure out quite a few 2/3 technical aspects.
  3. To the right, this is the biggest (and most unattainable) source of income growth. I once saw a friend who made a leap from 9K in 17 to 50K + now. Don’t say, I really sour…

Along the way, my ability, education and background are inferior to others, and I have been lazy and confused, but I have been racing with myself, AND I refuse to give up:

Although when you left school

All the people thought you would never amount to anything

And you didn’t blame yourself for it

.

We all had a truckload of problems around us at the time

Do not know the meaning of success is to surpass themselves

We are all in a race against ourselves

Work hard for a better future

Strive for a meaningful victory

Work hard for a better tomorrow

There is no end ahead

We never stop

❤️ Read three things

If you find this article inspiring, I’d like to invite you to do me three small favors:

  1. Like, so that more people can see this content (collection does not like, is a rogue -_-)
  2. Pay attention to “front-end persuaders” and share original knowledge from time to time.
  3. Look at other articles as well

Personal wechat: HUAB119 (if you can’t add luob119, or leave a message on the official account, I will add you)

You can also get all the posts from my GitHub blog:

Front-end persuasion guide: github.com/roger-hiro/… Let’s play. ~