【利用AI刷面试题】50道前端基础面试题（一）-阿里云开发者社区

以下是一些可能出现在前端基础面试中的问题：

1. 如何判断当前浏览器是否支持某个 HTML5 特性？

在判断当前浏览器是否支持 HTML5 的某个特性时，可以使用 JavaScript 中的特性检测方法。这种方法可以避免使用容易出错的浏览器用户代理字符串检测方法。

以检测 localStorage 是否支持为例，可以使用以下代码：

if (typeof(Storage) !== "undefined") {
   // 浏览器支持 localStorage
} else {
   // 浏览器不支持 localStorage
}

在上例中，我们首先使用 typeof 来检测 Storage 对象是否被定义，如果返回 “undefined”，说明浏览器不支持该特性，否则即支持该特性。

同样的方式也适用于其它 HTML5 特性的检测，例如：

// 检测浏览器是否支持 Canvas
if (typeof canvas.getContext === 'function') {
  // 支持 Canvas
} else {
  // 不支持 Canvas
}
// 检测浏览器是否支持 Web Workers
if (typeof Worker !== "undefined") {
    // 支持 Web Workers
} else {
    // 不支持 Web Workers
}

特征检测方法是一种认为测试是否可以运行而不是获取信息的函数。在此方法的基础上，可以使用 polyfill 技术提供一些 HTML5 特性的备选实现，以使旧版浏览器也能够正确地运行应用程序。

2. Box-sizing 属性有哪些取值，分别代表什么意思？

box-sizing 属性用于控制元素的盒模型大小计算方法。盒模型是指一个元素所占据的空间，包括元素的内容区域、内边距（padding）、边框（border）和外边距（margin）。

box-sizing 属性有三种取值：

content-box: 默认值，盒模型的宽度/高度只包括内容区域的宽度/高度，内边距(padding)、边框(border)和外边距(margin)均不计算在内。
border-box: 设置盒模型的宽度/高度包括内容区域的宽度/高度以及内边距(padding)和边框(border)的宽度/高度。即：width/height = content-width/height + padding + border。
padding-box: 盒模型的宽度/高度包括内容区域的宽度/高度和内边距(padding)的宽度/高度。

例如，一个宽度为 200px，内边距为 10px，边框为 1px 的盒子，在使用不同的 box-sizing 属性值时，其宽度计算方式如下：

content-box: 盒子宽度为 200px 内容区域 + 20px 内边距 + 2px 边框 = 222px。
border-box: 盒子宽度为 200px 内容区域 + 10px 内边距 + 1px 边框 = 211px。
padding-box: 盒子宽度为 200px 内容区域 + 10px 内边距 = 210px。

在实际开发中，如果要实现等比缩放或固定比例缩放时，应该使用 border-box 属性值，这样可以避免调整内边距和边框大小导致元素宽度/高度变化的问题。

3. 什么是浏览器的同源策略？

浏览器的同源策略 (Same-Origin Policy) 是一种约定，用于限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。该策略主要用于防止跨站点脚本攻击（XSS）和跨站点请求伪造攻击（CSRF）。

具体而言，如果两个 URL 的协议、主机名（即域名）和端口号都相同，那么它们就是同源的。同源的文档或脚本可以自由地交互和共享资源，如 cookie、DOM 和 AJAX 请求。如果两个 URL 不同源，则默认情况下它们不能互相访问对方的资源。例如，从不同源的脚本代码执行跨站点 AJAX 请求或获取另一个网站的 cookie 等行为，都将受到浏览器的同源策略限制而失败。

除了 URL 的基本属性之外，还有一些情况需要注意：

即使两个 URL 使用了相同的协议、主机名和端口号，它们包含的文档对象模型（DOM）也可能不同。例如，如果 A 网站中内嵌了来自 B 网站的 iframe，那么即使它们使用了相同的 URL 属性，它们也仍然被视为不同源。
当使用 document.domain 来共享 cookie 时，URL 必须具有相同的顶级域名。例如，对于 A 网站和 B 网站来说，它们可以将 cookie 共享到主域名相同、子域名不同的 C.com 下。

总之，浏览器的同源策略是保护用户隐私和安全的重要机制，程序员们需要知道其限制，并在实际应用中遵循该策略，以防止恶意行为和攻击。

