10 Essential Full-stack Interview Questions *

最好的全栈开发人员可以回答的全部基本问题. 在我们社区的推动下,我们鼓励专家提交问题并提供反馈.

Hire a Top Full-stack Developer Now
Toptal logois an exclusive network of the top freelance software developers, designers, finance experts, product managers, and project managers in the world. 顶级公司雇佣Toptal自由职业者来完成他们最重要的项目.

Interview Questions

1.

If you were to write an endpoint for checking if a resource exists, what path and method would you use?

View answer

这个问题的目的是测试应试者对RESTful API标准的了解程度. 构建端点时的一个常见错误是在路径中使用描述性动词. For example:

  • GET /users/search
  • GET /posts/create

Instead, 真正的RESTful路径应该只包含名词——端点上使用的方法应该决定操作. For example:

  • POST /users (create a user model)
  • PUT /users/{id|slug} (replace a user model)
  • PATCH /users/{id|slug} (update part of a user model)
  • DELETE /users/{id|slug} (delete a user model)
  • GET /users/{id|slug} (retrieve a user model)

确定资源是否存在是api中经常需要的操作, 但很少按照RESTful和行业标准正确地完成. The commonly accepted way to determine if a resource exists, using the above “user” resource as an example, is like so:

  • HEAD /users/{id|slug}

此请求将使用最少的带宽,因为它将不返回任何数据,仅返回一个 200 (resource exists) or 404 (resource does not exist) HTTP status.

2.

Consider the following database table design:

CREATE TABLE `notifications` (
	`id` INT NOT NULL AUTO_INCREMENT,
	`type` INT(8) NOT NULL,
	`notifiable_id` INT unsigned NOT NULL,
	`notifiable_type` VARCHAR(10) NOT NULL,
	`relation_id_1` INT unsigned,
	`relation_type_1` VARCHAR(10),
	`relation_id_2` INT unsigned,
	`relation_type_2` VARCHAR(10),
	`updated_at` TIMESTAMP NOT NULL,
	`created_at` TIMESTAMP NOT NULL,
	PRIMARY KEY (`id`)
);

What is wrong with the above and how could it be improved?

View answer

The key issue with the proposed table design are the object_id_X and object_type_X fields. 当数据可以像这样存储在相关表中时,增加命名字段被认为是糟糕的设计:

Notifications Table

CREATE TABLE `notifications` (
	`id` INT NOT NULL AUTO_INCREMENT,
	`type` INT(8) NOT NULL,
	`notifiable_id` INT unsigned NOT NULL,
	`notifiable_type` VARCHAR(10) NOT NULL,
	`updated_at` TIMESTAMP NOT NULL,
	`created_at` TIMESTAMP NOT NULL,
	PRIMARY KEY (`id`)
);

Notification Relations Table

CREATE TABLE `notification_relations` (
	`notification_id` INT unsigned NOT NULL,
	`relation_id` INT unsigned NOT NULL,
	`relation_type` VARCHAR(10) NOT NULL,
	PRIMARY KEY (`notification_id`)
);
3.

在您自己的API请求中集成第三方服务时,一个常见的问题是必须等待响应, and as such, forcing the user to have to wait for longer.

How would you go about avoiding this? Name any relevant technologies if appropriate

View answer

The most effective way to solve this problem is to use queues.

当向我们的API发出请求时,将创建一个单独的作业并将其添加到队列中. 然后,该作业将在请求的端点上独立执行, thus allowing the server to respond without delay.

There are many queue providers but the most notable are:

  • Amazon SQS
  • Redis
  • Beanstalkd

Apply to Join Toptal's Development Network

and enjoy reliable, steady, remote Freelance Full-stack Developer Jobs

Apply as a Freelancer
4.

如果用户试图创建一个已经存在的资源,例如, 已经注册的电子邮件地址—您将返回什么HTTP状态码?

View answer

