真实前端面试题（北*报）

我代码真的菜
258 阅读10分钟

1.rem是什么

假设你有以下的 HTML 结构：

htmlCopy code
<!DOCTYPE html>
<html>
<head>
  <style>
    html {
      font-size: 16px; /* 根元素字体大小为 16像素 */
    }
    .container {
      font-size: 1.5em; /* 相对于父元素的字体大小，1.5倍于根元素字体大小 */
    }
    .box {
      font-size: 1.5rem; /* 相对于根元素的字体大小，1.5倍于根元素字体大小 */
    }
  </style>
</head>
<body>
  <div class="container">
    <p class="box">Hello, World!</p>
  </div>
</body>
</html>

在这个例子中，我们有一个包含两个 <div> 元素的 HTML 结构。其中一个元素具有 .container 类，而另一个元素具有 .box 类。我们分别使用了 "em" 和 "rem" 来设置它们的字体大小。

  1. "em" 的示例：

    • .container 类的字体大小设置为 1.5em，这意味着它的字体大小将是其父元素的字体大小的1.5倍。父元素是 <body>，而 <body> 的字体大小由根元素 <html> 的字体大小决定。
    • 根元素 <html> 的字体大小是 16px，因此 .container 的字体大小将是 16px * 1.5 = 24px。
    • .box 类的字体大小没有依赖于父元素的字体大小，而是相对于根元素 <html> 的字体大小进行设置。
    • 因此，.box 的字体大小将始终是 16px * 1.5 = 24px，与其父元素无关。

  2. "rem" 的示例：

    • .container 类的字体大小设置为 1.5rem，这意味着它的字体大小将是相对于根元素 <html> 的字体大小的1.5倍。
    • 由于根元素 <html> 的字体大小是 16px，因此 .container 的字体大小将是 16px * 1.5 = 24px。
    • 同样，.box 类的字体大小也是相对于根元素 <html> 的字体大小进行设置，因此它的字体大小也将是 24px，与其父元素无关。

总结：

  • "em" 单位是相对于父元素的字体大小进行计算的，而 "rem" 单位是相对于根元素的字体大小进行计算的。
  • 当使用 "em" 时，字体大小会继承并受到父元素的影响，而当使用 "rem" 时，字体大小不会受到父元素的影响，只受根元素的影响。

2.node.js用过哪些框架

Node.js是一个非常灵活的运行时环境，允许开发人员使用各种框架和库来构建应用程序。以下是一些常见的Node.js框架，用于构建不同类型的应用程序：

  1. Express.js：Express.js是最流行的Node.js框架之一，用于构建Web应用程序和API。它提供了简化的路由、中间件支持和易于使用的API，使得构建Web应用变得非常快速和简便。
  2. Koa.js：Koa.js是由Express的原作者创建的框架，它使用了ES6的异步/await语法，更加轻量级和模块化。Koa强调中间件的洁净和简洁。
  3. Nest.js：Nest.js是一个用于构建可伸缩、模块化和易于维护的Node.js应用程序的框架。它使用TypeScript编写，提供了强大的依赖注入、模块系统和现代化的开发工具。
  4. Hapi.js：Hapi.js是一个可扩展的框架，用于构建Web应用和API。它提供了强大的插件系统，用于添加各种功能，如身份验证、日志记录等。
  5. Meteor.js：Meteor.js是一个全栈JavaScript框架，用于构建现代Web应用。它包括前端和后端开发，提供了实时数据传输和自动数据同步等功能。
  6. Adonis.js：Adonis.js是一个Node.js框架，专注于构建具有强大后端功能的Web应用程序。它提供了ORM、身份验证、路由等工具，使得开发Web应用更加高效。
  7. Sails.js：Sails.js是一个MVC（Model-View-Controller）框架，用于构建数据驱动的Web应用程序。它支持WebSocket和实时通信。
  8. LoopBack：LoopBack是一个可生成REST API的框架，它可以与各种数据源集成，包括数据库、SOAP、REST等。它特别适用于构建API后端。
  9. Feathers.js：Feathers.js是一个用于构建实时应用程序的微服务框架。它提供了可扩展的架构、WebSocket支持和多种数据库的适配器。

