H5前端高频面试题及详细答案（实战接地气版）

H5前端高频面试题及详细答案（实战接地气版）一、H5基础核心面试题1、简单说说HTML5相比HTML4的核心改动，你开发中最常用的特性有哪些？参考答案：HTML5不是单纯的标签升级，核心是语义化、原生能力增强、抛弃冗余废弃特性、适配移动端。核心改动：1.新增语义化标签，解决以前全部用div、布局混乱、可读性差的问题；2.新增大量原生API，不用依赖第三方JS插件，比如多媒体、画布、本地存储、拖拽、地理位置等；3.废弃了HTML4里冗余、兼容性差的标签和属性，比如font、center、strike，以及很多废弃的布局属性；4.强化移动端适配，新增viewport、触摸相关特性，适配手机端页面开发。日常开发最常用的：语义化标签（header、nav、main、section、footer）、localStorage/sessionStorage本地存储、video/audio多媒体、canvas绘图、拖拽API、表单新属性、viewport适配。2、H5语义化标签的作用是什么？开发中为什么推荐使用？参考答案：很多人以为语义化只是好看，其实核心是提升代码可读性、利于SEO、适配无障碍访问、方便团队维护。1.代码可读性高：不用看class名，通过标签就能知道模块作用，header是头部、nav是导航、footer是底部，比一堆div清晰太多；2.对SEO友好：搜索引擎爬虫会根据语义标签判断页面结构和内容权重，语义化布局的页面收录和排名会更好；3.无障碍适配：屏幕阅读器可以识别语义标签，帮助视障用户识别页面模块，符合项目合规要求；4.团队维护方便：统一的结构规范，新人接手项目能快速看懂页面布局。补充：实际开发中不会完全抛弃div，页面复杂局部布局还是用div，大结构一定用语义化标签。3、localStorage、sessionStorage、cookie的区别？项目中怎么选型？参考答案：这三个都是前端本地存储，H5新增了前两个，彻底弥补了cookie的短板，区别主要在存储大小、生命周期、作用域、请求携带、兼容性。1.Cookie：容量最小，只有4KB；默认跟随浏览器请求自动传给后端；生命周期可自定义（会话级/永久）；兼容所有浏览器，包括老旧低端机型；但存储量小、容易被劫持，不适合存大量数据。2.sessionStorage（H5新增）：容量大概5M；生命周期是当前会话，关闭当前标签页就清空；只在当前标签页生效，跨标签不共享；不会自动传给后端；适合存临时页面数据。3.localStorage（H5新增）：容量5M左右；永久存储，除非手动清空缓存或代码删除；同源页面跨标签可共享数据；不跟随请求传递；适合存长期不变的本地数据。项目选型原则：需要后端获取、做登录态校验用cookie；临时页面缓存数据用sessionStorage；长期本地缓存（用户设置、静态配置、非敏感数据）用localStorage；敏感数据绝对不能存在前端存储。4、H5表单新增了哪些属性和类型？实际开发用过哪些？参考答案：H5大幅强化了表单能力，不用写大量JS做校验和适配，移动端体验更好。新增输入类型：email、tel、number、url、date、time、search，最大作用是移动端唤起对应键盘，比如tel唤起数字键盘，体验比普通input好很多。新增常用属性：required：必填校验，原生提示；placeholder：输入框占位提示；autofocus：页面自动聚焦；autocomplete：开启/关闭自动补全；max/min：数值范围限制；pattern：正则校验表单内容。实际开发高频用：tel、number、date、required、placeholder，能大幅减少自定义表单校验代码，提升开发效率。二、移动端H5核心面试题（高频必考）1、H5移动端适配怎么做？说说viewport的理解和常用配置参考答案：viewport是移动端H5适配的核心，简单说就是浏览器用来渲染页面的虚拟视口，手机屏幕分辨率和网页渲染分辨率不一样，必须靠viewport统一。项目通用标准viewport配置（所有H5项目必备）：<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">参数解释：width=device-width：让网页视口宽度等于手机设备宽度；initial-scale=1：初始缩放比例1倍；禁止缩放、最大最小缩放1、user-scalable=no：禁止用户双击、手势缩放，保证页面样式统一。日常适配方案：1.简单活动页：rem适配+flexible，根据屏幕宽度动态设置根字体大小；2.现代项目：vw/vh适配，无需JS，纯CSS适配，更简单稳定；3.大屏固定页面：px固定+媒体查询微调。2、H5移动端常见兼容坑有哪些？你是怎么解决的？参考答案：这是面试高频实战题，我开发中遇到的高频坑和解决方案如下：1.移动端点击300ms延迟：老旧webkit内核浏览器，双击缩放导致点击延迟。解决方案：加viewport禁止缩放、引入fastclick插件，现在新项目基本靠viewport就能解决。2.iOS点击无效：元素没有可点击属性、透明遮罩层级问题。解决方案：给元素加cursor:pointer，调整z-index层级。3.移动端滑动卡顿：原生滚动不流畅。解决方案：加-webkit-overflow-scrolling:touch开启原生顺滑滚动。4.输入框键盘顶起页面、回收不回落：iOS常见bug。解决方案：监听键盘弹出收起事件，重置页面滚动位置。5.图片模糊问题：2倍3倍屏适配，用对应倍数图片，配合background-size适配。6.横竖屏布局错乱：通过媒体查询、orientation横竖屏判断适配样式。3、说说H5拖拽API的使用，以及和原生拖拽、滚动拖拽的区别参考答案：H5原生拖拽API核心四个事件：dragstart（开始拖拽）、drag（拖拽中）、dragend（拖拽结束）、dragover（悬浮目标区域）。使用条件：元素设置draggable="true"才能开启拖拽。适用场景：简单的模块拖拽、排序、文件上传拖拽。缺点：移动端体验一般、拖拽手感生硬、自定义程度低，复杂拖拽（比如滑动卡片、拖拽排序）我会用touch事件自定义，不用原生H5拖拽API。三、H5高级特性与实战API面试题1、简单说说Canvas和SVG的区别？项目中怎么选用？参考答案：两者都是H5绘图方案，核心区别是位图和矢量图的差异。1.Canvas：是位图，靠JS逐像素绘制，绘制完就固定，无法单独修改图形；放大会模糊；适合频繁刷新、动态效果、游戏、大数据量可视化。2.SVG：是矢量图，基于XML标签绘制，每个图形都是独立DOM节点；放大不失真；可以单独修改每个图形样式；适合静态图标、简单图表、图形展示、LOGO。选型：动态频繁变化、动画多、大数据绘图用Canvas；静态图形、需要精细控制、无损缩放用SVG。2、说说H5地理定位API的使用和实际开发问题参考答案：H5通过navigator.geolocation获取用户地理位置，有三个核心方法：getCurrentPosition（获取当前位置）、watchPosition（持续监听位置）、clearWatch（停止监听）。实际开发最大的问题：1.必须HTTPS环境，本地localhost可以调试，线上HTTP无法使用；2.需要用户授权，用户拒绝则无法获取；3.精度不稳定，手机网络定位精度差，GPS定位精准；4.浏览器兼容性参差不齐，低端安卓机可能失效。项目中一般不会单独用原生定位，会结合高德、百度地图SDK封装，稳定性更好。3、什么是H5离线缓存？manifest的作用和优缺点参考答案：H5离线缓存就是通过manifest清单文件，配置页面需要离线缓存的静态资源，用户断网后也能打开页面、加载缓存资源。核心逻辑：首次加载缓存配置的资源，下次访问优先读取缓存，联网后对比更新。优点：弱网/断网可访问页面、减少网络请求、提升页面加载速度；缺点：缓存更新麻烦，必须修改manifest文件才会触发更新；容易出现资源缓存过期不更新的问题；现在项目用的很少，基本被PWA、serviceWorker替代。四、H5性能优化与实战坑点1、H5页面加载慢、卡顿，你会从哪些方面优化？参考答案：我日常做H5优化主要分加载优化、渲染优化、交互优化三个维度，都是实战可落地的：1.资源优化：图片压缩、webp格式、懒加载；JS/CSS压缩合并、按需引入；删除冗余代码和无用插件；2.加载优化：开启CDN加速、静态资源缓存、首屏优先加载、骨架屏优化白屏；3.渲染优化：减少DOM操作、避免频繁重排重绘；复杂动画用transform/opacity，不改动宽高位置；开启硬件加速；4.交互优化：防抖节流处理滚动、点击、输入事件；避免页面滑动卡顿；5.体验优化：预加载关键资源、延迟加载非首屏资源、接口缓存减少重复请求。2、H5懒加载的实现原理？用过哪些方案？参考答案：核心原理：元素进入可视区域后再加载资源，首屏只加载可见内容，减少初始请求和加载时间。常用方案：1.原生H5懒加载：img、iframe标签加loading="lazy"，浏览器原生支持，零成本、最简单；2.传统JS监听：监听scroll滚动事件，判断元素位置，手动赋值src加载图片；3.IntersectionObserver交叉观察器：异步监听元素可视状态，性能比scroll监听好，无卡顿，现在项目主流方案。五、场景化面试题（面试官最爱问）1、为什么H5页面在iOS和安卓上表现不一致？怎么统一兼容？参考答案：根本原因：双端浏览器内核不一致。安卓大多是webkit内核，iOS是自研的webkit内核，渲染规则、默认样式、JS解析逻辑都有差异，再加上系统版本、机型差异，就会出现样式、交互bug。统一兼容方案：1.重置默认样式：统一用normalize.css清除双端默认差异样式；2.针对性兼容：通过UA判断设备，写iOS/安卓专属样式和逻辑；3.避免冷门属性：尽量用兼容性好的CSS、JS特