WebAPI 高频面试题及详细答案（实战向）

WebAPI高频面试题及详细答案（实战向）一、WebAPI基础认知1、什么是WebAPI？和JavaScript核心的区别是什么？参考答案：WebAPI是浏览器提供的、运行在浏览器环境的一系列接口，是JS调用浏览器能力的入口，专门用来操作浏览器、页面DOM、网络、本地存储等功能。JS核心（ECMAScript）只包含变量、数据类型、运算符、循环、函数、原型、数组对象方法等语法基础，脱离浏览器和Node环境依然可以运行。而WebAPI属于环境专属能力，只能在浏览器中使用，Node环境大部分WebAPI无法直接使用。核心区别：ECMAScript：语法规则，纯语言逻辑WebAPI：浏览器功能接口，DOM/BOM/网络/存储等能力2、常见的WebAPI分类有哪些？参考答案：DOMAPI：操作页面标签、属性、文本、事件BOMAPI：操作浏览器窗口、地址栏、定时器、弹窗网络API：Fetch、XMLHttpRequest、WebSocket本地存储API：localStorage、sessionStorage、Cookie、IndexedDB表单文件API：FormData、File、FileReader异步任务API：定时器、requestAnimationFrame、Promise不属于WebAPI，是ES6语法其他能力：拖拽、剪贴板、地理位置、历史记录等二、DOM相关面试题1、DOM是什么？DOM树的渲染过程简单说一下参考答案：DOM即文档对象模型，浏览器会把HTML页面解析成一棵树形结构的对象树，也就是DOM树。页面所有标签、文本、注释都会被解析成对应的节点，开发者可以通过JS读写、修改、删除这些节点，实现页面动态变化。简单渲染流程：浏览器解析HTML代码，生成DOM树解析CSS代码，生成CSSOM样式树DOM树+CSSOM树合并生成渲染树布局（计算元素位置大小）绘制（渲染像素到屏幕）2、DOM节点类型有哪些？常用的是什么？参考答案：DOM节点分为多种类型，日常开发最常用三种：元素节点：对应HTML标签，如div、p、span，nodeType=1文本节点：标签内的文字、空格、换行，nodeType=3注释节点：HTML注释内容，nodeType=8开发中绝大多数操作都是元素节点，文本节点一般只做文本读取修改。3、获取DOM元素的方式有哪些？各自优缺点？参考答案：document.getElementById()

根据id获取元素，返回单个元素，速度最快，id唯一。缺点：只能通过id查询。document.getElementsByClassName()

根据类名获取，返回动态HTMLCollection集合，页面DOM更新后集合会自动更新。document.getElementsByTagName()

根据标签名获取，同样返回动态集合，适合批量获取同类型标签。document.querySelector()

万能选择器，支持css选择器，返回第一个匹配元素，静态获取。document.querySelectorAll()

返回所有匹配元素，是NodeList静态集合，DOM更新后集合不会自动刷新。总结：日常开发优先用querySelector/querySelectorAll，语法统一灵活；需要高性能批量查询用get系列。4、innerText、innerHTML、textContent的区别？参考答案：innerHTML

读取/写入标签内部的HTML结构，能解析标签。

优点：可以动态插入标签、样式结构；

缺点：有XSS注入风险，不建议直接拼接用户内容。innerText

只读取/写入纯文本，会识别页面样式，隐藏元素的文本不会获取，会自动格式化换行、空格，性能相对较差。textContent

纯文本读写，忽略样式，能获取隐藏元素文本，不会解析标签，性能最高，无XSS风险，日常优先使用。5、DOM事件冒泡和事件捕获是什么？事件执行顺序？参考答案：DOM事件分为三个阶段：捕获阶段、目标阶段、冒泡阶段事件捕获：从外层父元素向内层目标元素逐级触发（由外到内）事件冒泡：触发目标元素后，从内层向外层父元素逐级触发（由内到外）默认行为：addEventListener第三个参数默认false，只走冒泡阶段；设为true则走捕获阶段。完整执行顺序：页面最外层→逐级捕获→目标元素触发→逐级冒泡→页面最外层。6、如何阻止事件冒泡和默认事件？参考答案：阻止冒泡：event.stopPropagation()

阻止事件继续向上冒泡，外层元素不会触发同名事件。阻止默认事件：event.preventDefault()