3.说说css3动画的属性

当涉及到 CSS3 动画属性时，以下是一些具体的示例以及它们的应用：

  1. animation-name 的示例：

    @keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.slide-in-animation {
  animation-name: slide-in;
}

    这个示例定义了一个名为 "slide-in" 的关键帧动画，将元素从左边滑入屏幕。然后，通过将 animation-name 设置为 "slide-in"，您可以将这个动画应用于具有类名 "slide-in-animation" 的元素。

  2. animation-duration 和 animation-timing-function 的示例：

    .fade-in {
  animation-name: fade-in;
  animation-duration: 2s;
  animation-timing-function: ease-out;
}

    这个示例将一个名为 "fade-in" 的关键帧动画应用于具有类名 "fade-in" 的元素。动画持续时间为2秒，时间函数为 "ease-out"，这意味着动画将在2秒内逐渐淡入，并且结束时会减缓。

  3. animation-delay 的示例：

    .delayed-fade-in {
  animation-name: fade-in;
  animation-duration: 1s;
  animation-delay: 3s;
}

    这个示例将 "fade-in" 动画应用于具有类名 "delayed-fade-in" 的元素。动画在3秒后开始播放，持续1秒，从而在页面加载后3秒才会淡入。

  4. animation-iteration-count 和 animation-direction 的示例：

    .bounce {
  animation-name: bounce;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

    这个示例将一个名为 "bounce" 的关键帧动画应用于具有类名 "bounce" 的元素。动画持续时间为0.5秒，设置为无限循环 (infinite)，并且在每次迭代之后反向播放 (alternate)，从而实现元素的来回弹跳效果。

这些示例只是展示了如何使用这些 CSS3 动画属性的一小部分。您可以根据需要组合和调整这些属性的值，以创建各种不同的动画效果，使您的网页更具吸引力和互动性。

4.canvas是否用过，使用场景

是的，Canvas是HTML5提供的一个用于绘制图形的标准。它可以用于在网页上创建各种图形、动画和交互性元素，适用于多种使用场景，包括但不限于：

  1. 绘制图形和图表：Canvas可用于创建各种图形，如线条、矩形、圆形、曲线等，以及绘制实时图表和数据可视化。
  2. 2D游戏开发：Canvas是创建2D游戏的强大工具，游戏开发者可以使用它绘制游戏场景、角色、粒子效果等。
  3. 图像编辑器：许多在线图像编辑器使用Canvas来实现图像编辑功能，如裁剪、涂鸦、添加文本等。
  4. 动画效果：Canvas可用于创建动画，通过在Canvas上不断绘制帧来实现动画效果，这对于创建轮播图、动画广告等非常有用。
  5. 交互性应用：您可以使用Canvas创建具有交互性的应用程序，如绘图工具、拼图游戏、涂鸦板等。
  6. 数据可视化：Canvas对于创建数据可视化图表、图形和仪表盘非常有用，例如柱状图、饼图、雷达图等。
  7. 地图应用：在线地图应用程序通常使用Canvas来呈现地图、标记点和交互元素。
  8. 虚拟现实（VR）和增强现实（AR） ：一些VR和AR应用程序使用Canvas来呈现虚拟场景和对象。
  9. 绘制工具：Canvas可以用于创建在线绘图工具，用户可以在其中绘制、涂鸦和编辑图形。
  10. 模拟器和模拟：一些教育和培训应用使用Canvas来创建交互式模拟器和模拟。

Canvas是一个强大的工具，可以通过JavaScript来控制，允许开发者实现高度定制的图形和交互性效果。然而，需要注意的是，Canvas是基于像素的，不支持文本选择和屏幕阅读器，因此在某些情况下，使用HTML和CSS来实现类似的效果可能更为合适。 当使用Canvas时，让我们以一个简单的绘制图形的例子来说明。在这个例子中，我们将使用Canvas绘制一个简单的彩虹。

HTML 结构：

<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <canvas id="rainbow" width="400" height="200"></canvas>
  <script src="rainbow.js"></script>
</body>
</html>

JavaScript 文件（rainbow.js）：


// 获取Canvas元素和上下文
var canvas = document.getElementById("rainbow");
var context = canvas.getContext("2d");

// 创建彩虹的颜色数组
var rainbowColors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];