4. 什么是 CORS？如何使用后端支持跨域请求？

CORS（Cross-Origin Resource Sharing）是一种机制，它允许浏览器向同源之外的服务器发送 AJAX 请求，并允许服务器返回响应。为了实现这一机制，浏览器和服务器必须进行协作。

通常，CORS 会使用两种 HTTP header：

一种是客户端的请求 header
另一种是服务端的响应 header。

这两种 header 可以解锁浏览器的跨域问题。

现代浏览器支持使用 XMLHttpRequest (XHR) 和 Fetch API 等 HTTP 客户端 API 实现 CORS。一个支持 CORS 的 HTTP 请求包含一个 Origin 头部字段，表示请求发起的源，以及一个 Access-Control-Allow-Origin 响应头，表示允许跨域访问的源。

一个简单请求（简单请求是指不包含自定义 header 和请求方法的请求）的 CORS 机制可以使用如下方式进行配置，只需要在服务器端添加 Access-Control-Allow-Origin 响应头即可：

Access-Control-Allow-Origin: <origin> | *

当为具体的域名时，表示只允许此域名访问资源。
当为通配符 * 时，表示允许任何域名访问资源。

通常情况下，使用通配符 * 是不安全的，因为它允许任何网站都可以访问资源，因此，最好使用明确的域名。

5. 什么是 Web Storage？它与 Cookie 有什么区别？

Web Storage是一种浏览器提供的客户端存储解决方案，允许网站将数据存储在用户本地浏览器中。它包括两种存储方式：localStorage和sessionStorage。

localStorage：可以长期存储数据，直到用户在浏览器中手动删除数据为止，或者在JavaScript代码中调用removeItem()方法删除数据。它是基于域名进行存储的，不同域名存储的数据是互相独立的。

sessionStorage：只能在用户当前会话中存储数据，也就是当用户关闭或刷新浏览器窗口时，存储的数据会被删除。同样基于域名进行存储。

与Web Storage相比，Cookie是一种传统的客户端存储方案，它们也可以存储数据在用户本地浏览器中，但有以下区别：

Cookie的存储容量较小，只有4KB左右，而Web Storage可以存储更大量级的数据，一般可存储5-10MB的数据。
Cookie每次都会被发送到服务器端，增加了网络流量，而Web Storage只在客户端存储数据，不会发送到服务器端。
Cookie可以设置过期时间，Web Storage则不存在过期时间的设置。

总之，Cookie主要用于客户端与服务器端之间的交互，而Web Storage则用于客户端本地数据存储。

6. 请解释一下 HTTP 请求方法的 GET 和 POST 的区别。

HTTP 是一种用于在 Web 上进行通信的协议。

GET 和 POST 都是 HTTP 请求方法。

GET

GET 方法用于从 Web 服务器请求数据。当使用 GET 方法时，请求的数据以查询字符串的形式附加到 URL 中，并以此发送给 Web 服务器。因为查询字符串的长度有限制，所以 GET 方法通常用于请求较小的数据，如网页、图片和其他资源。

POST

POST 方法用于向 Web 服务器提交数据。当使用 POST 方法时，请求的数据包含在 HTTP 请求正文中，而不是 URL 中。因为正文的长度没有限制，所以 POST 方法通常用于提交大量数据，比如表单提交、文件上传等操作。

GET 方法比 POST 方法更简单和直观，但 POST 方法更安全和功能更强大，因为它可以处理更多类型的数据和更大的数据量。此外，POST 方法还支持对服务器状态进行更改的请求，而 GET 方法不支持这种请求。

7. CSS 如何实现水平垂直居中？

有多种方法可以实现水平垂直居中，以下是其中两种常用的方法：

1. 使用 Flexbox

使用 CSS 的 Flexbox 布局可以实现水平垂直居中，只需在容器上应用 display: flex; align-items: center; justify-content: center; 即可。具体代码如下：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

2. 使用绝对定位和 transform

使用 CSS 的绝对定位和 transform 属性，可以实现绝对定位元素的水平垂直居中。具体步骤如下：

将父元素设置为相对定位；
将要居中的元素设置为绝对定位；
将要居中的元素的左、上位置设置为 50%;
使用 CSS3 的 transform 属性将要居中的元素向左、上平移自身宽度和高度的一半。

