The original:…

The author:
David Shariff

3. Crazy geek

This article first send WeChat messages public number: jingchengyideng welcome attention, every day to push you fresh front-end technology articles

Over the years, I’ve interviewed a number of front end engineers at Amazon and Yahoo. In this article, I’d like to share some tips to help you prepare.

Disclaimer: The purpose of this article isn’t to give you a list of questions you might be asked in a front-end interview, but consider it a store of knowledge.

Interviews are tough. As a candidate, you’re usually given 45 minutes to show off your skills. As an interviewer, it is also difficult to assess the person’s suitability for the job in such a short period of time. When it comes to interviews, there is no one size fits all, and interviewers usually cover a certain area, but beyond that, they make their own decisions about what questions to ask.

No matter which side of the interview table you sit on, this article will try to cover the most important areas of front-end development.

Common Misconceptions

One of the biggest mistakes I see candidates make is the tendency to prepare trivia questions such as “What is a model box? “Or” Tell me the difference between == and === in JavaScript?” And so on. It’s great to know the answers to these questions, but it won’t tell the interviewer your true skill set.

Instead, you should prepare for the interview in a very practical way that really demonstrates your JavaScript, CSS, and HTML coding skills. Preparing for the interview involves implementing the UI, building widgets, or implementing common functions such as Lodash and Underscore. Js libraries, such as:

  • Build the layout and interactions of common Web applications, such as the Netflix browser site.
  • Implement widgets such as date pickers, rotations or e-commerce shopping carts.
  • Write a function like Debounce or a deeply cloned object.

When it comes to libraries, another common mistake is that people like to rely entirely on the latest framework to solve interview questions. You may be thinking: why reinvent the wheel when I can use jQuery, React, Angular, etc in development, and why not use it in interviews? That’s a good question, technology, frameworks, and libraries will always change over time — I’m more interested in the fact that you need to understand the fundamentals of front-end development, rather than relying on higher levels of abstraction. If you can’t answer interview questions without relying on these libraries, I hope you can at least thoroughly explain and speculate about what the libraries are doing behind the scenes.

In general, you should expect most interviews to be very practical.


You need to know JavaScript, deep down. In an interview, the higher the level, the higher the expectation of depth of language knowledge. At the very least, here’s the JavaScript you should be familiar with:

  • Execution context, especially lexical scopes and closures.
  • Hoisting mechanisms, function and block scopes, and function expressions and declarations.
  • Bindings – especially the call, bind, apply, and this keywords.
  • Object prototypes, constructors, and mixins.
  • Combinatorial functions and higher-order functions.
  • Time to delegate and bubble.
  • Typeof, instanceof and Object. The prototype. ToString.
  • Handle asynchronous calls using Callbacks, Promises, Aawait and Async.
  • When to use function declarations and expressions.


How they traverse and manipulate the DOM is important, and if they rely on jQuery or write a lot of React and Angular type apps, this is where most candidates should be working. You might not do this every day, because most of us use abstract sorts. However, if you don’t rely on third-party libraries, you should know how to do the following:

  • usedocument.querySelectorAnd older browsersdocument.getElementsByTagNameSelect or find a node.
  • Traversal up and down:Node.parentNode.Node.firstChild.Node.lastChildandNode.childNodes.
  • 4. Left and right traversal:Node.previousSiblingandNode.nextSibling.
  • Operations: Add, delete, copy, and create nodes in the DOM tree. You should know how to modify the text content of nodes and toggle, delete, or add CSS class names.
  • Performance: Operating with the DOM can be expensive when you have a lot of nodes, so you should at least be aware of document fragments and node caches.


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

  • Layout: Elements that sit next to each other and how to put elements in two and three columns.
  • Reactive design: Change the size of an element based on the browser width.
  • Adaptive design: Change the size of an element based on a specific breakpoint.
  • Specificity: How to calculate the specificity of selectors and how cascading affects properties.
  • Use the appropriate namespace and class name.


