30 个 Web 开发人员面试问题（含答案）概述

2025-05-24

30 个 Web 开发人员面试问题（附答案）

概述

概述

我不知道你是怎么想的，但我不喜欢技术面试。即便如此，技术面试确实可以有效地发现新的改进领域。

每次面试后，我的例行工作是研究那些我没有信心回答的问题，并写一个简短的总结。

以下是一些面试问题以及我在网上看到的一些其他问题。

快速链接：

经验水平

我有大约 1 年的几乎每天的编码经验（训练营 + 自由职业），并且作为网页设计师还获得了一些额外的网络知识。

为什么要写另一份“面试问题”清单？

  1. 通过重写这些概念来帮助自己进一步灌输这些概念。

  2. 帮助处于类似水平的其他人了解预期结果。

我仍然鼓励你研究自己的答案，这就是为什么每个部分都有方便的研究链接供你深入研究。😁

欢迎在下方留言，分享你对这些问题的不同看法。我非常期待从这个优秀的开发者社区学习更多最佳实践。💪

问题

HTML部分

1. 为什么alt文本很重要？

2.HTML中的标签起什么作用<DOCTYPE>？

3. 使用适当的语义元素优化此 HTML 代码。

4.什么是 Open Graph 元标签？

5. 在 HTML 中使用该<script>标签有哪些不同的方法？

CSS 部分

6.您对 Bootstrap 的使用感觉如何？

7. 如何覆盖 Bootstrap 按钮样式？

8. 该属性是什么box-sizing？

9. 您如何有效且高效地使用 CSS 动画？

10. 如何使用 BEM 命名约定在 SCSS 中重写此 CSS 代码？

display 11.您知道该房产的哪些价值以及它们有何独特之处？

JavaScript 部分

12.什么是事件委托？

13. 解释 For、While 和 Do...While 循环之间的区别。

14. 如何在 Node.js 中将数据解析为 JSON？

var15. 解释、let和之间的区别const。

this 16.与常规函数相比，箭头函数的行为有何 不同？

React 部分

17. 如果在 React 中直接更改状态会发生什么？

18. 如何向 React 中的子组件发送信息？

19. 如果一个组件获得 props 并重新渲染，其他组件也会再次渲染吗？

20. 如何在组件之间共享状态？

21.如何调试 React-Redux 应用程序中的问题？

后端部分

22. Mongoose 的用途是什么？

23.解释 RESTful 路由。

24. 解释中间件以及如何在应用程序中使用它。

25.什么是 HTTP 服务器响应状态代码？

MISC 开发科

26.什么是延迟加载？

27.你如何改善SEO？

28. 您熟悉哪种测试框架？

29. 如何提高网站的加载时间？

30. 您将如何浏览代码库？

HTML部分

1. 为什么alt文本很重要？

<img src="libary.jpg" alt="Young woman in the library sitting by a table of books."/>
Enter fullscreen mode Exit fullscreen mode

它们为图像提供浏览器和屏幕阅读器都可以看到描述。

这一点很重要，因为与文本不同，图像无法提供太多关于其内容的背景信息。所以这对SEO和可访问性都非常有帮助。

当图像中断时，浏览器也会显示此 alt 标签，这有助于改善用户体验。

深入了解🔎

返回🔝

2.HTML中的标签起什么作用<DOCTYPE>？

<!DOCTYPE html>
<html lang="en">
  <head>
  ...
Enter fullscreen mode Exit fullscreen mode

这是我们在 HTML 文件最顶部指定的标签，目的是让浏览器知道我们正在使用的 HTML 版本。这有助于浏览器理解文件中的语法。

深入了解🔎

返回🔝

3. 使用适当的语义元素优化此 HTML 代码。

<!-- Orginal Code -->

<div>
    <div>
        <div>This is a blog Title</div>
        <div>This is the main blogs body text...</div>
        <img src="cars.jpg" />
        <div>Image caption</div>
        <div>This is a blog subtitle</div>
        <div>More body text...</div>
    </div>
    <div>
        <div>Categories</div>
        <div>
            <a href="#">Category 1</a>
            <a href="#">Category 2</a>
            <a href="#">Category 3</a>
        </div>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode 
<!-- Refactored Code -->

