(18) HTML面试题集锦2

一 HTML

1.H5新特性

1.H5的新特性有哪些

1.画布(Canvas) API

2.地理(Geolocation) API

3.音频、视频API(audio,video)

4.localStorage和sessionStorage

5.webworker, websocket

6.header,nav,footer,aside,article,section

7.web worker是运行在浏览器后台的js程序，他不影响主程序的运行，是另开的一个js线程，可以用这个线程执行复杂的数据操作，然后把操作结果通过postMessage传递给主线程，这样在进行复杂且耗时的操作时就不会阻塞主线程了。

2.两种实现前端路由的方式

HTML5 History两个新增的API：history.pushState 和 history.replaceState，两个 API 都会操作浏览器的历史记录，而不会引起页面的刷新。

 

Hash就是url 中看到 # ,我们需要一个根据监听哈希变化触发的事件( hashchange) 事件。我们用 window.location 处理哈希的改变时不会重新渲染页面，而是当作新页面加到历史记录中，这样我们跳转页面就可以在 hashchange 事件中注册 ajax 从而改变页面内容。 可以为hash的改变添加监听事件：

 

window.addEventListener("hashchange", funcRef, false)

 

 

优点

从性能和用户体验的层面来比较的话，后端路由每次访问一个新页面的时候都要向服务器发送请求，然后服务器再响应请求，这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来说会有相当大的提升。

 

前端路由的优点有很多，比如页面持久性，像大部分音乐网站，你都可以在播放歌曲的同时，跳转到别的页面而音乐没有中断，再比如前后端彻底分离。 开发一个前端路由，主要考虑到页面的可插拔、页面的生命周期、内存管理等。

 

缺点

使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存。

 

History interface提供了两个新的方法：pushState(), replaceState()使得我们可以对浏览器历史记录栈进行修改：

 

window.history.pushState(stateObject, title, URL)

window.history.replaceState(stateObject, title, URL)

3.websocket

WebSocket 使用ws或wss协议，Websocket是一个持久化的协议，相对于HTTP这种非持久的协议来说。WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻，相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信，因为Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允许跨域通信。

 

// 创建一个Socket实例

var socket = new WebSocket('ws://localhost:8080');

// 打开Socket

socket.onopen = function(event) {

  // 发送一个初始化消息

  socket.send('I am the client and I\'m listening!');

  // 监听消息

  socket.onmessage = function(event) {

    cons