preface

Not long ago, a fan left a message to me backstage: why do many people prefer to enter a big company with a low salary when they take part in the college recruitment, instead of choosing a small company with a higher salary? After thinking about it, there are probably three reasons:

  • First, big factories have high salaries and good treatment.
  • Second, the working mode of big factory is more systematic, and there is a higher chance to meet excellent people in big factory.
  • Third, job-hopping will be relatively more competitive.

But whatever the reason, the end result is a big factory. However, many partners have experienced how difficult it is to interview in a big factory. Some people say that “the interview in a big factory is more important than project experience, so there is no need to brush the questions”. Is it really so? I asked an upperclassman who had successfully won the offer from Kuaishou, Miui and Meituan. In his opinion, it is very necessary to brush the exam if you want to enter a big factory. First of all, the most simple truth, others brush, you do not brush, in the invisible you will eat a loss; Secondly, when the interviewer asks you some questions, even though you know how to answer them, you still lose points if you are not clear. Finally, brush questions can help sort out the front-end core knowledge points, check the gaps and prevent the embarrassing situation of forgetting certain knowledge that may occur in the interview.

So, should be familiar with those knowledge points? What do big companies like to ask in front end interviews? And how?

Technical points not to be missed

JavaScript

  • Execution contexts, especially lexical scopes and closures;
  • Promotion, function and block scopes, and function expressions and declarations;
  • Bindings — specifically call, bind, apply, and this;
  • Object prototypes, constructors, and mixins;
  • Combinatorial and higher-order functions;
  • Event delegation and bubbling;
  • Use the typeof, instanceof and Object. The prototype. The toString to convert the type;
  • Handle asynchronous calls with callbacks, promises, await, and async;
  • When function declarations and expressions can be used.

DOM

Knowing how to traverse and manipulate the DOM is important, and candidates who rely heavily on jQuery or have developed a lot of React & Angular type applications may stumble on this issue. You probably don’t come into direct contact with DOM every day, because most of us use abstractions of various kinds. Without using third-party libraries, you need to know how to do the following:

  • Using document. QuerySelector choose or find nodes, use the document in older browsers. GetElementsByTagName;
  • Walk up and down — Node.parentNode, node. firstChild, Node.lastChild, and Node.childNodes;
  • Walk left and right — Node.previousSibling and Node.nextSibling;
  • Operations – Add, delete, copy, and create nodes in the DOM tree. You should know how to modify the text content of the node and how to switch, remove, or add CSS class names.
  • Performance – Modifying the DOM can be expensive when there are many nodes, and you should at least know how to use document fragments and node caches.

CSS

At a minimum, you should know how to lay out elements on the page, how to use child or direct descendant selectors to locate elements, and when to use classes and when to use ids.

  • Layout – arranging the location of elements adjacent to each other and how to arrange elements in two or three columns;
  • Responsive design – Changing the size of elements to match the browser width;
  • Adaptive design – changing the size of an element based on a specific breakpoint;
  • Specificity — how the specificity of selectors is calculated and how cascades affect attributes;
  • Appropriate namespace and class naming.

HTML

Know which HTML tags best represent the content you’re displaying and the associated attributes, and you should be manual.

  • Semantic markup;
  • Tag properties such as disabled, async, defer, and when to use data-*;
  • Know how to declare a DocType (most people don’t write new pages every day, so they might forget this) and which meta tags to use;
  • Accessibility issues, for example, ensuring that input checkboxes have a larger response area (using the label “for”). In addition, role= “button”, role= “presentation”, etc.

The system design

  • Rendering – Client rendering (CSR), server rendering (SSR), and global rendering;
  • Layout – If you are designing a system to be used by multiple development teams, consider componentization and whether you need the development team to use components by specifying tags;
  • State management, such as choosing between one-way data flow or two-way data binding. You should also consider whether your design has a passive or reactive programming model, and how components relate to each other, such as Foo->Bar or Foo->Bar;
  • Asynchronous – Your components may need to communicate with the server in real time. Consider using XHR or two-way calls at design time. If your interviewer asks you to support older browsers, you’ll need to choose between hiding iFrame, script tags, or XHR. If not, you can recommend using WebSocket, or using server to send events (SSE), which would be better;
  • Separation of concerns — Model-View-Controller (MVC), Model-View-ViewModel (MVVM), and Model-View-Presenter (MVP) patterns;
  • Multi-device support – Does your implementation support both Web, mobile Web, and hybrid applications, or does it provide a separate implementation for each scenario? If you’re building a site like Pinterest, you might consider using three columns on the Web but only one column on mobile, how would your design handle that;
  • Asset File delivery – In large applications, it is common for independent teams to have their own code base. These different code bases may depend on each other, and each code base usually has its own pipeline to publish code changes. Your design needs to consider how asset files are built (code split), tested (unit and integration testing), and deployed based on dependencies. You also need to consider how to deliver asset files via CDN or inline them to reduce network latency.

