preface

Not long ago, a fan left me a message in the background: why many people would rather enter a large factory with a low salary than choose a small company with a higher salary when they attend the school recruitment? I think about it for three reasons:

  • First, Dachang has high salaries and good treatment.
  • Second, Dachang’s work style is more systematic, so there is a higher chance of meeting excellent people in Dachang.
  • Third, job-hopping will be more competitive.

But whatever the reason, the end result is to enter Dachang. However, many people have a deep understanding of how difficult the interview is in Dachang. Some people say that “the interview in Dachang is more important than the project experience, so there is no need to brush the questions”. Is that true? I asked the senior who had successfully won the offer of Kuaishou, millet and Meituan. In his opinion, it is very necessary to brush the questions if you want to enter Dachang. First of all, the most simple truth, others brush, you do not brush, in the invisible you eat the loss; Second, when the interviewer asks some questions, even though you know how to answer them, you will still lose points if you don’t express them clearly. Finally, brushing questions can help sort out the core knowledge points in front, check the gaps and prevent the embarrassing situation of forgetting certain knowledge in the interview.

So, to be familiar with those knowledge points? What do those big companies like to ask in the interview? And how do you make it?

Must not miss the technical points

JavaScript

  • Execution context, especially lexical scopes and closures;
  • Promotions, function and block scopes, and function expressions and declarations;
  • Bindings — especially 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 using callbacks, Promise, await, and async;
  • When to use function declarations and expressions.

DOM

Knowing how to traverse and manipulate the DOM is very important, and candidates who rely heavily on jQuery or who have developed a lot of React & Angular type applications may stumble at this point. You probably won’t touch DOM directly every day, because most of us work with abstractions. 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;
  • Loop up and down — Node.parentNode, Node.firstChild, Node.lastChild, and Node.childNodes;
  • Left and right traversal — Node.previousSibling and Node.nextSibling;
  • Actions – Add, delete, copy, and create nodes in the DOM tree. You should know how to change the text content of a node and toggle, delete, 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 caching.

CSS

At the very least, you should know how to lay out elements on the page, how to use child or descendant selectors to locate elements, and when to use classes and when to use IDs.

  • Layout — the placement of elements that are adjacent to each other, and how to arrange elements into two or three columns;
  • Responsive design – changing the size of an element based on the browser width
  • Adaptive design — changing the size of an element based on a specific breakpoint;
  • Specificity – how to calculate the specificity of selectors, and how cascading affects properties;
  • Appropriate namespace and class naming.

HTML

Knowing which HTML tags best represent the content you are displaying and the associated attributes should be manual knowledge.

  • 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 what metatags you can use;
  • Accessibility issues, for example, ensuring that the input check box has a larger response area (using the label “for”). There are also roles = “button”, roles = “presentation”, and so on.

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 the development team needs to specify tags to use components;
  • State management, such as making a choice between one-way data flow or two-way data binding. You should also consider whether your design is a passive or reactive programming model, and how the components relate to each other, such as foo-> Bar or foo-> Bar;
  • Asynchronous – Your component may need to communicate with the server in real time. Consider using XHR or bidirectional invocation at design time. If your interviewer asks you to support older browsers, you’ll have to choose between hiding iFrame, script tags, or XHR. If not, you can suggest using a websocket, or using a server to send events (SSE), which is better;
  • Separation of concerns — Model-View-Controller (MVC), Model-ViewModel (MVVM) and Model-View-Presenter (MVP) patterns;
  • Multi-device support – Does your implementation support Web, mobile Web, and hybrid applications at the same time, or does it provide a separate implementation for each scenario? If you’re building a site like Pinterest and you might want to consider using three columns on the Web but only one column on mobile devices, how your design will handle this;
  • Asset file delivery – In large applications, it is not uncommon for individual teams to have their own codebase. These different codebases may depend on each other, and each codebase usually has its own pipeline for publishing code changes. Your design needs to consider how asset files are built (code split), tested (unit and integration tests), and deployed based on dependencies. You also need to consider how to deliver asset files over a CDN or inline them to reduce network latency.

