前端面试题(HTML)更新_前端面试题audio-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_48930111/article/details/112531366

本文介绍了HTML5的新特性，如画布、地理、音频视频等API，以及localStorage和sessionStorage、webworker和websocket等。还探讨了两种前端路由实现方式、WebSocket兼容性等问题，涉及浏览器渲染原理、标签作用、性能优化等多方面前端知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、H5的新特性

1）画布(Canvas) API

http://www.wxappclub.com/doc/1-31

HTML的 <canvas>元素提供了一个空白绘图区域，可以使用 APIs（比如 Canvas 2D 或 WebGL）来绘制图形。<canvas />组件只能提供图像显示容器，不具备绘制能力，所以还需要使用脚本来完成实际的绘图任务，交由以下三个canvas API完成。

巧妙运用canvas结合css3新增的动画transition transform animation属性，能实现各种图画效果，以及3D视图，大部分页游也是基于此开发的。

wx.createContext()创建并返回一个context上下文对象，用于记录绘制操作，并返回actions数组，交给wx.drawCanvas(OBJECT)绑定<canvas />组件，并将actions绘制在<canvas />组件上；如果想将图像保存为图片，调用wx.canvasToTempFilePath(OBJECT)接口。

2）地理(Geolocation) API

https://www.cnblogs.com/qiaoxinming/p/6576258.html

Geolocation API（地理位置应用程序接口）提供了一个可以准确知道浏览器用户当前位置的方法。

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

https://blog.youkuaiyun.com/quhongqiang/article/details/79067483

video的使用方法：

autoplay:自动播放、controls:视频操作控件、muted:静音、loop:循环播放、poster:加载完成前显示的图片

<video autoplay="autoplay" controls="controls" width="800" muted="muted" loop="loop" poster="/images/w3html5.gif"></video>

audio的使用方法：

autoplay:自动播放、controls:视频操作控件、muted:静音、loop:循环播放

<audio controls="controls" autoplay="autoplay" muted="muted" loop="loop"></audio>

视频/音频共同特性

<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。你的浏览器不支持video标签，可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

4）localStorage和sessionStorage

https://zhuanlan.zhihu.com/p/92947594

html5 中的 web Storage 包括了两种存储方式：sessionStorage 和 localStorage

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；可以用于存储该浏览器对该页面的访问次数

sessionStorage 数据在当前浏览器窗口关闭后自动删除。进行页面传值

本地存储是由cookie衍生的，目的是在浏览器本地预留一个较大的空间进行存储数据缓存等，对优化网站性能有很大帮助，本地存储分为session storage和local storage 。手机端由于local的存在能节约大量流量和加载速度，不再重复加载请求。而且local自带了setItem() getItem() remove() clear()等方法，使用起来极其方便，但是缓存需要手动清除，否则永久存在，空间大小约为5MB；session则只会在当前会话页面存在，会随着页面的关闭而销毁，用法和local一样

5）webworker, websocket

https://www.cnblogs.com/yfrs/p/work_ws.html

Web Worker让JS有了多线程的能力，可以将复杂耗时的操作都交付给Worker线程处理。WebSocket让web端与服务端维持一个有效的长连接，实现服务端主动推送数据。将二者一结合，业务系统信息流转通知功能完全就可以剥离出来。web worker是运行在浏览器后台的js程序，他不影响主程序的运行，是另开的一个js线程，可以用这个线程执行复杂的数据操作，然后把操作结果通过postMessage传递给主线程，这样在进行复杂且耗时的操作时就不会阻塞主线程了。

目前除了通过ajax的请求模式实现后台前端的数据交互，有没有一种其他方式实现后台数据更新自动推送到前端界面？按目前我们常规的操作是，如果需要监听后台数据变动并及时渲染给用户界面，采用的是轮询模式，但是这样会造成服务器压力和流量浪费。web socket就是为了解决这一尴尬情况提出的，虽然这一技术还是在草案阶段，但是前景不言而预。web socket是一种基于TCP的协议，实现了服务端与客户端的全双工通讯。

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

https://www.cnblogs.com/zhaohongcheng/p/11373360.html

<section>：在 web 页面应用中，该元素也可以用于区域的章节描述。

<header>：页面主体上的头部， header 元素往往在一对 body 元素中。

<footer>：页面的底部（页脚），通常会标出网站的相关信息。

<nav>：专门用于菜单导航、链接导航的元素，是 navigator 的缩写。

<article>：用于表现一篇文章的主体内容，一般为文字集中显示的区域。

<aside>：用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。