具体代码如下：

.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

以上两种方式都可以实现水平垂直居中，具体方法取决于实际场景和需求。

8. 如何实现响应式布局？

实现响应式布局的一般步骤如下：

1. 使用相对单位

在样式中使用相对单位（如 em、rem、% 等），而不是绝对单位（如 px），可以让页面在不同屏幕尺寸间自适应。

2. 使用流式布局

将常用的布局封装为 CSS 类，并应用在页面布局上。例如，可以将常见的 2、3、4 等列布局封装好，并在需要使用时添加相应的样式类即可。

同时，使用百分比或比例的方式设置容器宽度，而不是固定的像素宽度，可以让页面更具弹性和适应性。例如，可以设置容器宽度为 100%，子元素宽度为 50%，这样在窗口宽度变化时，子元素就会自动缩放。

3. 使用媒体查询

使用 CSS3 的媒体查询可以根据屏幕尺寸动态改变样式。可以在样式表中使用媒体查询，以匹配不同的屏幕尺寸，并应用相应的样式。

例如，以下代码可以在屏幕宽度小于 768px 时，将导航栏中的菜单隐藏起来，并在点击打开菜单时再显示出来。

@media screen and (max-width: 768px) {
  .nav-menu {
    display: none;
  }
  .nav-toggle:checked + .nav-menu {
    display: block;
  }
}

以上步骤只是实现响应式布局的基础方法，具体的实现还要根据实际情况来定制。

9. 什么是 Shadow DOM？

Shadow DOM 是一种用于构建 Web 组件的技术，它为 Web 组件提供了独立的作用域和 DOM 树。

使用 Shadow DOM，可以创建一个基于 DOM 树的嵌套关系，在组件内部创建一个封闭的子 DOM 树，这个子树和外部 DOM 树是独立的。这意味着在组件内部定义的样式和脚本不会影响组件外部的样式和脚本，也可以避免与其他组件发生命名冲突的问题。

Shadow DOM 中通常包含以下几个部分：

Shadow host：Shadow DOM 的宿主元素，它定义了 Shadow DOM 插入到哪个元素中；
Shadow tree：由 Shadow host 和 Shadow root 组成的封闭的子 DOM 树结构；
Shadow root：Shadow tree 的根元素，即 Shadow DOM 的顶级元素；
Shadow boundary：Shadow DOM 的边界，它是 Shadow root 和 Shadow host 之间的分界线。

Shadow DOM 提供了一种用于封装 Web 组件的标准方式，这些组件可以随时重用并在不同的技术栈中使用。Shadow DOM 还可以与 Web Components 相结合，一起使用可以创建高度可复用、跨平台、可扩展的组件化 UI 系统。

10. 请解释一下事件委托。

事件委托是一种优化事件处理和管理的技术，它是利用事件的冒泡原理，将事件处理程序绑定到其父元素上，从而通过统一的事件处理程序来处理子元素上的事件。

在事件委托模式中，当一个事件发生在子元素上时，首先会向子元素的祖先元素（包括父元素、祖父元素等）一直冒泡到根节点，逐级触发相应的事件处理程序。因此，只需要在父元素上绑定事件处理程序，就可以处理它所有子元素上的事件。

事件委托的优势在于：

节省内存和代码量。因为只需要在父元素上绑定事件处理程序，而不需要在每一个子元素上都绑定一遍，所以可以大大减少事件处理程序的数量和占用的内存空间。
方便动态增加或删除子节点。使用事件委托，即使动态增加或删除子元素，也不需要再重新绑定事件处理程序，因为它们都会冒泡到父元素上被处理。
可以减少事件冒泡的时间。因为事件处理程序只绑定在父元素上，所以不需要在所有子元素上都触发事件，从而减少了事件冒泡的时间。

使用事件委托时，需要注意：

兼容性问题。事件冒泡原理是从 IE5 开始才支持的，因此在老旧的 IE 浏览器中可能会出现兼容性问题。
事件目标的判断。因为事件委托是将事件处理程序绑定到父元素上，所以需要通过 event.target 或 event.srcElement 获取事件触发的子元素，再根据具体情况进行判断和处理。但是，由于 event.srcElement 是 IE 浏览器独有的，所以需要进行一些兼容性处理。