Web performance

In addition to general programming best practices, you should expect visitors to see 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 complexities of this area.

  • Key render path;
  • The Service Worker;
  • Image optimization;
  • Lazy loading and bundling unbundling;
  • General meaning of HTTP/2 and server push;
  • When to prefetch and preload resources;
  • Reduce browser backflow and when to promote elements to the GPU;
  • Differences between browser layout, composition, and rendering.

High frequency interview knowledge points

JavaScript

  1. What are the JS primitive data types? What are the reference data types?
  2. State the results of the following operation 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 do I create and use Bigint?
  9. Can typeof be correctly judged?
  10. Can instanceof determine basic data types?
  11. Could you implement the instanceof function manually?
  12. Object.is and === =?
  13. [] = =! [] What is the result? why

.

HTTP

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

.

TCP protocol

  1. Can you tell me the difference between TCP and UDP?
  2. What about the process of TCP three handshakes?
  3. Why three times instead of two, four times?
  4. Can data be carried in the process of three handshakes?
  5. What if I open them both?
  6. Talk about TCP’s four waves
  7. Why four waves instead of three?
  8. What happens when they both close?
  9. Talk about the relationship between the semi-connection queue and the SYN FLOOD attack
  10. How to deal with SYN Flood attack?
  11. Introduces the fields in the TCP header
  12. About the principle of TCP fast open (TFO)

.

The browser

  1. Can you say something about browser caching?
  2. Can you say something about the browser’s local storage? What are the pros and cons?
  3. Tell me what happens from the input URL to the rendering of the page? (network)
  4. Tell me what happens from the input URL to the rendering of the page? (Analytical algorithm)
  5. Tell me what happens from the input URL to the rendering of the page? (Rendering process)
  6. Talk about your understanding of redraw and reflux
  7. Can you say something about the XSS attack?
  8. Can you say something about the CSRF attack?
  9. Why HTTPS makes data transfer more secure?
  10. Is it possible to achieve event buffeting and throttling?
  11. Can realize lazy picture loading?

.

Vue

1. What is MVVM?

  1. The difference between MVVM and MVC? How does it differ from other frameworks (jQuery)? Which scenarios are appropriate?
  2. Passing values between components?
  3. VUE two-way binding principle
  4. How does Vue refresh the UI of the page from the initialization page, to the modification of the data?
  5. How do you understand Vue’s responsive system?
  6. Virtual DOM implementation principle
  7. What is the key value in VUE?
  8. Vue lifecycle
  9. What are the ways in which Vue components communicate with each other?
  10. How to reset data in VUE?
  11. What is the use of writing the name option in a component?

.

In order not to affect your reading experience, all the questions and answers are not listed. If you need to continue to read the questions and answers, please
Click this direct access to front-end Dachang interview question summary Oh.

Preparation before the interview

Review the past and know the new

JavaScript



performance



linux

Project review

Know everything about your project, from the technical architecture to the source code, and at least don’t get asked about it during the interview. And to reflect your role in the work, reflect from the drive (large companies are very important since the drive) no project or want to learn the project, Xiaobian to share a few project video: project 1:0 basic play WeChat small program development actual production tutorial project 2: front-end project tutorial of Vue+ Mintui shopping cart actual project 3: Front-end Project Tutorial of Aircraft Battle Variable Speed

Details of the optimization

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

Unique interpretation: Today’s interview questions are much the same, so how to present your strengths is very important. Combine it with the business and your own knowledge.

Deep thinking: to every question must have deep thinking, otherwise it is difficult to enter a big company, depth must have an upgrade in order to get a good score in the interview.

Fluent expression: the interview is a process of expression, some questions in the heart understand not, but also fluently express, basically if the interviewer thinks you express very fluently, when you talk about the half will not let you say, the proof has been passed.

“Asked the Soul at last

  • Is it your dream to enter Dachang? You know, it’s a small price to pay.
  • Are you the genius of a million? If not, then it’s normal to fail a few times, everyone is normal, maybe just don’t match.
Note: The front-end interview question summary PDF, learning materials and source code areJust click here to get it.