尽管这个问题的答案存在争议,但广泛接受的做法是使用 409 Conflict HTTP status code.

It would also be acceptable to return a 422 Unprocessable Entity.

Some may argue that a 400 Bad Request is acceptable, but we discourage this, 因为它通常意味着服务器不理解请求, which in this case is not true.

5.

如何防止僵尸抓取你的公开API?

View answer

If the data within the API is publicly accessible then, technically, it is not possible to completely prevent data scraping. However, 有一个有效的解决方案可以阻止大多数人/机器人:速率限制(也称为节流)。.

节流将阻止某个设备在规定时间内发出规定数量的请求. Upon exceeding the defined number of requests, a 429 Too Many Attempts HTTP error should be thrown.

注意:使用不止一个IP地址来跟踪设备是很重要的,因为这不是设备唯一的,并且可能导致整个网络失去对API的访问.

Other less-than-ideal answers include:

  • 基于用户代理字符串阻止请求(很容易绕过)
  • 在前端为访问者生成临时“会话”访问令牌. 这并不安全:在前端存储秘密可能会被逆向工程, thus allowing anyone to generate access tokens.
6.

Consider the following two tables:

CREATE TABLE `posts` (
	`id` INT NOT NULL AUTO_INCREMENT,
	`text` TEXT,
	`user_id` INT unsigned NOT NULL,
	`updated_at` TIMESTAMP NOT NULL,
	`created_at` TIMESTAMP NOT NULL,
	PRIMARY KEY (`id`)
);

CREATE TABLE `post_likes` (
	`post_id` INT unsigned NOT NULL,
	`user_id` INT unsigned NOT NULL,
	`created_at` TIMESTAMP NOT NULL
);

Write a query to retrieve all data from the posts table for a given user_id. 除此之外,返回的记录集还应该包括的计数 post_likes for each post.

View answer

首先,也是最重要的,答案应该包括一个,而且只有一个查询. 达到预期结果的方法有很多,但正确的方法是:

SELECT
   posts.*,
   COUNT(post_likes.user_id) AS likes 
FROM
   posts 
   LEFT JOIN
      post_likes 
      ON posts.id = post_likes.post_id
WHERE posts.user_id = 'XXX'
GROUP BY posts.id
7.

考虑一个响应式网站设计,它需要在所有响应状态下使用全宽图像. 正确的编码方式是什么,以确保页面加载填充空间所需的最小图像?

View answer

The key attributes here are srcset and sizes. 这些属性允许开发人员为一个图像指定多个图像大小 , for example:


By using srcset and sizes, 然后,浏览器将根据访问者视口的大小智能地选择要使用的正确图像源.

任何基于视口大小使用JavaScript更改图像源的建议都应该被视为危险信号. 这表明开发人员没有跟上最新的CSS特性支持和/或最佳实践.

8.

考虑一个在页面中心有一个登录表单的站点设计. 使用CSS,什么是最好的方法来确保框是水平和垂直居中?

View answer

There are technically various ways to achieve this. However, nowadays, there is one “correct” way to do this: using display: flex and margin: auto.

Other methods include position: absolute;, top: 50%, and margin-top: -Xpx,但是自从引入了 display: flex.

9.

List three key things to consider when coding with SEO in mind.

View answer

为了建立一个网站优化的有机搜索引擎排名, it is important to implement certain standards throughout the code. These include:

  • Specifying an alt tag on images
  • Using the correct HTML tags for content hierarchy i.e.,

    /

    /

    and p

  • Connect the site to the company’s social pages
  • Add an XML sitemap
  • Avoid broken links
  • Use vanity/friendly URLs (human readable)
  • Add a robots.txt file
  • Integrate Google analytics (or alternative)
  • Specify a favicon, bonus for specifying browser specific icons
  • Ensure lightning fast page load time
  • Avoid JavaScript errors
  • Optimize assets (including minification)
  • Enable and force SSL
  • Specify unique titles for each page without exceeding 70 characters
  • Include a meta description on each page
  • 确保有足够的内容和足够的相关关键词(如果所有页面都是一句话页面,搜索引擎会惩罚你的网站)
  • Leverage browser caching
  • Avoid W3C markup validation errors
  • Specify relevant meta tags