总之，事件委托是一种非常高效和可扩展的事件处理技术，尤其适用于处理大量嵌套的子元素事件。

11. 什么是 BFC？

BFC（Block Formatting Context）是页面渲染时排版样式计算的一种机制。当一个元素形成了 BFC，它的布局会受到一些特定规则的控制。

BFC 的形成有很多种方式，其中比较常见的方式有：

根元素和具有 float 属性的元素都会形成 BFC。
定位为 absolute 或者 fixed 的元素也会形成 BFC。
具有 overflow 属性值不为 visible 的元素也会形成 BFC。

BFC 在页面布局中的应用有很多，比如清除浮动、防止 margin 重叠等。由于 BFC 本身的特性，它可以帮助我们解决一些布局上的难题。

12. 请解释一下 CSS 中的清浮动。

清除浮动（Clearfix）是一种在 CSS 中防止浮动元素影响父容器高度计算的技术。在浮动元素之后，为其父元素添加清除浮动的样式规则，可以让父元素正常地计算高度。

传统的清除浮动方法是在父元素的 CSS 中添加一个 clearfix 类，该类通过在选择器中声明 ::after 伪元素，并设置 clear:both 以清除浮动，如下所示：

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

这样，只需要给包含浮动元素的父容器添加 .clearfix 类即可清除浮动。

另外，还可以使用 CSS 中的其他清除浮动方法，比如给父元素设置 overflow: hidden 或者 display: table 等。这些方式都适用于不同的场景，开发者可以根据需要选择不同的方法。

13. 什么是 CSS Sprites？

CSS Sprites 是一种将多个小图标或图片组合成一个大图的技术，通过设置合适的 css 属性，来实现对每个小图标的显示与隐藏。这种技术可以减少网页的 HTTP 请求数量，从而提高网页的性能表现。

CSS Sprites 主要应用在网页制作中的图标、背景图片、按钮的制作以及视觉效果上。使用 CSS Sprites 的好处是减少网页的 HTTP 请求，浏览器可以快速下载并缓存一张合并后的图片，加速网页的加载。同时，使用 CSS 技术来显示别的图像，提高图片的下载速度，并可以动态的改变背景图像的位置。这样就可以在不使用 JavaScript 的情况下，实现一些简单的动画效果。

要实现 CSS Sprites，首先需要将多个小图标或图片裁剪并粘贴到一张大图中，然后通过设置 background-position 属性来指定具体显示哪一个小图标的范围。如下是一个 CSS Sprites 的示例：

.sprite {
  background-image: url(sprite.png);
}
.icon1 {
  background-position: 0px 0px;
  width: 16px;
  height: 16px;
}
.icon2 {
  background-position: -20px 0px;
  width: 16px;
  height: 16px;
}

在上面的示例中，.sprite 是一张合并过后的图片，其中包含两个小图标。.icon1 和 .icon2 分别是两个小图标的样式类，设置了不同的 background-position，从而可以分别显示不同的小图标。

14. 请解释一下初步渲染和重排。

在 Web 页面渲染的过程中，有两个重要的环节：初步渲染和重排。

初步渲染（Paint），也叫重绘，是指浏览器根据 DOM 树和 CSS 样式计算出每个元素的位置、大小、颜色等属性，并将内容绘制出来的过程。在初步渲染过程中，浏览器会去计算每个元素的位置和大小，绘制出页面的基本结构。这个过程一般很快，用户很快就能够看到页面的基本内容。

重排（Reflow），也叫回流，是指在页面渲染过程中，当 DOM 元素属性发生变化（如尺寸大小、位置、文本等）、窗口大小改变或者用户交互行为（如滚动页面、调整窗口大小等）时，浏览器需要重新计算并重新绘制页面的过程。因为页面的每个元素都需要重新计算和重新绘制，所以重排过程比较消耗性能，特别是在页面中包含很多大型元素的情况下，更容易产生性能问题。

在实际工作中，我们应该尽量减少重排的次数，可以采取一些措施来降低重排的次数，如避免频繁修改样式、尽可能在 DOM 树的末尾增加元素、使用 CSS 动画等。同时，可以使用开发者工具的 Performance 面板来检查页面的性能表现，找出页面的重排瓶颈点。

