HTML5+CSS3面试题：（第三天）

目录

9.Canvas和SVG有什么区别？

10.Location对象的属性和方法

11.Navigator对象是做什么的?

12.History对象的属性和方法?

---

9.Canvas和SVG有什么区别？

• canvas 输出的是⼀整幅画布,就像⼀张图⽚⼀样，放⼤会失真或者锯⻮。
• svg 输出的图形是⽮量图形，后期可以修改参数来⾃由放⼤缩⼩，不会失真和锯⻮。

绘制出来的每⼀个图形的元素都是独⽴的 DOM 节点，能够⽅便的绑定事件或⽤来修 。

补充：

SVG是用来描述XML中2D图形的语言，Canvas借助JavaScript动态描绘2D图形

SVG可支持事件处理程序而Canvas不支持

SVG中属性改变时，浏览器可以重新呈现它，适用于矢量图，而Canvas不可以，更适合视频游戏等

Canvas可以很好的绘制像素，用于保存结果为png或者gif,可做为API容器

Canvas取决于分辨率。SVG与分辨率无关

SVG具有更好的文本渲染，而Canvas不能很好的渲染，渲染中的SVG可能比Canvas慢，特别是应用了大量的DOM

画布更适合渲染较小的区域。SVG渲染更好的更大区域。

10.Location对象的属性和方法

属性

属性	描述
origin	返回当前网页的域名(比如http://192.168.1.12:8092)
host	返回一个URL的主机名和端口
hostname	返回URL的主机名
port	返回一个URL服务器使用的端口号
pathname	返回的URL路径名。
protocol	返回一个URL协议
hash	返回从井号 (#) 开始的 URL（锚）
href	返回完整的URL
search	返回从问号 (?) 开始的 URL（查询部分）

方法

属性	描述
replace()	用新的文档替换当前文档。替换当前页面，不记录历史，不可以后退
reload()	重新加载当前文档。相当于点击刷新按钮刷新F5，如果参数为true，相当于ctrl+F5强制刷新
assign()	加载新的文档。跟href一样，可以跳转页面

11.Navigator对象是做什么的?

window.navigator 接口表示用户代理的状态和标识。

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。

Navigator.onLine网络状态

onLine 属性是一个只读的布尔值，声明了系统是否处于脱机模式，如果系统属于脱机状态，则返回 false，否则返回 true。

HTML5 给我们提供了2个事件  online  和 offline，给window绑定事件--检测网络开始状态

12.History对象的属性和方法?

属性

length  返回浏览器历史列表中的 URL 数量。

方法

back()  加载 history 列表中的前一个 URL。

forward()  加载 history 列表中的下一个 URL。

go()  加载 history 列表中的某个具体页面。