H5前端工程师面试题及详细答案（实战完整版）

H5前端工程师面试题及详细答案（实战完整版）一、HTML5基础面试题1、说说你对HTML5的理解，和HTML4相比有哪些核心区别？参考答案：HTML5是新一代超文本标记语言，专门针对移动端、富交互、轻量化应用做了大幅优化，也是目前H5项目的核心技术规范。和HTML4相比，核心区别主要有这几点：1.语义化标签升级：新增header、nav、section、article、footer等语义标签，替代传统div堆砌的写法，代码结构更清晰，利于SEO、浏览器解析和团队维护。2.新增多媒体能力：原生支持audio、video标签，无需依赖Flash即可实现音视频播放，适配移动端所有浏览器。3.新增画布与图形能力：提供canvas、svg能力，支持前端绘制图形、动画、小游戏、数据可视化场景。4.本地存储能力增强：新增localStorage、sessionStorage、IndexedDB，弥补了cookie存储量小、安全性低、传输冗余的问题。5.新增表单增强特性：新增email、tel、number、date等表单类型，以及required、placeholder、pattern等属性，简化表单校验开发。6.脱离插件依赖：全面抛弃Flash依赖，所有富交互、多媒体功能原生支持，适配移动端轻量场景。2、HTML5语义化标签的作用是什么？日常开发怎么落地？参考答案：语义化的核心就是让标签有明确的业务含义，而非单纯用来承载样式。核心作用：1.代码结构清晰，可读性高，多人协作维护成本低；2.利于搜索引擎抓取页面结构，提升SEO效果；3.适配屏幕阅读器，提升页面无障碍访问性；4.浏览器解析更精准，减少布局兼容问题。日常落地规范：页面头部用header，导航用nav，主体内容用main、section，独立内容模块用article，底部用footer，侧边栏用aside。避免通篇div、span，结构分层严格对应页面模块。3、localStorage、sessionStorage、cookie的区别？H5项目如何选型？参考答案：特性cookielocalStoragesessionStorage存储大小4KB左右5MB+5MB+有效期可设置过期时间，默认会话结束失效永久存储，手动清除才失效当前会话有效，页面关闭即清空是否随请求发送是，每次http请求都会携带否，仅前端本地使用否作用域同域名下所有页面共享同域名共享同标签页会话独享项目选型：1.登录态、后端校验凭证、需要随请求传递的数据，用cookie；2.长期本地缓存、用户偏好设置、静态本地数据，用localStorage；3.临时页面数据、本次浏览会话数据，用sessionStorage。4、简单说说HTML5离线缓存（ApplicationCache），现在为什么很少用？参考答案：HTML5离线缓存可以通过manifest文件配置页面静态资源，让页面在无网络环境下正常访问。淘汰原因：1.缓存机制死板，更新资源需要手动修改manifest文件版本，体验差；2.缓存优先级混乱，容易出现资源更新不及时、缓存错乱问题；3.目前主流替代方案是ServiceWorker，缓存策略更灵活、可控性更强，支持按需缓存、动态更新、静默刷新，是现在H5离线应用的主流方案。二、CSS3与移动端适配核心题（H5重点）1、H5移动端适配方案有哪些？各自优缺点？项目常用哪种？参考答案：日常H5开发主流三种适配方案：1.固定viewport像素适配（px固定写法）优点：简单无脑、无需换算、兼容性极好；缺点：不同尺寸手机会出现留白、挤压，适配效果差，只适合简单活动页。2.rem适配方案（企业级最常用）原理：通过js根据屏幕宽度动态设置html的font-size，页面所有尺寸用rem单位，实现等比例缩放。优点：适配所有移动端机型、还原设计稿精准、兼容性好；缺点：需要简单配置，少量固定元素需要单独处理。3.vw/vh视口适配方案1vw等于屏幕宽度的1%，直接根据视口单位写样式，无需JS干预。优点：纯CSS实现、无JS依赖、适配流畅；缺点：低版本安卓机型有少量兼容问题。项目实战选型：绝大多数商业H5项目用rem+flexible方案，兼顾兼容性和适配精度；简单活动页、新项目会直接用vw适配。2、viewport原理是什么？H5标准metaviewport怎么写？每个属性含义？参考答案：viewport是移动端浏览器的可视视口，用来控制页面的缩放、适配规则，是H5移动端适配的核心基础。标准H5viewport代码：PlainText

