H5新特性面试题及答案（实战版）.docxVIP

H5新特性面试题及答案（实战版）

一、基础必问（考察核心特性认知）

题目：H5相比HTML4，核心改进点有哪些？至少说3个实际开发中常用的

答案：①语义化标签（headernavarticle等），替代大量div，提升代码可读性和SEO；②原生多媒体支持（audiovideo），无需依赖Flash；③本地存储（localStorage/sessionStorage），解决Cookie存储量小（4KB）的问题；④表单新类型（inputtype=date/email/number），减少前端验证代码；⑤Canvas绘图，支持原生图形绘制。

题目：section和article的区别是什么？实际开发中怎么选？

答案：核心区别是「独立性」——article是独立完整的内容（比如一篇文章、一条评论、一个商品卡片），单独拿出来也有意义；section是内容区块划分（比如页面的“新闻列表区”“联系我们区”），用于组织相关但不独立的内容。

实战选择：如果内容能“复制到其他平台仍成立”，用article；如果只是页面的一个功能块，用section。

题目：localStorage、sessionStorage、Cookie的区别，分别用在什么场景？

答案：

特性

localStorage

sessionStorage

Cookie

存储容量

约5MB

约5MB

最大4KB

有效期

永久（除非手动清除）

会话级（页面关闭消失）

可设置过期时间（默认会话）

通信场景

同源页面共享

仅当前页面有效

同源页面共享，且随HTTP请求发送

实战场景

存储用户偏好（主题、默认设置）、搜索历史

临时存储表单草稿、页面跳转临时数据

存储登录态（Token）、记住密码（需加密）

二、进阶应用（考察实际开发能力）

题目：H5的video标签，如何实现“预加载优化”和“自定义控制栏”？

答案：①预加载优化：用preload属性控制——preload=auto（自动预加载）、preload=metadata（只预加载封面/时长）、preload=none（不预加载）；结合poster属性设置封面图，提升用户体验。②自定义控制栏：先隐藏原生控制栏（controls=false），再用JavaScript监听video的API（play()/pause()/currentTime/duration等），搭配HTML/CSS实现自定义播放/暂停、进度条、音量控制。

题目：Canvas和SVG的区别，分别适合什么场景？

答案：核心区别是「渲染方式」——Canvas是像素级绘图（位图），依赖JavaScript，放大后会模糊；SVG是矢量图形，基于XML，放大不失真，支持DOM操作。

场景选择：Canvas适合动态交互、大数据可视化（比如折线图/柱状图）、游戏开发（比如贪吃蛇）；SVG适合图标、LOGO、静态图表（比如流程图）、需要自适应不同屏幕的图形。

题目：H5的FormData对象有什么用？怎么实现“异步上传文件”？

答案：FormData的核心作用是「构建表单数据」，支持文件上传，且能异步提交（无需刷新页面）。

异步上传步骤：①创建FormData对象：constformData=newFormData()；②追加表单数据（含文件）：formData.append(username,xxx)、formData.append(file,fileInput.files[0])；③用Fetch/AXIOS发送POST请求：fetch(/upload,{method:POST,body:formData})，无需设置Content-Type（浏览器自动处理为multipart/form-data）。

题目：H5的“拖放API”核心步骤是什么？如何实现“元素拖拽排序”？

答案：核心步骤（3步）：①给拖拽元素设置draggable=true；②监听拖拽事件——dragstart（开始拖拽，记录元素ID）、dragover（拖拽过程，阻止默认行为才能触发drop）、drop（释放拖拽，插入目标位置）；③实现排序：在drop事件中，通过DOM操作（insertBefore）将拖拽元素插入目标位置，更新列表数据。

三、易错点细节（考察严谨性）

题目：localStorage有什么局限性？如何解决“跨域存储”问题？

答案：局限性：①同源限制（不同域名无法访问）；②无法存储复杂数据（只能存字符串，需用JSON.stringify()/JSON.parse()处理对象/数组）；③