关于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);
TIM截图20170906174709.png
12.Doctype 严格模式与混杂模式的区别在哪里
解答：牛客网前端面试题集合有详细答案
答案：
DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档
严格模式的排版和JS 运行以浏览器的最高标准执行
混杂模式：页面以向后兼容的方式显示，模拟老式浏览器的行为防止站点无法运行
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
网友评论