H5 高频面试题及详细答案（实战版）

H5高频面试题及详细答案（实战版）一、H5基础认知类1、你理解的HTML5是什么？和HTML4最大的区别是什么？HTML5不是单纯的标签升级，是一套全新的前端页面标准，包含新增语义化标签、多媒体能力、本地存储、离线缓存、图形绘制、设备调用等一系列前端能力集合。和HTML4核心区别有三点：语义化升级：摒弃了大量纯div布局，新增header、nav、main、section、footer等语义标签，结构更清晰，可读性和SEO更友好。原生能力增强：原生支持音频、视频、画布绘图、拖拽、地理定位等功能，不再依赖Flash、第三方插件实现。本地存储与离线能力：新增localStorage、sessionStorage、IndexedDB、manifest离线缓存，解决了传统cookie存储量小、依赖服务器的问题。2、HTML5语义化标签的好处有哪些？常用语义标签有哪些？核心好处：代码结构清晰，层级分明，团队协作维护更方便；利于搜索引擎抓取页面结构，提升SEO权重；适配读屏设备，对无障碍访问更友好；减少无意义div嵌套，代码更精简。常用标签：header、nav、main、section、article、aside、footer、figure、figcaption、mark、time。二、H5存储相关考点（高频）3、localStorage、sessionStorage、cookie的区别？项目中怎么选择使用？三者都是前端本地存储方案，核心差异集中在存储大小、生命周期、是否随请求携带、作用域四个维度：cookie：容量最小，仅4KB；默认会话级，可手动设置过期时间；每次HTTP请求都会自动携带到后端；受域名和端口限制；可被后端读写修改。适合存储登录凭证、token、用户标识等核心校验信息。sessionStorage：容量约5M；仅当前标签页生效，关闭标签数据直接清空；不随请求上传；同源不同标签页无法共享数据。适合存储临时页面状态、表单临时数据、弹窗状态等临时信息。localStorage：容量约5M；永久存储，除非手动清除代码或缓存；同源多标签页可共享数据；不会随HTTP请求携带。适合存储长期用户配置、主题设置、本地缓存的静态数据。4、简单说下IndexedDB的作用和使用场景？IndexedDB是H5提供的浏览器端数据库，是异步操作的非关系型数据库，容量远大于storage，一般几十MB起步，支持事务、索引、增删改查批量操作。适用场景：需要存储大量本地数据的H5项目，比如移动端离线列表、本地日志；离线业务场景，断网时可读取本地数据，联网后同步；需要批量操作、数据检索、数据持久化的复杂业务。三、H5新增核心API考点5、讲讲H5拖拽API的使用流程？H5原生拖拽核心依靠拖拽事件，分为拖拽源事件和目标容器事件。使用步骤：给需要拖拽的元素添加draggable="true"开启拖拽；拖拽源监听：dragstart（开始拖拽）、drag（拖拽中）、dragend（拖拽结束）；目标容器监听：dragenter（进入容器）、dragover（悬浮，必须阻止默认事件才能触发drop）、dragleave（离开容器）、drop（放置成功）；核心注意点：dragover事件必须执行e.preventDefault()，否则drop事件不会触发。6、FileReader是什么？常用场景有哪些？FileReader是H5提供的文件读取API，可以读取input上传的文件、本地文件内容，转换成base64、文本、二进制等格式，全程前端完成，无需后端参与。常用场景：图片上传预览，将图片转为base64实时展示；前端读取txt、excel等文本文件内容；文件前端预处理、压缩、格式校验。常用方法：readAsDataURL（转base64）、readAsText（读文本）、readAsArrayBuffer（读二进制）。7、说说Canvas和SVG的区别，项目中如何选型？SVG：矢量图形，基于XML标签绘制，属于DOM元素。放大不会模糊，支持事件绑定、单独修改元素，适合静态图形、图标、流程图、简单可视化图表。频繁重绘性能差。Canvas：位图绘制，基于画布像素点绘制，不属于DOM结构。依赖JS绘制，一次性渲染，放大会失真，不支持单独元素事件。适合动态动画、游戏、大数据量可视化、频繁刷新的画布场景。8、H5地理定位API使用注意事项？navigator.geolocation可以获取用户经纬度位置，项目使用有几个关键限制：必须在HTTPS环境下使用，本地localhost除外，HTTP域名会直接报错；需要用户手动授权，拒绝授权则无法获取位置；定位分为高精度（GPS）和低精度（网络定位），高精度耗时更长、耗电更高；部分浏览器和移动端webview对该API做了限制，需要做降级处理。四、H5离线与缓存考点9、讲讲H5ApplicationCache离线缓存，优缺点是什么？ApplicationCache是H5早期的离线缓存方案，通过manifest清单文件，配置需要离线缓存的静态资源，用户首次打开页面后，资源会缓存到本地，断网时可正常访问页面。优点：简单易用，一键配置静态资源离线访问，提升弱网、断网场景体验。缺点：缓存机制死板，资源更新必须修改manifest文件才会重新缓存；容易出现缓存卡死、新旧资源冲突问题；目前官方已废弃，主流项目不再使用，替代方案是ServiceWorker。10、简单介绍ServiceWorker的作用ServiceWorker是独立于页面的后台脚本，脱离DOM主线程，可拦截页面的所有网络请求，主要用于实现高级离线缓存、资源预加载、请求拦截、静态资源缓存更新、消息推送等功能。目前主流PWA应用、网页离线访问、提速加载都是基于它实现，相比传统AppCache更灵活、可控性更强。五、移动端H5适配与兼容考点11、H5移动端适配常用方案有哪些？各自优缺点？1、viewport固定缩放适配通过meta标签固定视口宽度为设备宽度，适配简单，适合简单展示型页面，缺点是大屏、小屏差异大，精细布局容易错乱。2、rem适配根据设备屏幕宽度动态设置html根字体大小，页面尺寸用rem单位。适配性强，兼容性好，是传统移动端主流方案。缺点是需要JS动态计算根字体，少量第三方组件需要单独适配。3、vw/vh视口单位适配纯CSS适配，无需JS，1vw等于屏幕宽度1%，适配更简洁。现代项目主流方案，缺点是低版本安卓机型有少量兼容问题。4、flex+百分比适配适合流式布局页面，适配简单，缺点无法精准控制固定尺寸组件。12、H5常见移动端兼容问题及解决方案点击300ms延迟：早期浏览器双击缩放导致，解决方案：设置viewport禁止缩放、使用fastclick插件（老旧机型）ios滚动卡顿：给滚动容器添加-webkit-overflow-scrolling:touch输入框聚焦页面偏移：监听键盘唤起、收起事件，重置页面滚动位置图片拉伸、适配异常：统一使用object-fit控制图片展示模式安卓低版本不支持vw：做rem降级适配六、H5性能优化面试题13、H5页面性能优化你平时怎么做？我日常优化主要从加载、渲染、缓存、交互四个维度入手：加载优化：静态资源CDN部署、图片压缩、懒加载、雪碧图、小图转base64、JS/CSS压缩合并、按需引入资源；渲染优化：减少DOM嵌套、避免频繁DOM操作、使用transform/opacity做动画（开启GPU加速）、减少重排重绘；缓存优化：合理使用localStorage缓存静态数据、HTTP缓存、ServiceWorker缓存静态资源；交互优化：大数据列表做虚拟滚动、节流防抖处理高频事件、避免主线程阻塞、复杂计算异步处理。14、什么是重绘和重排？如何避免？重排（回流）：元素布局、尺寸、位置发生变化，浏览器需要重新计算页面布局，消耗性能极高。重绘：元素样式颜色、透明度变化，不影响布局，仅重新绘制像素，性能消耗较低。优化方案：批量修改DOM样式，统一修改class而非逐条修改style；使用文档碎片一次性插入DOM；动画优先使用transform、opacity，不触发重排；避免频繁获取offset、scroll等布局属性。七、拓展高频面试题15、H5表单新增特性有哪些？新增表单类型：email、tel、number、url、date、time、datetime；新增表单属性：required必填、placeholder提示、max/min限制、autofocus自动聚焦、autocomplete自动补全、pattern正则校验；新增表单校验API：checkValidity()手动触发表单校验。16、说说history路由和hash路由的区别？hash路由：基于url#后面的内容变化，改变hash不会触发页面刷新，兼容性极好；缺点是url带#，不够美观，部分场景不支持锚点功能。history路由：基于H5histor