关于SVG和CANVAS,下面陈述正确的有?
A.SVG做动画性能要优于CANVAS
B.CANVAS做动画性能要优于SVG
C. SVG产生的dom数量比CANVAS要少
D. CANVAS产生的dom数量比SVG要少
E.CANVAS可以使用css设置动画样式
F. SVG可以使用css设置动画样式
解答:这倒题我避开了所有正确答案,所以这个就看大神解析了。
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中,每个被绘制的图形均被视为对象。
如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。
如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。
抛开这个题,开始学习:
首先要知道SVG和CANVAS是什么?
什么是SVG?
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
什么事CANVAS
元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.
标签只是图形容器,您必须使用脚本来绘制图形。
你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。
区别:
Canvas 与 SVG 的比较
下表列出了 canvas 与 SVG 之间的一些不同之处。
Canvas | SVG |
---|---|
依赖分辨率 | 不依赖分辨率 |
不支持事件处理器 | 支持事件处理器 |
弱的文本渲染能力 | 最适合带有大型渲染区域的应用程序(比如谷歌地图) |
能够以 .png 或 .jpg 格式保存结果图像 | 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) |
最适合图像密集型的游戏,其中的许多对象会被频繁重绘 | 不适合游戏应用 |
8.下述片段中,el指向的dom是? ( )
html:
<div id=”foo”>
<p id=”foo”></p>
</div>
javascript:
var el = document.getElementById('foo');
解答:这个题将代码跑一下结果是el指向的是div元素
我的理解是取id为foo的元素是从上往下取
9.在ES6中提供了___用于二进制的操作。
解答:这个题ES6概念题,但不会做,所以最近看一看ES6,以下是大神解析:
ArrayBuffer: 连续的内存缓冲区,用于实际储存各种类型的数组数据
Typed Array View类:比如Int32Array、Uint8Array、Float32Array等,表示一个特定类型的数组
DataView: 工具类,提供getUint8、setFloat32等工具方法修改ArrayBuffer不同位置的数据值
10.请写出HTML5新增的布局标签
解答:这是HTML5概念题,面试有时会问的,具体的网上搜一下教程都有说明
答案:header footer article nav aside section menu figure hgroup
11.请使用CSS3画出一个线性渐变,渐变的方向是从右上角到左下角,起点颜色是从白色到黑色,请写出标准的写法
解答:考察CSS3渐变属性的使用
语法:
background: linear-gradient(direction, color-stop1, color-stop2, ...);
方法:linear-gradient(to left bottom,white,black);
12.Doctype 严格模式与混杂模式的区别在哪里
解答:牛客网前端面试题集合有详细答案
答案:
DOCTYPE标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档
严格模式的排版和JS 运行以浏览器的最高标准执行
混杂模式:页面以向后兼容的方式显示,模拟老式浏览器的行为防止站点无法运行
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。