15. 什么是事件循环？

事件循环（Event Loop）是 JavaScript 运行时的一种机制，用于协调和处理浏览器发生的各种事件。它是一种执行模式，用于处理异步任务和事件回调。

在浏览器中，Javascript 解释器是单线程运行的。当脚本运行时，所有的代码都是按照顺序依次执行的。但是，有些任务需要更长时间才能完成，如果在代码运行时等待这些任务完成，会让页面失去响应，因此需要异步处理这些任务。而事件循环机制就是为了协调这些异步任务和事件回调的机制。

当 JavaScript 引擎在执行一段代码时，它会不断地检查事件队列中是否有新的事件或异步任务需要处理。如果有，就会按顺序将这些任务添加到执行栈中执行；如果执行栈中的任务都执行完毕了，就会继续检查事件队列是否有新的任务需要处理。这个不断的循环过程就是事件循环。每当事件循环处理完一次任务后，就会回到事件循环的起点继续检查事件队列。在浏览器环境中，事件源包括 DOM 事件、 XMLHttpRequest 请求、计时器等。

总之，事件循环是一种 JavaScript 引擎协调处理多个事件和异步任务的机制，使 JavaScript 引擎能够处理多个并发任务。

16. 什么是异步编程？常见的异步编程方案有哪些？

异步编程是一种编程范式，用于处理一些需要耗时操作的任务，如读取文件、网络请求等。在传统的同步编程中，每个任务都是按照顺序依次执行的，如果当前任务挂起等待某个操作的完成，线程会一直阻塞，这样会降低应用程序的性能。而在异步编程中，多个任务可以并发执行，并通过异步回调的方式来处理操作完成的事件。

常见的异步编程方案有以下几种：

回调函数（Callback）：回调函数是一种最常见的异步编程方式，即将任务完成后的处理函数作为参数传递给异步操作。异步操作完成后，调用回调函数来通知任务完成。
Promise：Promise 是 ECMAScript 6 引入的一种异步编程方式，它可以将异步操作转换为同步的方式进行处理。它有三种状态：Pending（进行中）、Fulfilled（已完成）和Rejected（已失败），当异步操作完成或者失败时，状态会发生相应的变化。
async/await：async/await 是 ES2017 引入的一种异步编程方式，它是一种基于 Promise 机制的语法糖。async/await 增强了异步代码的可读性和可维护性。
事件发布/订阅（Event Emitter/Subscriber）：事件发布/订阅模型是一种全局事件处理方式。当某个事件发生时，会自动触发相应的事件处理函数来处理事件，而无需手动处理。

总之，异步编程是一种提高程序性能的方式，在实际应用开发中，可以根据具体情况选择合适的异步编程方案。

17. 请列举一下你常用的前端开发工具和框架。

以下简单列举一些常用的前端开发工具和框架，实际请根据个人开发情况阐述。

开发工具：

Visual Studio Code：一个轻量级的、跨平台的开源代码编辑器，拥有强大的插件生态系统和丰富的功能，是前端开发中最受欢迎的编辑器之一。
Sublime Text：也是一款轻量级的跨平台代码编辑器，支持多种编程语言、插件和主题。
WebStorm：JetBrains 公司推出的一个功能强大的集成开发环境，具有智能代码提示、调试、测试等功能，适合开发大型项目。

框架：

Vue.js：一款轻量级的前端框架，采用组件化开发模式、MVVM 模式，具有双向数据绑定、虚拟 DOM、模板引擎等特点。
React：由 Facebook 推出的一个流行的前端框架，采用组件化开发模式、单向数据流模式，具有虚拟 DOM、高效的数据更新和组件复用等特点。
Angular：一个由 Google 推出的前端框架，采用组件化开发模式、MVVM 模式，具有强大的指令系统、依赖注入、路由管理等特点，适合开发大型项目。

以上列举的只是一部分，实际开发中需要根据项目需求和自己的偏好进行选择。

18. 请解释一下 MVC 架构。

MVC 架构（Model-View-Controller）是一种软件设计模式，用于组织 Web 应用程序的组件。MVC 架构将应用程序分为三个主要部分：模型（Model）、视图（View）和控制器（Controller），每个部分都各司其职，进行不同的任务，以实现良好的代码结构和可维护性。

