前端面试题每日一学

前端面试题每日一学_6

今日一题：

下面的CSS代码中，定义了一个帧动画，请问该帧动画能否正常流畅的执行？

@keyframes move {50% {/* 改变自定义变量的值 */--x: 100px;/* 改变元素的背景颜色 并使用!important */background: yellow !important;}
}
.d {/* 定义一个自定义变量 */--x: 0px;width: 100px;height: 100px;/* 初始背景颜色red */background: red;/* 自定义变量决定元素的偏移量 */transform: translateX(var(--x));/* 调用动画 */animation: move 2s infinite;
}

答案和解析可在文章底部查看。

今日面试题：

1、常见的HTML全局属性 ( global attribute ) 有哪些？

① class

为元素设置类名，多个类名之间以空格分隔。

② id

为元素设置唯一标识符id，该id要求在当前文档内唯一。

③ style

为元素设置行内样式。

④ title

为元素设置内容的相关信息文本，指针悬浮时会显示。可用于显示因为字数过多，被截取的文本。

⑤ data-*

为元素设置自定义属性，存储元素特定数据，数据可在JS中读取。

⑥ draggable

为元素设置是否可拖拽，即是否可以使用Drag and Drop API。

⑦ tabindex

为元素设置是否可获取焦点，值为一个整数，如果值为负数，表示元素可聚焦，但不能通过顺序键盘导航到达；值为0，表示元素可聚焦，且可以通过顺序键盘导航到达，但具体顺序取默认顺序；值为正数，表示元素可以可聚焦，且可以通过顺序键盘导航到达，具体顺序取决于值的相对大小顺序。如果多个元素的值相同，则顺序取决于元素在文档中的先后顺序。

⑧ autofocus

为元素设置在页面加载时自动聚焦。

⑨ hidden、lang、contenteditable等其他全局属性。

2、谈谈Canvas和SVG两者的区别

① 基本概念

Canvas：是HTML5新增用于绘制2D图形的API，可以通过JS操作相关的API，在对应的<canvas>元素上，绘制图形。输出的是标量图形，在被放大后会出现失真和锯齿。

SVG：是一种标准的图形格式，基于XML的矢量图形格式，通过在 HTML 中编写 SVG 代码，绘制图形。输出的图像能够被无限放大而不失真或降低质量。

② 绘制方式

Canvas：使用的是基于像素绘制的方式，每次操作都会直接修改画布上的像素，不保留绘制图形的结构信息，只保留最终的像素结果。也就是说如果要修改图像上的某一块区域，需要重新绘制整个画布，因为没有保留该区域的独立信息。

SVG：使用的是矢量绘制的方式，矢量图形通过数学公式描述图形的形状和位置，每个图形元素都是独立的对象，保存在 DOM 树中，可以通过 CSS 和 JS 对单独的图形元素进行操作和修改。

③ 绘制性能

Canvas：由于是基于像素的绘制方式，修改图形时直接操作像素，因此在复杂的动画和大量图形操作等高频率重绘的场景下，性能较好。

SVG：在复杂的动画和大量图形操作等高频率重绘的场景下，性能不如Canvas，因为每个图形元素都是独立的 DOM 节点，而操作DOM需要一定的性能开销。但在绘制静态图形、无需频繁更新图形时，性能较好。

④ 操作复杂性

Canvas：提供了一系列API，每次更新图形，都需要通过JS调用API来操作重绘，越复杂的图形，越需要编写复杂的JS代码。而且只能对整体图形进行重绘，无法对单个图形元素进行操作。

SVG：通过 XML 描述图形，每次更新图形，可以直接在修改相应的SVG代码，语法相对简单，并且可以通过CSS和JS直接对单个图形元素进行操作。

⑤ 可交互性

Canvas：只保留最终的像素结果，不存在单独的图形对象，无法只对单个图形元素进行交互、事件监听等操作。可以结合图形坐标和鼠标点击坐标，实现一定的交互。

SVG：每个图形元素都是独立的对象，独立的DOM节点，可以直接为其添加事件监听器，与元素进行交互。

⑥ 兼容性

Canvas：是HTML5标准的一部分，现代浏览器和大多数移动设备都支持。可以通过 JavaScript 检测当前浏览器是否支持 Canvas。

function isCanvasSupported() {const elem = document.createElement('canvas');return !!(elem.getContext && elem.getContext('2d'));
}

SVG：是一种标准的图形格式，现代浏览器和大多数移动设备都支持。可以通过 JavaScript 检测当前浏览器是否支持 SVG。

function isSVGSupported() {return !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect;
}

⑦ 适用场景

Canvas：适用于需要高性能绘图的场景，如游戏开发、实时数据可视化、大量动画效果等。

SVG：适用于需要高质量图形和交互的场景，如图标、图表、简单动画、地图等。

3、页面绘制一个可点击的圆形区域的方法有哪些？

① border-radius

border-radius 用于设置元素的圆角，如果元素的四个圆角的值为元素宽高的一半，则元素区域会变成圆形。

.d { width: 100px;height: 100px;border-radius: 50%;background-color: green;
}

② SVG

SVG提供了一个<circle>元素，用于创建圆形。(cx, cy)表示圆心的坐标，r 表示半径，fill表示图形颜色。

<svg width="100" height="100" onclick="alert('Circle clicked!')"><circle cx="50" cy="50" r="50" fill="green" style="cursor: pointer;" />
</svg>

③ `<map>`和`<area>`

<map> 和 <area> 标签是 HTML 中用于创建图像映射（Image Map）的标签。通过与<img> 图像标签结合使用，允许在一张图片上定义一个或多个可点击的区域。

<map>的name属性指定图像映射的名称，该名称要与目标图像的usemap属性相同。

<area> 的shape属性指定可点击区域的形状，coords属性指定圆心和半径。

<img src="../assets/circle2.jpg" style="width: 100px;height: 100px;" usemap="#circlemap" alt="一个包含圆形的图片，宽高为100*100">
<map name="circlemap"><area shape="circle" coords="50,50,50" href="javascript:void(0);" onclick="alert('Circle clicked!')" alt="Circle">
</map>

今日一题答案：不能

实际动画效果：

在这里插入图片描述

解析：

该题目主要考察的是对CSS中帧动画中@keyframes 规则的掌握情况。考察的点有两个：关键帧中的!important和关键帧中的自定义属性。

① 关键帧中的`!important`

CSS规范中明确规定在 @keyframes 的关键帧中，如果在样式属性后面使用!important，将会导致该属性被忽略，不起作用。因为关键帧动画的工作机制与普通的CSS样式规则不同，关键帧在动画执行时会被浏览器逐帧计算和渲染，为了确保动画的平滑和一致性，浏览器需要完全控制这些关键帧的样式计算过程。

因此本题代码中的background: yellow !important; 属性将会被忽略，执行动画过程中元素的背景颜色不会发生改变。