前端面试题每日一学_6

时间:2024-07-16 14:39:25 作者: 字数:8316字

今日一题:

下面的CSS代码中,定义了一个帧动画,请问该帧动画能否正常流畅的执行?
@keyframesmove {50% {/* 改变自定义变量的值 */--x:100px;/* 改变元素的背景颜色 并使用!important */background: yellow!important;}}.d{/* 定义一个自定义变量 */--x:0px;width:100px;height:100px;/* 初始背景颜色red */background: red;/* 自定义变量决定元素的偏移量 */transform:translateX(var(--x));/* 调用动画 */animation: move2sinfinite;}

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

今日面试题:

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

① class

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

② id

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

③ style

为元素设置行内样式。

④ title

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

⑤ style="line-height: inherit;orphans: 4;margin-top: 0.8em;margin-bottom: 0.8em;white-space: pre-wrap;caret-color: rgb(51, 51, 51);color: rgb(51, 51, 51);font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, "Segoe UI Emoji", sans-serif;font-size: 16px;letter-spacing: normal;text-align: start;background-color: rgb(255, 255, 255);">为元素设置自定义属性,存储元素特定数据,数据可在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。

functionisCanvasSupported(){constelem =document.createElement('canvas');return!!(elem.getContext && elem.getContext('2d'));}

SVG:是一种标准的图形格式,现代浏览器和大多数移动设备都支持。

functionisSVGSupported(){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表示图形颜色。

<svgwidth="100"height="100"onclick="alert('Circle clicked!')"><circlecx="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属性指定圆心和半径。

<imgsrc="../assets/circle2.jpg"style="width: 100px;height: 100px;"usemap="#circlemap"alt="一个包含圆形的图片,宽高为100*100"><mapname="circlemap"><areashape="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;属性将会被忽略,执行动画过程中元素的背景颜色不会发生改变。

② 关键帧中的自定义属性

CSS的自定义属性是指以--开头的声明的变量,其可以通过var(--属性名)的形式调用。自定义属性可以在关键帧中使用,可以被正常渲染。

如果在关键帧中通过修改自定义属性的值,从而修改元素的样式,虽然样式会正常发生改变,但是无法实现平滑的动画效果。因为CSS 自定义属性的值对于浏览器来说相当于一个字符串,字符串的变化属于是不连贯的属性,浏览器无法对其进行插值计算,无法补全中间的关键帧,也就无法实现平滑的动画效果。