模型（Model）：代表业务逻辑和数据，用于访问和更新应用程序的数据。它通常包含实现数据处理和持久化的方法，如数据库访问、网络请求等。
视图（View）：是用户界面的显示部分，负责将模型中的数据渲染成适当的格式以展示给用户。它通常包含HTML、CSS、JavaScript 等前端代码，用于呈现数据到用户界面。
控制器（Controller）：负责将用户的请求传递给模型或视图。它负责协调模型和视图的交互，并根据用户的请求进行适当的操作，比如数据验证、转换等。

MVC架构通过将应用程序分为模型、视图和控制器三个部分，实现了数据和逻辑的分离，使得每个组件都可以独立开发和维护。同时，MVC架构对代码的重用和扩展提供了支持，从而提高了代码的可读性和可维护性。许多常见的Web框架都是基于MVC架构构建的，如Django, Ruby on Rails等。

19. 什么是 MVVM？请举例说明。

MVVM 是 Model-View-ViewModel 的缩写，是一种前端应用程序的架构模式。它将应用程序分为三个部分：视图（View）、模型（Model）和视图模型（ViewModel）。

视图（View）：负责显示用户界面，通常由 HTML、CSS 和 JavaScript 编写。
模型（Model）：表示后端数据或者应用程序的数据对象和业务逻辑。
视图模型（ViewModel）：是连接模型和视图的桥梁，管理视图显示和用户交互逻辑，同时将视图数据反映到模型中，使数据发生变化时，视图也跟着变化。

在 MVVM 模式下，视图和模型是相互独立的，而视图模型则充当了视图和模型之间的桥梁。视图模型实现视图和模型之间的双向数据绑定和状态同步，以响应模型的变化，同时也能够处理视图接收的用户输入和交互事件等。

一个经典的 MVVM 框架是 Vue.js，其中视图用 Vue 组件表示，模型通常是一个 JavaScript 对象，而视图模型则是一个包含各种函数和属性的 JavaScript 对象，用于控制模型和视图之间的数据流动。

其中，Vue.js 提供的双向数据绑定和虚拟 DOM 等特性，可以方便地实现视图和视图模型之间的相互绑定。举个简单的例子，当用户在浏览器中填写了一个表单，Vue.js 的视图模型会自动更新数据模型，并且数据的变化会自动同步到 HTML 中相应的位置，从而实现了视图和模型之间的实时同步和更新。

20. 请解释一下 Redux 的使用场景和核心概念。

Redux 是一个状态管理库，它的主要目的是管理一个应用中的所有状态，并且使得这些状态的变化可以被预期和追踪。Redux 的使用场景主要是针对大型、复杂、数据驱动的 Web 应用，通常需要处理大量的状态数据。

Redux 的核心概念包括：

State：Redux 应用的所有状态存储在一个对象树中，被称为 State。State 是只读的，只能通过 dispatch 一个 action 来更新应用的状态。
Action：Action 是描述应用发生了什么的对象。Action 本质上是一个普通的 JavaScript 对象，它必须有一个 type 属性来描述它的类型。
Reducer：Reducer 是一个纯函数，它接受应用的当前状态（State）和一个 action，返回一个新的状态。Reducer 告诉应用如何响应一个 action，并且更新应用的状态。
Store：Store 是应用的状态管理中心。它包含了应用的所有状态（State）和应用的唯一 reducer。Store 允许你通过 dispatch 一个 action 来更新状态，并且允许你通过 subscribe 方法来注册一个回调函数，当状态发生变化时，它会自动调用这些函数。
Middleware：Middleware 是 Redux 中的一种机制，它可以包装 dispatch 的方法，从而对 dispatch 的过程进行拦截和处理。Middleware 在 Redux 中的作用是处理副作用（Side Effect），如异步请求、日志记录、错误处理等。

总之，Redux 的主要使用场景是管理一个应用中的所有状态，并且使得这些状态的变化可以被预期和追踪，Redux 的核心概念包括 State、Action、Reducer、Store 和 Middleware。

【利用AI刷面试题】50道前端基础面试题（二）https://developer.aliyun.com/article/1426059

【利用AI刷面试题】50道前端基础面试题（一）