Know which HTML tags best represent the content you are displaying and related attributes, and master the skill of writing HTML by hand.

  • Semantic markup.
  • Mark properties such as disabled, async, defer and when to use data-*.
  • Know how to declare your DOCTYPE (many people forget this because they don’t write new pages every day) and which meta tags to use.
  • Accessibility issues, such as 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

An interview for a back-end system design often involves MapReduce, designing a distributed key-value store, or requiring knowledge of the CAP theorem. Although your front-end work doesn’t require in-depth knowledge of how such systems are designed, don’t be surprised if you’re asked to design the front-end architecture of a common application. Often these questions are vague, such as “design a site like Pinterest” or “tell me how to build a shopping checkout service?” . Here are some areas to consider:

  • Rendering: client-side rendering (CSR), server-side rendering (SSR), and general rendering.
  • Layout: If you are designing a system to be used by multiple development teams, you need to consider building components and whether the team needs to follow consistent specifications to use those components.
  • State management: For example, choosing between one-way data flow or two-way data binding. You should also consider whether your design follows a passive or reactive programming model and how components should relate to each other.
  • Asynchronous streaming: Your component may need to communicate with the server in real time. Your design should consider XHR with bidirectional calls. If the interviewer asks you to support older browsers, then your design needs to choose between hidden iframes, script tags, or XHR for messaging. If not, you can suggest using WebSockets, or you may decide that server sending events (SSE) is better.
  • Separation of concerns: MVC, MVVM, and MVP patterns.
  • Multi-device support: Will your design use the same implementation for Web, mobile Web, and hybrid applications, or will it be implemented separately? If you’re developing a site like Pinterest and might consider using three columns on the Web but only one column on a mobile device, how does your design handle this?
  • Delivery: In large applications, it is not uncommon for independent teams to have their own codebases. These different codebases may depend on each other, and each codebase typically has its own pipeline to release changes to the production environment. Your design should consider how to build these resources using dependencies (code split), tests (unit and integration tests), and deployment. You should also consider how to distribute resources over a CDN or inline them to reduce network latency.

The network performance

In addition to generic programming techniques, you should expect the interviewer to look at your code or design and its impact on performance. It used to be enough to put CSS at the top of the page and JS scripts at the bottom, but the Web is evolving fast, and you should be familiar with the complexities of this space.

  • Critical render path.
  • Service workers.
  • Image optimization.
  • Lazy loading and bundling unbundling.
  • General meaning of HTTP/2 and server push.
  • When to prefetch and preload resources.
  • Reduced browser rearrangement and when elements are rendered to the GPU.
  • Differences between browser layout, compositing, and rendering.

Data structures and algorithms

This may be debatable, but not knowing the basics of high time complexity and common runtimes such as O(N) and O(N Log N) can be confusing. An understanding of memory management and other aspects is very helpful for today’s very common single-page applications. For example, if you’re implementing a spell checker, knowing the common data structures and algorithms will make your job much easier.

I’m not saying you need a CS degree, but this industry is no longer about writing a simple page. There are a lot of resources online that you can pick up on these basics very quickly.

Common Web Knowledge

You need to master the technologies and paradigms that make up the Web.

  • HTTP requests: GET and POST and associated headers such as Cache-Control, ETag, Status Codes, and Transfer-Encoding.
  • REST with RPC.
  • Security: When to use JSONP, CORS, and iFrame policies.


Being a Web developer or engineer requires a lot of knowledge. Don’t get stuck in the depth of knowledge you need, but keep an open mind and learn all the complex techniques you need to develop.

In addition to the technical topics covered in this article, you’ll also need to talk about past projects, describe interesting twists and trade-offs.

I know there are a lot of things I missed on the front end of the interview, so I’d love to hear from you, or anything important that you think you were asked about during the interview that I missed.

The first send WeChat messages public number: Jingchengyideng

Follow the public accountjingchengyideng“, reply “system”, see the larger picture of the knowledge system discussed in this article

Welcome to scan the two-dimensional code to pay attention to the public number, every day to push you fresh front-end technology articles