<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：禁止用户手动缩放页面，保证H5页面展示统一。3、移动端1px边框问题怎么解决？原理是什么？参考答案：问题原因：移动端设备存在设备像素比DPR，大部分手机DPR为2或3，CSS的1px会被渲染成2/3个物理像素，导致边框变粗、模糊。最优解决方案：伪类+transform缩放通过:after伪类生成边框，根据DPR设置缩放比例，将2px/3px物理像素缩放到1px展示，实现真实细边框。优点：兼容性最好、无侵入、适配所有机型、项目通用。4、CSS3动画transition、transform、animation的区别？参考答案：1.transform：只是变形属性，负责元素的位移、缩放、旋转、倾斜，本身没有动画效果，只是改变元素形态。2.transition：过渡动画，用来监听属性变化，实现从一个状态平滑过渡到另一个状态，需要触发条件（点击、hover、数据变更），只能做简单单次过渡。3.animation：关键帧动画，通过@keyframes定义多段状态，支持循环、延时、匀速、暂停，可实现复杂、持续的动画效果，无需手动触发。三、JavaScript核心面试题（H5实战向）1、说说var、let、const的区别？日常开发使用规范？参考答案：1.var：函数级作用域，存在变量提升，可重复声明，容易造成变量污染，现在项目基本不用。2.let：块级作用域，无变量提升、暂时性死区，不可重复声明，适合定义会变更的变量。3.const：块级作用域，声明后不可修改引用地址，适合定义常量、对象、数组，是日常默认首选。开发规范：优先使用const，需要修改变量时用let，完全弃用var。2、JS异步有哪些方案？H5项目中分别用在什么场景？参考答案：1.回调函数：最基础异步方式，适合简单单次异步，缺点是多层嵌套会产生回调地狱，可读性差。2.Promise：解决回调地狱，支持链式调用，H5接口请求、文件加载、异步任务基本都用Promise封装。3.async/await：Promise语法糖，让异步代码变成同步写法，代码简洁易读，是目前项目主流写法。4.定时器：setTimeout/setInterval，用于延时弹窗、轮播、倒计时等H5常见场景。5.fetch：H5原生网络请求API，替代部分xhr，用于简单接口请求。3、简单说下Promise的状态和常用方法参考答案：Promise有三种状态，且状态一旦改变不可逆：1.pending：初始等待状态；2.fulfilled：成功完成状态；3.rejected：失败拒绝状态。常用方法：then：处理成功回调；catch：捕获异常错误；finally：无论成功失败都会执行；Promise.all：批量执行异步，全部成功才成功，适合H5多接口并行请求；Promise.race：谁先完成就返回谁，适合接口超时拦截场景。4、移动端点击300ms延迟问题怎么解决？原理是什么？参考答案：问题原因：早期移动端浏览器为了判断用户是单击还是双击缩放，会在点击后等待300ms，造成点击延迟卡顿。解决方案：1.设置viewport禁止缩放（initial-scale=1，user-scalable=no），现代浏览器会自动取消300ms延迟，这是最主流方案；2.使用fastclick库兼容低版本机型；3.采用touch事件替代click事件，响应更快。5、H5常见的触摸事件有哪些？执行顺序？参考答案：常用触摸事件：touchstart（手指按下）、touchmove（手指滑动）、touchend（手指松开）、touchcancel（触摸中断）。执行顺序：touchstart->touchmove->touchend->clickH5滑动轮播、拖拽、手势放大缩小，基本都是基于触摸事件开发。四、H5专项场景面试题（高频实操）1、H5页面在微信、浏览器中常见的兼容问题及解决方案参考答案：1.微信顶部下拉回弹、底部留白：禁止页面滚动溢出，设置body固定高度、overflow:hidden，或监听滚动阻止默认行为；2.iOS点击高亮背景：设置-webkit-tap-highlight-color:transparent清除高亮；3.iOS滚动卡顿：给滚动容器添加-webkit-overflow-scrolling:touch开启原生流畅滚动；4.输入框聚焦页面偏移：移动端软键盘弹起导致布局错乱，监听键盘起落，动态修正页面高度；5.图片模糊、适配错乱：使用两倍图、三倍图适配DPR，结合rem/vw统一缩放。2、H5页面性能优化你日常怎么做？参考答案：1.资源优化图片压缩、webp格式、懒加载、雪碧图、静态资源CDN加速；JS、CSS打包压缩、去除冗余代码。2.渲染优化减少重排重绘，动画使用transform/opacity开启硬件加速，避免频繁操作DOM；使用CSS3动画替代JS动画。3.代码优化事件委托、防抖节流优化高频触发事件；避免全局变量污染；合理使用缓存。4.体验优化接口缓存、骨架屏、加载动画、空状态兜底；首屏关键资源优先加载，非关键资源延迟加载。3、说说H5懒加载的实现原理？图片懒加载怎么做？参考答案：核心原理：页面初始只加载可视区域图片，非可视区域图片先占位，等到滚动进入可视区域后，再动态赋值真实图片地址加载资源，减少首屏请求数量，提升首屏速度。实现方式：将图片真实地址存在data属性，src先赋值占位图；通过监听滚动事件或使用IntersectionObserver监听元素可见性，进入视口后替换src。目前项目优先使用IntersectionObserver，性能更好，无滚动节流开销。4、防抖和节流的区别？H5哪些场景需要用到？参考答案：防抖：多次触发事件，只在最后一次触发后延迟执行一次，核心是停止触发后再执行。适用场景：搜索框输入联想、输入框实时校验、窗口大小调整。节流：固定时间内只执行一次，核心是匀速稀释执行频率。适用场景：页面滚动监听、触摸滑动、点击频繁提交、轮播切换。五、工程化与项目实战题1、你做过的H5项目打包构建流程是怎样的？参考答案：日常H5项目一般基于Vue/React+Vite/Webpack构建：1.开发阶段：本地热更新、实时编译、接口代理跨域；2.构建阶段：代码语法校验、TS类型校验、CSS预编译、文件压缩、图片压缩、代码去重、按需引入；3.打包产物：生成静态html、js、css资源，分割代码块，首屏资源优先打包；4.部署阶段：打包后上传CDN，配置缓存策略，实现快速访问。2、H5跨域问题产生原因及常用解决方案参考答案：跨域原因：浏览器同源策略限制，协议、域名、端口任意一个不同，即为跨域。常用方案：1.本地开发：配置脚手架代理pro