// 设置彩虹的半径
var radius = Math.min(canvas.width, canvas.height) / 2;

// 设置中心点
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;

// 计算每个扇形的角度
var angle = (2 * Math.PI) / rainbowColors.length;

// 绘制彩虹
for (var i = 0; i < rainbowColors.length; i++) {
  // 计算每个扇形的起始角度和结束角度
  var startAngle = i * angle;
  var endAngle = (i + 1) * angle;

  // 绘制扇形
  context.beginPath();
  context.moveTo(centerX, centerY);
  context.arc(centerX, centerY, radius, startAngle, endAngle);
  context.closePath();

  // 填充扇形颜色
  context.fillStyle = rainbowColors[i];
  context.fill();
}

// 绘制彩虹的边框
context.lineWidth = 2;
context.strokeStyle = "black";
context.stroke();

这个例子中，我们使用了HTML5的Canvas元素来绘制一个彩虹。我们首先获取Canvas元素和上下文，然后定义了彩虹的颜色数组、半径、中心点和每个扇形的角度。接下来，我们使用for循环来绘制彩虹的每个扇形，计算每个扇形的起始角度和结束角度，并使用arc方法绘制扇形。最后，我们填充每个扇形的颜色，绘制彩虹的边框。

这只是Canvas的一个简单示例，它可以用于创建更复杂的图形和动画。Canvas提供了强大的绘图能力，允许开发者实现各种视觉效果和交互性元素。

5.什么是混合式app

混合式移动应用（Hybrid Mobile App）是一种结合了Web技术（通常是HTML、CSS和JavaScript）和原生移动应用开发的方法，用于构建跨平台的移动应用程序。混合式应用程序的主要特点是它们在原生应用的外壳（通常是一个WebView组件）中运行，同时使用Web技术来渲染应用的用户界面和实现应用的功能。

以下是混合式移动应用的一些关键特点和组成部分：

  1. WebView：混合式应用程序在原生应用中包含一个内置的WebView组件，它充当了应用程序的容器。WebView允许运行Web内容（HTML、CSS和JavaScript）并将其呈现为移动应用的一部分。
  2. Web技术：混合式应用程序使用Web技术来构建用户界面和实现应用的功能。这通常包括HTML用于页面结构、CSS用于样式设计，以及JavaScript用于应用逻辑和交互性。
  3. 访问原生功能：通过使用特定的插件或桥接，混合式应用程序可以访问设备的原生功能，如相机、地理位置、文件系统等。这使得开发人员能够利用设备的功能来创建更丰富的应用程序体验。
  4. 跨平台：混合式应用程序通常具有跨平台性质，这意味着它们可以在多个移动操作系统上运行，例如iOS和Android。这是因为大部分应用的代码是基于Web技术编写的，只需要少量的平台特定代码。
  5. 单一代码库：混合式应用程序通常使用单一代码库，这意味着开发人员可以使用相同的代码和技能集来开发应用的不同版本，而不必为每个平台编写完全不同的代码。
  6. 打包和发布：混合式应用程序需要将Web内容打包到原生应用的外壳中，并通过应用商店（如App Store和Google Play）分发给用户。

一些流行的混合式移动应用开发框架包括Apache Cordova（以前称为PhoneGap）、Ionic、React Native（虽然它更倾向于原生开发，但也可以使用Web技术进行混合式开发）、Flutter（虽然它主要用于原生开发，但也允许混合式开发）等。

混合式应用程序的优势包括跨平台性、较低的开发成本和能够共享大部分代码库，但与原生应用程序相比，它们可能在性能和访问设备功能方面有一些限制。选择混合式应用程序开发与原生开发取决于项目需求、开发资源和目标平台。

avatar
文章
阅读
粉丝