<section>

    <article>
        <h1>This is a blog Title</h1>
        <p>This is the main blogs body text...</p>

        <figure>
            <img src="cars.jpg" alt="3 cars driving down a hilly road."/>
            <figcaption>Image caption</figcaption>
        </figure>

        <h2>This is a blog subtitle</h2>
        <p>More body text...</p>
    </article>

    <aside>
        <h3>Categories</h3>
        <ul>
            <li><a href="#">Category 1</a></li>
            <li><a href="#">Category 2</a></li>
            <li><a href="#">Category 3</a></li>
        </ul>
    </aside>

</section>
Enter fullscreen mode Exit fullscreen mode

变化

  • <section>由于博客内容是一起的，因此使用标签来包装所有博客内容。

  • 标签<article>用于标示博客的主要内容。

    • <h1>由于标题需要最重要的语义价值，因此赋予了它一个标签。
    • <h2>在副标题中使用了“An” ，因为它很重要，但不如标题重要。
    • <p>使用标签来包装所有常规文章副本。
    • <alt>已向图像添加属性以增强可访问性和 SEO 优势。
    • 并且用于将图像和标题关联在一起<figure>。<figcaption>

  • 用来<aside>包装类别元素，因为它仅间接地与主要博客内容相关。

    • <h3>使用An作为类别标题，因为它在所有标题中具有最小的语义影响。
    • <ul>并<li>使用标签来包装类别链接以提高可访问性。

深入了解🔎

返回🔝

4.什么是 Open Graph 元标签？

<head>

  <!-- Primary Meta Tags -->
  <title>trust4leaders</title>
  <meta name="title" content="trust4leaders">
  <meta name="description" content="We are on a mission to improve outcomes by developing trust between people.">

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="changeforleaders.com">
  <meta property="og:title" content="trust4leaders">
  <meta property="og:description" content="We are on a mission to improve outcomes by developing trust between people.">
  <meta property="og:image" content="/assets/img/og-image.jpg">

  <!-- Twitter -->
  <meta property="twitter:url" content="changeforleaders.com">
  <meta property="twitter:title" content="trust4leaders">
  <meta property="twitter:description" content="We are on a mission to improve outcomes by developing trust between people.">
  <meta property="twitter:image" content="/assets/img/og-image.jpg">
  <meta property="twitter:card" content="summary_large_image">
</head>
Enter fullscreen mode Exit fullscreen mode

这些是特殊的元标记，可用于 HTML 中，<head>在社交媒体网站上以富媒体卡片的形式显示信息。信息可以包括图片、标题、描述、URL 和类型。

Facebook 建立了 Open Graph (OG) 元标签，大多数平台都在使用它们。然而，值得注意的是，Twitter 提供了自己的语法。（如上所示。）

许多平台还提供“调试器”，它将抓取这些标签的 URL 并预览帖子的外观。

深入了解🔎

返回🔝

5. 在 HTML 中使用该<script>标签有哪些不同的方法？

包装

<body>
  ...
  <script>let Alert = ReactBootstrap.Alert;</script>
</body>
Enter fullscreen mode Exit fullscreen mode

将客户端脚本语言（例如 JS）包裹在<script></script>标签中即可运行代码。代码放置在正文的底部，以免阻塞 DOM 渲染。

输入

<body>
  ...
  <script src="./index.js"></script>
</body>
Enter fullscreen mode Exit fullscreen mode

可以通过在 script 标签中添加属性来导入外部脚本src。这是首选方法，因为它可以让你清晰地模块化代码，而无需将其绑定到单个 HTML 文件。

推迟导入

<head>
  ...
  <!-- Will run after DOM loads -->
  <script defer src="./script1.js"></script>

  <!-- Will run after DOM and script1.js loads -->
  <script defer src="./script2.js"></script>
</head>
<body>
  ...
</body>
Enter fullscreen mode Exit fullscreen mode

该defer属性将停止脚本运行，直到 HTML 文件 (DOM) 上的所有内容都渲染完毕。但是，它仍会与 DOM 并行从服务器下载，然后按同步顺序运行。

这对于性能确实很有帮助，也意味着脚本将能够充分访问它需要附加处理程序的任何 HTML 元素。

异步导入

<head>
  ...
  <!-- Will run second since it downloads slower -->
  <script async src="./longScript.js"></script>

  <!-- Will run first since since it downloads faster -->
  <script async src="./shortScript.js"></script>
