H5新特性高频面试题及答案（实战口语版）

H5新特性高频面试题及答案（实战口语版）一、基础概念类1.简单说说你理解的H5新特性？和传统HTML4比最大的区别是什么？我日常开发里用到的H5新特性，主要分四大块：语义化标签、多媒体能力、本地存储、表单增强，还有一些网页交互API。和HTML4最大的区别就是，HTML4基本只有骨架标签，功能很单一，需要靠JS、插件实现多媒体、存储、表单校验；而H5直接把这些常用能力原生集成了，更简洁、兼容性更好，也不用依赖flash这类插件。核心亮点：语义化更规范、原生支持音视频、本地存储能力变强、表单功能升级、新增大量原生交互API。2.H5语义化标签有哪些？为什么要用语义化？常用的语义化标签我日常用的有：header、nav、main、section、article、aside、footer、figure、figcaption。之前写旧页面都是一堆div+class，全是无语义盒子，缺点很明显。用语义化标签的好处主要三点：第一，代码可读性高，一看标签就知道是头部、导航、侧边栏，不用猜class含义，团队协作更方便；第二，利于SEO，搜索引擎爬虫能精准识别页面结构，区分主体内容、导航、页脚，提升页面收录和权重；第三，适配无障碍访问，屏幕阅读器可以识别页面模块，对残障用户更友好。二、本地存储核心考点（面试高频）3.讲讲localStorage、sessionStorage、Cookie的区别？项目里怎么选型？这三个是前端最常用的本地存储，我从生命周期、存储大小、请求携带、作用域、使用场景五个方面区分：Cookie：生命周期默认随会话关闭失效，可手动设置过期时间；存储大小只有4KB左右；每次HTTP请求都会自动携带到服务端；作用域是同域名下所有页面共享；主要用来存登录态、token、用户标识这类少量核心数据。localStorage：永久存储，除非手动清除代码或清空浏览器缓存；存储大概5MB；请求不会自动携带；同源所有页面共享；适合存长期不变的本地数据，比如用户偏好设置、静态配置、本地缓存的列表数据。sessionStorage：页面会话级存储，关闭当前标签页就清空；大小和localStorage差不多；请求不携带；只在当前标签页生效，跨标签不共享；适合存临时数据，比如当前页面的搜索条件、表单临时缓存、弹窗状态。选型原则：需要服务端读取、存登录态用Cookie；长期本地缓存用localStorage；临时页面数据用sessionStorage。4.了解IndexedDB吗？什么场景下会用？IndexedDB是H5提供的浏览器端非关系型数据库，是本地存储里容量最大的，一般几十MB起步，远超storage和cookie。它支持事务、增删改查、索引查询，是异步操作，不会阻塞主线程。日常项目里普通缓存用localStorage就够了，只有特殊场景才用IndexedDB：比如需要存储大量结构化数据、离线缓存页面资源、大数据列表本地缓存、离线表单批量数据，比如后台管理的大量字典、移动端离线业务数据。三、表单新特性5.H5新增的表单类型和表单属性有哪些？实际开发用过哪些？我开发中常用的新增表单类型：email、tel、number、url、date、time、range、color。不用自己写正则就能做基础校验，移动端还会弹出对应键盘，体验更好。常用新增属性：required：必填校验，原生提示；placeholder：输入框占位提示；readonly：只读不可修改；disabled：禁用状态；autofocus：页面自动聚焦；autocomplete：自动补全；pattern：自定义正则校验。实际开发里，手机号用tel、邮箱用email、日期用date，配合required和pattern做基础校验，能少写很多JS校验代码。6.原生表单校验的优缺点？项目里为什么大多还是用JS校验？优点：开箱即用、不用写JS、兼容性好、上手快，适合简单表单。缺点很明显：原生提示文案不能自定义、校验样式无法定制、不支持复杂联动校验、不同浏览器提示样式不一样、无法适配自定义弹窗和UI。所以企业项目基本都是用JS或UI库校验，比如Element、AntD的表单校验，灵活性更高，能统一项目样式和交互。四、多媒体与绘图API7.讲讲audio和video标签的常用属性和事件？H5直接原生支持音视频，不用flash，核心常用属性：controls（显示控制栏）、autoplay（自动播放，现在浏览器有限制，需要静音）、loop（循环播放）、muted（静音）、preload（预加载）。常用事件：play播放、pause暂停、ended播放结束、timeupdate进度更新、canplay可以播放。开发踩过的坑：浏览器策略限制，非静音状态下禁止自动播放，必须用户手动触发交互才能播放音视频。8.Canvas和SVG的区别？项目怎么选型？两者都是H5绘图方案，核心区别一句话：SVG是矢量图，Canvas是位图。SVG：基于XML标签绘制，放大不会模糊、可单独操作每个图形节点、事件绑定精细、适合静态图标、图表、地图、简单图形。缺点是复杂图形多了之后DOM节点多，页面卡顿。Canvas：基于像素点绘制，是一整块画布，靠JS绘图，渲染速度快，适合动态动画、游戏、大数据可视化、水印、截图。缺点是放大模糊、无法单独操作图形元素。选型：静态图标、简单图表用SVG；动态动画、游戏、复杂可视化、水印用Canvas。五、常用原生交互API（面试高频）9.说说FileReader的作用和使用场景？FileReader是H5提供的文件读取API，可以在浏览器端读取本地文件内容，不用上传服务器就能预览、解析文件。常用场景：图片本地预览、上传前压缩预览、读取txt/excel文件内容、解析本地JSON文件。核心方法：readAsDataURL（图片转base64预览）、readAsText（读取文本文件）、onload读取成功回调。10.了解拖拽API吗？常用属性和事件有哪些？H5原生拖拽不用自己写鼠标事件，非常方便。给元素加draggable="true"就能开启拖拽。拖拽元素事件：dragstart开始拖拽、drag拖拽中、dragend拖拽结束；目标元素事件：dragenter进入目标、dragover悬浮目标、dragleave离开目标、drop松手放置。开发常用：列表拖拽排序、文件拖拽上传、模块拖拽布局。注意dragover必须阻止默认事件，否则drop不会触发。11.讲讲History新API？和前端路由有什么关系？H5History新增了pushState和replaceState两个方法，可以在不刷新页面的情况下修改浏览器地址栏和历史记录。pushState：新增一条历史记录，可以回退；replaceState：替换当前历史记录，无法回退。前端的history模式路由就是基于这两个API实现的，区别于hash模式。hash模式地址带#，不美观；history模式地址干净，但需要后端配置重定向，否则刷新404。六、进阶考点（加分项）12.什么是H5离线缓存？原理是什么？现在还用吗？H5离线缓存以前靠manifest清单文件，可以配置页面静态资源，让用户断网后也能访问页面。原理：首次加载页面，浏览器根据manifest文件缓存指定资源，下次断网直接读取本地缓存。现在基本不用了，兼容性差、更新机制坑多，官方也废弃了。现在项目离线缓存都用PWA的ServiceWorker替代，更稳定、功能更强。13.简单说说PWA是什么？基于哪些H5新特性？PWA是渐进式网页应用，能让网页拥有类似APP的体验，核心依赖H5新特性：ServiceWorker、IndexedDB、Manifest、消息推送API。主要能力：页面离线访问、桌面图标添加、无闪屏启动、消息推送、缓存加速。现在很多移动端官网、轻应用都会用。14.讲讲Web存储的同源限制？会有什么跨域问题？localStorage、sessionStorage、IndexedDB、Cookie全部遵循同源策略，协议、域名、端口任一不同，无法互相读取存储数据。日常开发中，主域名相同、子域名不同的场景，可以通过修改document.domain实现跨子域共享存储；完全不同域名则无法共享，只能通过后端接口、postMessage传值解决。七、面试常问总结题15.你在项目中用过哪些H5新特性？举3个实战场景这个我面试直接口述的版本：第一，语义化标签，所有项目统一用header、nav、ma