阻止浏览器默认行为，比如a标签跳转、表单提交、右键菜单、滚轮默认行为。注意：returnfalse只能阻止默认事件，不能彻底阻止冒泡，不推荐通用使用。7、事件委托是什么？原理和优缺点？参考答案：事件委托也叫事件代理，利用事件冒泡机制，不给每个子元素绑定事件，只给父元素绑定一次事件，通过事件对象判断触发的子元素，统一处理逻辑。优点：减少事件绑定次数，节省内存支持动态新增的元素，无需重新绑定事件缺点：层级过多时会有事件延迟部分无冒泡的事件无法使用（如mouseenter）三、BOM相关面试题1、BOM包含哪些常用API？参考答案：BOM是浏览器对象模型，用来操作浏览器窗口，核心对象是window，常用能力：弹窗：alert、confirm、prompt定时器：setTimeout、setInterval、requestAnimationFrame地址栏：location（跳转、刷新、获取参数）历史记录：history（前进、后退、历史切换）浏览器信息：navigator（设备、浏览器版本）窗口操作：screen、窗口大小获取2、setTimeout和setInterval的区别？各自的坑？参考答案：setTimeout：延迟指定时间后执行一次setInterval：每隔指定时间循环执行常见问题：定时器时间不准：因为JS是单线程，如果主线程有耗时代码，定时器回调会被阻塞，延迟时间变长setInterval会出现任务堆积：如果单次回调执行时间超过间隔时间，会出现连续执行、跳过间隔的问题，项目中优先用setTimeout递归代替setInterval3、requestAnimationFrame和定时器的区别？参考答案：requestAnimationFrame（RAF）是浏览器专门为动画提供的API，跟随浏览器刷新频率执行（默认60帧/秒）。优势：精度更高，贴合屏幕刷新频率，动画更流畅页面隐藏、最小化时自动暂停，节省性能定时器有最小延迟误差，动画容易卡顿、抖动做帧动画、滚动动画优先使用RAF，延时执行逻辑用setTimeout。四、本地存储面试题1、localStorage、sessionStorage、Cookie区别？参考答案：1.生命周期Cookie：默认会话级，关闭页面失效，可手动设置过期时间localStorage：永久存储，手动删除或清空缓存才会失效sessionStorage：会话级，关闭当前标签页立即失效2.存储大小Cookie：4KB左右，容量极小localStorage/sessionStorage：5MB左右，容量更大3.是否随请求发送Cookie：每次HTTP请求都会自动携带到后台Storage：仅前端存储，不会自动传给后端4.作用域Cookie、localStorage：同域名共享sessionStorage：仅限当前标签页会话2、localStorage存储对象为什么会变成[objectObject]？怎么解决？参考答案：localStorage只能存储字符串，存入对象时会自动调用toString()方法，所以变成[objectObject]。解决方式：存储：JSON.stringify(对象)转为JSON字符串读取：JSON.parse(字符串)转回对象五、网络请求WebAPI面试题1、Ajax是什么？原理是什么？参考答案：Ajax是异步网页请求技术，核心是无需刷新整个页面，即可和后端交互数据，局部更新页面内容。原理：通过XMLHttpRequest或Fetch接口，在浏览器后台发起HTTP请求，接收后端返回数据后，通过DOM操作局部修改页面，实现无刷新更新。2、Fetch和XMLHttpRequest的区别？参考答案：XMLHttpRequest：传统请求方式，基于回调，兼容性极好，支持请求进度、中断请求、超时设置，代码繁琐。Fetch：ES6推出，基于Promise，语法简洁、链式调用，原生支持async/await；默认不携带cookie，需要手动配置credentials，且只会在网络错误时报错，HTTP4xx、5xx不会触发reject，需要手动判断状态码。现在项目开发优先使用Fetch或Axios，原生场景简单请求用Fetch。3、HTTP跨域是什么？为什么会跨域？怎么解决跨域？参考答案：跨域定义：浏览器同源策略限制，协议、域名、端口任意一个不同，就是跨域请求。同源策略目的：防止恶意网站窃取本地数据、劫持请求，保障前端安全。常用解决方式：后端CORS跨域：后端配置响应头，允许指定域名访问，正式项目主流方案开发环境代理：webpack/vite配置proxy代理，前端请求本地服务，本地服务转发请求，规避跨域JSONP：利用script标签不受跨域限制的特点，只能解决GET请求，兼容性好，现在基本淘汰nginx反向代理：线上部署常用，统一域名端口，消除跨域4、FormData的作用是什么？参考答案：FormData是浏览器提供的表单数据序列化接口，主要用于：快速收集表单所有数据，无需逐个获取表单值支持文件上传，可携带二进制文件自动设置请求头为multipart/form-data，适配后端文件接收接口日常文件上传、复杂表单提交基本都用FormData处理。六、异步执行与事件循环（WebAPI核心）1、浏览器事件循环执行机制？宏任务和微任务有哪些？参考答案：JS单线程执行，所有同步代码立即执行，异步代码交给WebAPI托管，完成后放入任务队列，主线程空闲时读取队列任务执行，这个循环过程就是事件循环。任务分类：宏任务（优先级低）：setTimeout、setIntervalAjax请求回调DOM事件回调script整体代码微任务（优先级高）：Promise.then/catch/finallyasync/await后续代码queueMicrotask执行顺序口诀：同步代码→所有微任务→一次宏任务→循环往复2、为什么定时器延迟时间不准？参考答案：定时器设定的时间是最小延迟时间，不是绝对执行时间。当主线程有同步耗时代码、大量微任务未执行完毕时，定时器回调会一直等待主线程空闲，导致实际执行时间大于设定时间，所以定时器永远无法做到精准计时。七、高频实操面试题1、如何实现图片懒加载？参考答案：核心思路：图片默认不加载真实地址，通过监听滚动事件或使用IntersectionObserver交叉观察器，判断图片进入可视区域后，再赋值真实src地址，实现懒加载。主流方案：IntersectionObserver，性能更高，无需监听滚动，浏览器原生监听元素可见性，是现在的标准写法。2、节流和防抖是什么？应用场景？参考答案：二者都是用来限制高频触发事件的执行次数，优化性能。防抖：触发后延迟执行，