</head>
<body>
  ...
</body>
Enter fullscreen mode Exit fullscreen mode

该async属性将与页面同时加载并运行脚本。它还会在任何其他脚本加载完成之前异步运行其脚本。这对于我们网站不依赖的第三方功能非常有用。（例如 Google Analytics。）

深入了解🔎

返回🔝

CSS 部分

6.您对 Bootstrap 的使用感觉如何？

我对这个框架非常满意。我已经通过 CDN 链接在多个网站上使用了它，也曾在本地托管源文件并使用 SASS 进行主题设置。

在一些 React 项目中，我也使用了该框架的 react-bootstrap 版本。

最近，我更加专注于使用“原生”CSS 工具，例如 Flexbox 和 CSS Grids。这让我能够更好地理解框架的内部工作原理，并且不会过度依赖它。

深入了解🔎

返回🔝

7. 如何覆盖 Bootstrap 按钮样式？

CSS 覆盖

.btn {
  border-radius: .75rem;
}

.btn-primary {
  background-color: #1f48bb;
}

#heroBanner .btn-primary {
  background-color: #1f48bb;
}
Enter fullscreen mode Exit fullscreen mode

只要我的 CSS 文件位于引导 CDN 链接下方，我就可以像使用我自己的 CSS.btn一样定位它的类和变体。.btn-primary

在某些情况下，可能会存在特异性问题，然后我会将其他选择器（如 ID）串起来以增加特异性。

SCSS 覆盖

$btn-border-radius: 10rem;

.btn {
    box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.15);
    font-weight: 700;
    &:hover {
        box-shadow: inset 0px 0px 10px 2px rgba(0, 0, 0, 0.15);
        background: $brandGradient1;
    }
}
Enter fullscreen mode Exit fullscreen mode

我最好直接针对 Bootstrap 样式和 SASS 变量。

这里我不会修改原始框架文件，因为 Bootstrap 更新后我的更改可能会被覆盖。我还是会为按钮覆盖创建一个单独的 SCSS 文件，并将新的样式放在那里。

深入了解🔎

返回🔝

8. 该属性是什么box-sizing？

通过确定 CSS 盒模型的哪些部分包含在整体尺寸中，这将影响元素的大小。

/* Size: 100x100px */
.box1 {
  display: border-box;
  width: 100px;
  height: 100px;
  padding: 20px;
  border: 1px solid black;
}

/* Size: 142x142px */
.box2 {
  display: content-box;
  width: 100px;
  height: 100px;
  padding: 20px;
  border: 1px solid black;
}
Enter fullscreen mode Exit fullscreen mode

  • 该border-box值包括整体尺寸中的边框、内容和填充尺寸。

  • 该content-box值仅包含内容的大小。如果存在边框或填充，则其附加尺寸将添加到整体尺寸中。

深入了解🔎

返回🔝

9. 您如何有效且高效地使用 CSS 动画？

  1. CSS 动画的执行方式不应造成不必要的页面重绘。例如，通过调整 向下推动某个项目margin-top会将其下方的所有其他项目向下推动，从而导致页面的相应部分重绘。相反，  transform: translateY()会更高效。

  2. 另一件需要避免的事情是将filter: blur()（或任何滤镜属性）绑定到较长的滚动动画上。我曾经尝试在滚动时模糊掉一个英雄图像，结果拖慢了整个页面的加载速度，尤其是在 Safari 上。

  3. 使用时间变化和相反方向的动画可以增添趣味。您可以调整三次贝塞尔曲线，让元素以不同的速度开始和结束。同时让一个元素微妙地向下移动，另一个元素则向上移动，可以营造出一种美妙的张力。

深入了解🔎

返回🔝

10. 如何使用 BEM 命名约定在 SCSS 中重写此 CSS 代码？

/* Orginal Code */

.button {
  height: 40px;
  max-width: 200px;
  font-size: 20px;
}

.button-with-icon {
  color: black;
  background-color: white;
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
}

.primary-button {
  color: white;
  background-color: green;
}

.danger-button {
  color: white;
  background-color: red;
}

.button:hover,
.primary-button:hover,
.primary-button-with-icon:hover {
  background-color: blue;
}


.big-danger-button:hover {
  opacity: 0.5;
}
Enter fullscreen mode Exit fullscreen mode 
/* Refactored Code */