Web performance

In addition to general programming best practices, you should expect visitors to view your code or design and its performance impact. It used to be enough to put CSS at the top of the document and JS scripts at the bottom of the page, but the Web is moving fast and you should be familiar with the complexity of this area.

  • Key render path;
  • The Service Worker;
  • Image optimization;
  • Lazy loading and bundling;
  • HTTP/2 and server push in general;
  • When to prefetch and preload resources;
  • Reducing browser backflow and when to promote elements to the GPU;
  • The difference between browser layout, composition, and drawing.

Interview tips

JavaScript

  1. What are the JS primitive data types? What are the reference data types?
  2. Say the result of the following run and explain why.
  3. Is NULL an object? Why is that?
  4. Why can ‘1’.toString() be called?
  5. Why doesn’t 0.1+0.2 equal 0.3?
  6. What is a BigInt?
  7. Why BigInt?
  8. How to create and use BigInt?
  9. Does typeOF determine the type correctly?
  10. Can instanceof determine basic data types?
  11. Can you implement instanceof manually?
  12. Object. Is differs from ===?
  13. [] = =! [] What was the result? why

.

HTTP

  1. What is the structure of HTTP packets?
  2. What are HTTP request methods?
  3. How to understand URIs?
  4. How to understand HTTP status codes?
  5. What are the features of HTTP? What are the disadvantages of HTTP?
  6. What do you know about the Accept series fields?
  7. How does HTTP transfer data of fixed and variable length?
  8. How does HTTP handle transfer of large files?
  9. How is submission of form data handled in HTTP?
  10. How does HTTP1.1 address HTTP header blocking?
  11. What do you know about cookies?

.

TCP protocol

  1. Can you explain the difference between TCP and UDP?
  2. How about the TCP three-way handshake?
  3. Why three times instead of two or four?
  4. Can you carry data during a three-way handshake?
  5. What happens when you open it at the same time?
  6. Talk about how TCP waves four times
  7. Why four waves instead of three?
  8. What about simultaneous closures?
  9. This section describes the relationship between half-connection queues and SYN Flood attacks
  10. How do I cope with SYN Flood Attacks?
  11. This section describes the fields in the TCP header
  12. TCP fast Open (TFO)

.

The browser

  1. Can you say something about browser caching?
  2. Can you talk a little bit about browser local storage? What are the pros and cons?
  3. What happens from entering the URL to rendering the page? (network)
  4. What happens from entering the URL to rendering the page? (Analytic algorithm)
  5. What happens from entering the URL to rendering the page? (Rendering process)
  6. Talk about your understanding of redraw and reflux
  7. Can you talk about XSS attacks?
  8. Can you talk a little bit about CSRF attacks?
  9. Why does HTTPS make data transfer more secure?
  10. Can we achieve event stabilization and throttling?
  11. Can you achieve lazy loading pictures?

.

Vue

1. What is MVVM? 2. The difference between MVVM and MVC? What distinguishes it from other frameworks (jquery)? Which scenarios fit? 3. Value transfer between components? 5. Describe the process of Vue from initialization page — data modification — page UI refresh. 6. How do you understand Vue’s responsive system? 7. Virtual DOM implementation principle 8. 9. Vue lifecycle 10. What are the communication modes between Vue components? 11. How to reset data in Vue? 12. What is the use of the write name option in the component?

.

In order not to affect the reading experience of small partners, there is no list of all questions and answers, need to continue to see the questions and answers of small partners please click on this direct access to the front-end factory interview questions summary oh.

Prepare for an interview

Consider the old and learn the new

JavaScript performance linux

Project review

Know enough about your project, from technical architecture to source code, to at least avoid being asked questions during the interview. And to reflect your role in the work, reflect self-drive (large companies are very important self-drive) no project or want to learn the project, xiaobi share several project combat video: Project 1:0 basic play micro channel small program development combat production tutorial project 2: front-end project tutorial Vue+MintUI shopping cart combat project 3: Front end project tutorial of aircraft vs gears

Details of the optimization

Be logical: Be very logical, otherwise the interviewer won’t be satisfied even if you know the answer to this question. Be logical and the interviewer will give you points even if the answer isn’t.

Unique understanding: Interview questions are pretty much the same these days, so it’s important to show your strengths. Speak in terms of the business and your own knowledge.

Deep thinking: for each question must have deep thinking, otherwise it is difficult to enter a big company, depth to have a high in order to obtain good results in the interview.

Fluent expression: The interview is a process of expression, some questions in my heart know not to be able to, but also fluent expression, basically if the interviewer thinks you are fluent expression, when you talk about half will not let you continue, proof has passed.

The Last Soul Question

  • Is it your dream to enter a big factory? It’s a small price to pay, you know.
  • Are you a wonder in a million? If not, it’s normal to fail a few times. We’re all human. Maybe we just don’t match.

Note: the front-end factory interview summary PDF, learning materials and source codeJust click here to get it.