10.

列出五种或更多优化网站的方法,使其尽可能高效和可扩展.

View answer

Optimizing websites is an art that few are familiar with. The more the engineer is able to list off the top of their head, 他们就越有可能在编写代码时自然地执行以下所有操作,而不必稍后返回.

(此外,通常一个专业构建的网站在分析时应该得分超过75% gtmetrix.com, which can also serve as a checklist.)

  • Optimize all assets
  • Place all assets on a separate, cookie-free domain. Using a CDN is best
  • Avoid inline JavaScript and CSS
  • Enable gzipping
  • Ensure all code is minified
  • Defer parsing of JavaScript
  • Use srcset for responsive images
  • Leverage browser caching
  • Reduce DNS lookups
  • Avoid duplicate code
  • Avoid URL redirects
  • Enable HTTP keep-alive
  • Serve scaled images
  • Use image sprites where appropriate
  • Prefer asynchronous resources
  • Specify the character set at server level
  • Avoid CSS @import
  • Specify a cache validator
  • Minimize request size
  • Avoid bad requests and 404s
  • Specify image dimensions
  • Reduce cookie size
  • Make fewer HTTP requests, i.e., load as few external resources as possible
  • Avoid unnecessary images; where possible, use CSS
  • Ensure no validation errors with W3C

There is more to interviewing than tricky technical questions, so these are intended merely as a guide. Not every “A” candidate worth hiring will be able to answer them all, nor does answering them all guarantee an “A” candidate. At the end of the day, hiring remains an art, a science — and a lot of work.

Why Toptal

Tired of interviewing candidates? Not sure what to ask to get you a top hire?

Let Toptal find the best people for you.

Hire a Top Full-stack Developer Now

Our Exclusive Network of Full-stack Developers

Looking to land a job as a Full-stack Developer?

Let Toptal find the right job for you.

Apply as a Full-stack Developer

Job Opportunities From Our Network

Submit an interview question

Submitted questions and answers are subject to review and editing, and may or may not be selected for posting, at the sole discretion of Toptal, LLC.

* All fields are required

Looking for Full-stack Developers?

Looking for Full-stack Developers? Check out Toptal’s Full-stack developers.

Leah Sapan

Freelance Full-stack Developer
United StatesToptal Member Since August 31, 2015

Leah is a motivated, self-taught, 拥有超过13年专业软件开发经验的分析思考者. She has a proven history of architecting, developing, 部署全功能的web应用程序,专注于用户体验和高性能的后端设计. Leah可以在软件开发生命周期中管理多个项目, thrives in challenging environments to meet stringent deadlines, and has a deep passion for mentoring and growing colleagues.

Show More

Matthieu Pons

Freelance Full-stack Developer
GermanyToptal Member Since September 29, 2022

Matthieu是一名全栈软件工程师,在前端和后端开发方面拥有超过15年的实践经验. 他对产品的专注使他与人合作经营了一家媒体机构,甚至创办了一家初创公司. Always looking for challenging learning opportunities, Matthieu探索了机器学习领域,并编写了一个快速高效的推荐系统,至今仍在为最终用户服务.

Show More

Carlos Ramirez III

Freelance Full-stack Developer
United StatesToptal Member Since December 6, 2014

Carlos是一名专业的软件工程师和全栈web开发人员,专注于Ruby on Rails框架. He has worked with tech companies for over a decade, helping to build technology-based businesses from the ground up. He has a bachelor's degree in computer science from Williams College.

Show More

Toptal Connects the Top 3% of Freelance Talent All Over The World.

Join the Toptal community.

Learn more