2026前端面经

2026前端面经1、前端怎么做到页面无刷新1、前端怎么做到页面无刷新前端无刷新更新页面核心就是不重新加载整个 HTML 页面只局部更新数据和视图这也是现代 Web 应用SPA的核心能力。原生 AJAX (XMLHttpRequest) —— 基础方案最经典的无刷新方式通过异步请求后端数据局部更新 DOM。适用简单页面、局部数据刷新。// 1. 创建请求对象constxhrnewXMLHttpRequest();// 2. 配置请求xhr.open(GET,/api/data,true);// 3. 监听响应xhr.onloadfunction(){if(xhr.status200){constresJSON.parse(xhr.responseText);// 无刷新更新页面DOMdocument.getElementById(content).innerHTMLres.msg;}};// 4. 发送请求xhr.send();Fetch API —— 现代原生方案比 AJAX 更简洁基于 Promise现代浏览器默认支持无需第三方库。// 异步请求 无刷新渲染fetch(/api/data).then(resres.json()).then(data{// 只更新需要修改的部分不刷新页面document.querySelector(#user-info).innerTextdata.name;}).catch(errconsole.error(err));Axios —— 企业最常用封装好的 HTTP 库用得最多支持拦截器、异常处理。axios.get(/api/user).then(res{// 无刷新渲染document.getElementById(list).innerHTMLres.data.list.map(itemdiv${item.name}/div).join();});前端路由 (SPA 核心) —— 无刷新切换页面真正实现 “无刷新跳转页面”通过改变 URL 但不请求新 HTML只切换组件。核心技术hash 路由url#/home# 后面变化不会请求服务器history 路由url/homeH5 API更美观原生简单实现hash 路由// 监听 URL 哈希变化window.addEventListener(hashchange,(){consthashlocation.hash.slice(1);// 根据hash无刷新切换内容if(hashhome){document.getElementById(view).innerHTMLh1首页/h1;}elseif(hashabout){document.getElementById(view).innerHTMLh1关于页/h1;}});框架路由Vue/React这是现代无刷新页面的标准方案Vuevue-routerReactreact-router-dom路由切换 → 组件更新 → 页面无刷新。WebSocket —— 实时无刷新推送适合聊天、通知、数据实时更新服务端主动推送给前端。constwsnewWebSocket(ws://localhost:8080);ws.onmessagefunction(e){// 实时无刷新更新页面document.getElementById(msg).innerTexte.data;};异步更新 DOM纯前端无刷新不请求后端仅前端交互无刷新点击切换内容表单实时验证折叠 / 展开面板// 点击按钮无刷新修改文字document.getElementById(btn).onclick(){document.getElementById(text).innerText已更新;};总结无刷新核心异步请求 / 路由切换 局部 DOM 更新现代开发优先用 Axios 前端路由框架标配实时场景用 WebSocket所有方案都不会重新加载整个页面体验更流畅