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

H5高频面试题及详细答案（实战版）一、H5基础核心面试题1、简单说说你对HTML5的理解，和HTML4相比有哪些核心区别？参考答案：HTML5是新一代的超文本标记语言，主要针对移动端、富媒体、离线应用、交互体验做了全面升级，也是目前前端开发的标准规范。和HTML4相比，核心区别主要有这几点：1.语义化标签升级：新增header、nav、main、section、article、footer等语义化标签，替代了HTML4大量的div布局，代码结构更清晰，可读性、可维护性更强，同时更利于搜索引擎抓取页面内容。2.原生多媒体支持：新增audio、video标签，无需依赖Flash插件，即可直接在页面播放音频、视频，适配所有现代浏览器和移动端设备。3.新增表单能力：升级了表单类型，新增number、tel、email、date、range等输入类型，同时自带表单校验、占位提示、自动聚焦等属性，减少JS手写校验的代码量。4.本地存储能力增强：摒弃了传统cookie存储量小、跟随请求发送的缺陷，新增localStorage、sessionStorage、IndexedDB，支持大容量本地数据存储。5.新增画布与图形能力：提供canvas、svg标签，支持网页绘图、动画、数据可视化、小游戏开发。6.新增网页交互API：支持拖拽、地理定位、全屏、消息通知、网络状态监听等原生能力，大幅提升网页交互体验。2、什么是HTML5语义化？语义化的好处是什么？参考答案：HTML5语义化就是让标签具备对应的含义，标签可以直观体现页面内容的结构和作用，不再是单纯用来承载样式的容器。核心好处：1.代码结构清晰：开发者一眼就能区分页面头部、导航、主体内容、侧边栏、页脚，多人协作维护更方便。2.利于SEO优化：搜索引擎爬虫可以精准识别页面层级和核心内容，提升页面收录和搜索权重。3.适配读屏设备：屏幕阅读器可以根据语义标签识别页面结构，帮助残障用户正常浏览网页，提升网页无障碍性。4.兼容性和扩展性更好：标准的语义化结构，适配所有现代浏览器，后续迭代修改成本更低。3、说说localStorage、sessionStorage、cookie的区别？项目中如何选择使用？参考答案：三者都是前端本地存储方案，核心差异集中在存储大小、生命周期、作用域、请求特性四个方面：1.存储大小cookie：容量最小，仅4KB左右；sessionStorage、localStorage：容量约5MB，远大于cookie。2.生命周期cookie：可手动设置过期时间，不设置则默认关闭浏览器失效；sessionStorage：会话级存储，关闭当前标签页立即清空；localStorage：永久存储，除非手动清空缓存或代码删除，否则永久保留。3.作用域cookie、localStorage：同域名下所有页面共享；sessionStorage：仅当前标签页、当前会话有效，不同标签页不共享。4.请求特性cookie：每次HTTP请求都会自动携带到服务端，会增加请求体积；sessionStorage、localStorage：仅本地存储，不会参与网络请求。项目使用场景：cookie：存储登录凭证、token、用户标识等需要同步给服务端的少量数据；sessionStorage：存储临时数据，如表单临时填写内容、页面临时状态，关闭页面即失效；localStorage：存储长期不变的本地数据，如用户偏好设置、主题样式、本地缓存的静态配置。4、HTML5新增的表单属性有哪些？分别有什么作用？参考答案：1.placeholder：输入框占位提示文字，输入内容后自动消失，提升用户体验。2.required：表单必填校验，提交表单时自动判断输入框是否为空，为空则阻止提交并提示。3.readonly：设置输入框只读，内容不可修改，但可以提交表单。4.disabled：设置输入框禁用，内容不可修改，且不会随表单提交。5.autofocus：页面加载完成后，输入框自动获取焦点，无需手动点击。6.autocomplete：开启/关闭输入框自动补全功能，默认开启。7.pattern：自定义正则校验规则，可直接对输入内容进行格式校验，无需手写JS正则。二、H5移动端适配与兼容面试题1、H5移动端适配的常用方案有哪些？各自的优缺点？参考答案：日常项目中主流适配方案有3种：1、viewport固定缩放适配通过meta标签设置固定视口宽度和缩放比例，适配大部分手机。优点：实现简单、零JS代码、兼容性极好；缺点：仅适配标准机型，大屏、小屏手机会出现留白、拉伸问题，适配精度低。2、rem适配方案（最常用）根据屏幕宽度动态设置html的font-size，页面所有尺寸用rem单位，实现等比例适配。优点：适配精度高，所有机型等比例展示，适配绝大多数H5活动页、商城页面；缺点：需要少量JS代码动态计算根字体，部分老旧机型可能出现轻微偏差。3、vw/vh视口单位适配vw代表视口宽度百分比，vh代表视口高度百分比，直接用百分比单位布局。优点：纯CSS适配，无需JS，代码简洁，适配效果流畅；缺点：低版本安卓手机兼容性略差，1px边框、固定尺寸适配需要特殊处理。2、H5页面在移动端常见的兼容问题有哪些？怎么解决？参考答案：1.移动端点击300ms延迟问题原因：早期手机双击缩放机制，浏览器会等待300ms判断用户是否双击；解决方案：设置meta标签user-scalable=no禁止缩放，或使用fastclick插件。2.iOS点击无效、点击穿透解决方案：给点击元素添加cursor:pointer，避免穿透；优化层级，避免重叠元素绑定点击事件。3.移动端1px边框变粗问题原因：设备像素比DPR大于1，1px逻辑像素对应多个物理像素；解决方案：使用transform缩放、伪元素缩放实现细边框。4.页面回弹、滚动卡顿解决方案：给滚动容器添加-webkit-overflow-scrolling:touch开启原生滚动。5.输入框键盘遮挡页面内容解决方案：监听键盘弹出事件，动态调整页面高度或滚动位置。3、viewport常用meta标签参数含义？参考答案：完整常用viewport代码：<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">参数解析：1.width=device-width：让页面视口宽度等于设备屏幕宽度，默认适配手机屏幕；2.initial-scale=1.0：页面初始加载缩放比例为1，不放大不缩小；3.maximum-scale=1.0：禁止用户放大页面；4.minimum-scale=1.0：禁止用户缩小页面；5.user-scalable=no：禁止用户手动缩放页面，解决300ms点击延迟。三、H5高级API与特性面试题1、说说canvas和svg的区别？项目中如何选用？参考答案：核心区别：1.渲染机制不同：svg是矢量图，基于XML标签渲染，图形是独立DOM节点；canvas是位图，基于像素渲染，是一整块画布，无独立DOM节点。2.缩放效果不同：svg无限缩放不会模糊；canvas缩放会出现像素模糊。3.事件交互不同：svg每个图形可单独绑定点击、hover事件；canvas只能给整个画布绑定事件，需要手动计算坐标判断点击区域。4.性能差异：图形数量少、需要频繁修改图形，svg性能更好；图形数量多、高频动画、全屏绘制，canvas性能更优。使用场景：svg：图标、logo、简单图表、流程图、需要缩放的静态图形；canvas：大数据可视化、小游戏、动态涂鸦、复杂动画、海报生成。2、简述H5拖拽API的使用及核心事件参考答案：HTML5原生拖拽无需依赖JS拖拽库，核心分为被拖拽元素和目标放置元素。1.被拖拽元素需添加属性：draggable="true"2.核心拖拽事件：dragstart：拖拽开始，一般在这里存储拖拽数据；drag：拖拽过程中持续触发；dragend：拖拽结束；dragenter：拖拽元素进入目标区域；dragover：拖拽元素在目标区域移动（必须阻止默认事件，才能触发drop）；drop：元素放置到目标区域，执行最终逻辑。3、H5离线缓存（ApplicationCache）了解吗？现在主流的离线方案是什么？参考答案：ApplicationCache是HTML5早期的离线缓存方案，通过manifest清单文件配置需要缓存的静态资源，实现网页离线访问。缺点：缓存机制死板，只要清单文件不更新，资源就不会更新；无法精准控制缓存粒度，bug较多，目前官方已废弃该方案。当前主流离线方案：ServiceWorker可以精准拦截页面请求，自定义缓存规则、缓存优先级，支持离线访问、资源预加载、请求代理，是目前PWA渐进式网页应用的核心技术，适配所有现代移动端浏览器。四、H5性能优化与实战面试题1、H5页面首屏加载慢，你会从哪些维度优化？参考答案：结合实战经验，从加载、渲染、资源、代码四个维度优化：1.资源优化：图片压缩、使用webp格式、大图懒加载；静态资源CDN部署、开启gzip压缩；删除冗余JS、CSS，合并精简代码。2.加载优化：CSS内联首屏样式，避免白屏；JS延迟加载、按需加载，非首屏逻辑延后执行；骨架屏占位，优化用户感知。3.渲染优化：减少DOM节点数量，避免多层嵌套；避免频繁操作DOM，批量更新数据；开启硬件加速，减少页面重排重绘。4.数据优化：接口数据缓存，重复请求拦截；分页、懒加载渲染列表，避免一次性渲染大量数据。2、H5页面滑动卡顿、动画卡顿如何解决？参考答案：卡顿核心原因大多是页面频繁重排重绘、主线程阻塞：1.动画优先使用transform、opacity属性，这两个属性不会触发重排，只会触发合成层渲染，性能极高；2.避免在滚动、动画过程中读写DOM样式，减少浏览器计算开销；3.复杂DOM结构、长列表使用虚拟列表，只渲染可视区域DOM；4.开启硬件加速，给动画元素添加transform:translateZ(0)；5.解绑无用的定时器、监听事件，避免主线程持续占用。五、面试高频简答题（收尾必问）1、说说HTML5拖放、地理定位、全屏、通知API的实战场景参考答案：1.拖拽API：表单拖拽排序、文件上传拖拽、看板拖拽布局；2.地理定位API：外卖、团购、同城服务、门店定位、打卡定位；3.全屏API：在线视频、在线课件、大屏数据