.button {
  height: 40px;
  max-width: 200px;
  font-size: 20px;

  &__icon {
    color: black;
    background-color: white;
    border: 1px solid black;
    display: flex;
    justify-content: space-between;
  }

  &--primary {
    color: white;
    background-color: green;
  }

  &:hover {
    background-color: blue;
  }

  &--danger {
    color: white;
    background-color: red;

    &:hover {
      opacity: 0.5;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

此解决方案采用了 BEM 方法，将块、元素和修饰符拆分成各自的类，同时保持其上下文关系。借助 SASS 的嵌套功能，我还减少了所需的代码量。

深入了解🔎

返回🔝

display11.您知道该房产的哪些价值以及它们有何独特之处？

.box {
  display: inline;
  display: block;
  display: inline-block;
  display: flex;
  display: grid;
  display: none;
}
Enter fullscreen mode Exit fullscreen mode

  • 该inline值将使元素占据其内容的宽度并位于其他元素旁边inline。inline-block标签<span>默认inline为。

  • 该block值会占据所有可用宽度，将其他元素推至下一行。其他元素的高度/宽度可以调整，且margin-top/bottom会得到保留。默认情况下，<div>标签会block保留。

  • 该inline-block值具有值的所有特征block，除了它们不会将其他元素推到下一行。<button>标签是inline-block默认的。

  • 该flex值启用了一组强大的 CSS 属性，这些属性会影响父元素及其子元素的布局、对齐和顺序。

  • 该grid值与非常相似，但flex在语法和功能上有一些变化。例如，它还可以让你指定网格中元素之间的间隙大小。

  • 该none值将完全隐藏其所分配的元素。

深入了解🔎

返回🔝

JavaScript 部分

12.什么是事件委托？

当处理交互元素（如按钮）时，我们通常会将一个唯一的事件监听器附加到元素上，以便在触发时执行一些代码。

但是，如果我们有一大组按钮或一个包含数百个可点击单元格的表格，这可能会导致严重的性能问题。

事件委托允许我们通过仅分配一个事件监听器来处理所有点击来显著优化这个问题。

我们可以为我们想要点击的元素组的父元素/容器分配一个事件监听器。（例如，一个包含多个按钮的 div。）

document.getElementById('parent')
  .addEventListener('click', event => { 
    if (event.target.className === 'buttons') {
      // Code executed here
    }
  });
Enter fullscreen mode Exit fullscreen mode

为了实现这一点，我们使用了一种称为事件传播的过程，其中任何被定位（点击）的项目都会将事件发送回 DOM 中的根元素。这被称为“冒泡”或“从目标向上冒泡”，然后父元素可以监听该事件。

  ROOT   |   Window   ^
         |  Document  |   Event
         |   <html>   |   Bubbling
         |   <body>   |   Back Up
         |   <div>    |
TARGET   v  <button>  |
Enter fullscreen mode Exit fullscreen mode

深入了解🔎

返回🔝

13. 解释 For、While 和 Do...While 循环之间的区别。

For 循环

此循环会循环执行一段代码，直到满足指定的数字条件。我们可以为其设置起始变量、条件或终点，以及每次循环应增加的量。

for(let i = 1; i <= 5; i++) {
  console.log(`This ran ${i} times!`);
}
Enter fullscreen mode Exit fullscreen mode

While 循环

此循环会循环执行一段代码，直到其检查的条件返回 false。当没有设置特定金额来设置条件时，此方法很适合。

let cats = 5;

while(cats <= 0) {
  console.log(`There are still ${cats} here!`);
  cats--;
}
Enter fullscreen mode Exit fullscreen mode

Do...While 循环

这个循环会执行一段代码，然后检查一个条件。它会一直执行代码并进行检查（按此顺序），直到条件为假。

let cats = 5;

do {
  console.log(`There are still ${cats} here!`);
  cats--;
} while(cats <= 0)
Enter fullscreen mode Exit fullscreen mode

深入了解🔎

返回🔝

14. 如何在 Node.js 中将数据解析为 JSON？

我会用该JSON.parse()方法获取一个 JSON 字符串并将其转换为对象或数组。然后，我可以用它将JSON.stringify()数组或对象重新转换为字符串。

const json = '{"result":true, "count":42}';

// Parsing
const object = JSON.parse(json);

console.log(object.count); // expected output: 42

// Stringify
const string = JSON.stringify(object);

console.log(string); // expected output: '{"result":true, "count":42}'
Enter fullscreen mode Exit fullscreen mode

深入了解🔎

返回🔝

var15. 解释、let和之间的区别const。

  • var是一种不遵守块作用域的遗留变量类型。 

  • let和const都是遵循块级作用域的 ES6 变量。Let 变量允许你稍后更新，而const不允许。

  • 函数通常被设置为，const因为它们不会停止作为函数。而循环可能会使用 来let赋值和更新变化的信息。

深入了解🔎

返回🔝

this16.与常规函数相比，箭头函数的行为有何不同？

箭头函数将this上下文保留到外部函数。

如果我们使用常规函数进行回调，this则使用其中的回调函数。

const myObject = {
  myMethod(items) {
    console.log(this); // logs myObject
    const callback = () => {
      console.log(this); // still logs myObject
    };
  }
};
Enter fullscreen mode Exit fullscreen mode

深入了解🔎

返回🔝

反应

17. 如果在 React 中直接更改状态会发生什么？

这可能会导致错误。useState并且setState并不总是立即更新状态。相反，它们会创建一个称为“待处理状态转换”的东西，并将状态更改放入队列中。

因此，如果您在 React 有机会从队列中执行此操作之前直接改变状态，则它很可能会被覆盖。

状态应该始终被视为“不可变的”。

深入了解🔎

返回🔝

18. 如何向 React 中的子组件发送信息？

在子组件上使用 props 允许你从父组件发送数据。子组件通常会设置结构，以便通过 props 从父级组件接收数据输入。 

但是，信息无法通过 props 发送回父组件。

深入了解🔎

返回🔝

19. 如果一个组件获得 props 并重新渲染，其他组件也会再次渲染吗？

该组件的任何接收 props 的子组件也将重新渲染。我们可以使用多种方法来阻止重新渲染……

  1. 生命周期方法shouldComponentUpdate()允许我们使用nextState&nextProps来比较是否有任何变化。如果返回 false，则不会进行渲染。

  2. 基于类的组件也可以使用 PureComponent 仅在先前的 props 和状态不同时进行渲染。

  3. useMemo如果功能组件中的 props/state 没有改变，该钩子还可以让我们防止重新渲染。

深入了解🔎

返回🔝

20. 如何在组件之间共享状态？

  • 您可以利用useContext钩子并通过提供程序使状态可供特定组件使用。 

  • 状态可以通过 props 传递，但如果我们向下移动多个级别，这可能会变得复杂。

  • 状态可以通过调度动作有效负载存储在 React Redux 存储中。然后其他组件可以通过该mapStateToProps函数来使用此状态。 

深入了解🔎

返回🔝

21.如何调试 React-Redux 应用程序中的问题？

我将使用 Chrome Redux Dev Tools 扩展来可视化状态未正确触发的位置。

一旦缩小流程中存在的错误，我就会检查 reducer、store 和 action creators 是否存在错误。

如果它们看起来没问题，我就会查看正在调度和访问商店的组件。

深入了解🔎

返回🔝

后端部分

22. Mongoose 的用途是什么？

Mongoose 是一个 ODM，为 MongoDB 提供模式验证和结构化数据。由于 MongoDB 本身并不提供丰富的结构化数据，因此 Mongoose 负责管理数据的关系。

深入了解🔎

返回🔝

23.解释 RESTful 路由。

在这里我们可以使用 HTTP 动词（GET、POST、PUT 和 DELETE）并将它们映射到服务器端 CRUD 操作。

通过为不同的操作设置单独的路由，我们可以建立逻辑端口来执行某些操作。

例如，从 GET 路由接收所有用户的数组，与使用 DELETE 路由删除特定用户。


// FRONT-END
axios.get('/users') 
  .then(response => {
    // do something   
  })
  .catch(err => {
    // do something 
  })

axios.delete(`/user/${userId}`) 
  .then(response => {
    // do something    
  })
  .catch(err => {
    // do something 
  })

// BACKEND
router
  .route("/user/:id")
  // gets a user by id
  .get(userController.findById)
  //delete user
  .delete(userController.remove);
Enter fullscreen mode Exit fullscreen mode

深入了解🔎

返回🔝

24. 解释中间件以及如何在应用程序中使用它。

中间件就像请求者和服务之间的守门人。

它拦截请求，对其进行某种检查，然后将其传递到下一个点或拒绝它。

例子

假设客户端请求访问某个页面。我们可以使用像 Passport 这样的身份验证中间件来验证该请求，以确定用户是否已登录。

如果不是，他们可能会被重定向到登录屏幕。如果他们通过了身份验证，那么 Passport 中间件将允许请求通过服务器。

深入了解🔎

返回🔝

25.什么是 HTTP 服务器响应状态代码？

这些是服务器发送给客户端的有关请求状态的数字代码。

例如，200 状态码表示请求已成功接收。而 404 状态码则表示未找到页面。

有很多请求，有些很有帮助，有些则很愚蠢。（418 的意思是“我是一把茶壶”）。🫖

深入了解🔎

返回🔝

MISC 开发科

26.什么是延迟加载？

延迟加载是延迟内容和数据加载到页面直到满足特定参数的过程。

它与 Intersection Observer API 结合使用，用于判断内容何时与视口的不同部分相交。此时，前端开始发出加载数据的请求。

这有助于节省带宽成本、加载时间和数据下载成本。因为只有正在查看的内容才会从服务器下载。 

深入了解🔎

返回🔝

27.你如何改善SEO？

  • 在图像上使用alt文本

  • title向页面添加元标记

  • 向页面添加元描述
     

  • 确保字体大小可读（大多数正文为 16-18px，不小于 12px）

  • 点击区域对于移动设备来说足够大（35-45px 高度是一个很好的目标区域）

  • 拥有优质独特的内容，提升价值。（单纯的转发和联盟链接可能会造成损害）

  • 使用本地语言撰写文案。（英国和美国的网站应注意常用词的拼写：color 和 colour）

  • 为链接提供描述性措辞（“阅读 SEO 报告”与“点击此处”）

  • 使用良好的语义 HTML 结构，而不是将所有内容都放在div. 

  • 确保所有相关页面均未被阻止编入索引 

  • 向 Google Search Console 提交站点地图 

  • 在文章中添加视频嵌入，鼓励用户停留在页面上。更长的页面停留时间可以提高排名。 

深入了解🔎

返回🔝

28. 您熟悉哪种测试框架？

我在训练营中使用过一些 Jest，以及用于 React 的 Enzyme。我还学习了单元测试、测试驱动开发和关注点分离等概念。

虽然我对这些框架还没有太多经验，但我渴望学习更多。

深入了解🔎

返回🔝

29. 如何提高网站的加载时间？

  • 使用 Photoshop 和 tinyjpeg.com 正确压缩图像。（Jpeg 文件格式，72dpi，视网膜显示屏的双倍宽度/高度）

  • 在 Node 应用程序上使用 Gzip 压缩通过网络发送的所有文件。 

  • 使用适当的脚本加载顺序，以便大型脚本尽可能不会加载过早。
     

  • 对图像和折叠内容实施延迟加载 

  • 通过 CDN 提供文件，使服务器更靠近用户

  • 减少使用的字体数量

  • 压缩 CSS 和 JS

  • 使用专用服务器而不是共享服务器来减少限制并提高带宽容量 

  • 如果网站是 WordPress，请减少使用的插件数量

深入了解🔎

返回🔝

30. 您将如何浏览代码库？

我首先会看看我的团队中是否有一位导师，他可以帮助我了解影响我任务的重要领域，以及我可以向谁发送问题。

然后我会评估这些领域正在使用哪些类型的技术。我还会询问在研究代码时是否有任何文档或指南需要注意。

如果出现问题，我会花大约15-20分钟进行调试，然后再寻求帮助。这样，我既能认真尝试解决问题，又不会浪费公司4个小时的时间来解决一个可能已经通过其他方式解决的问题。

深入了解🔎

返回🔝

其他问题参见：

作为初级前端开发人员你需要了解什么 + 面试附加问题

70 个 JavaScript 面试题

使用Adob​​e Photoshop和Unsplash设计的标题图像

文章来源：https://dev.to/gedalyakrycer/30-web-developer-interview-questions-with-answers-3n3c
Devto 翻译
PREV
我如何构建我的梦想作品集网站简介我创造梦想
NEXT
我保持动力和高效的 25 种方法（首先介绍）ℹ️