欢聚时代2017校招笔试题目（web前端类）个人解读（二）

关于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:

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不存在或格式不正确会导致文档以混杂模式呈现。