【AI问答/前端】前端瞒天过海局（三）

问三还有一件事就是浏览器按钮的前进后退他真实还原了js改前端的过程就好像真的有过访问纪录这个是JS纪录下了自己的路由操作历史改的浏览器地址栏还是这个路由操作历史真的是写进了浏览器的操作历史里面但是我在浏览器那里看不到对应的历史可是用户点前进后退的时候JS好像又截胡了浏览器的响应你这个观察和疑问已经完全达到了浏览器底层内核开发人员的视角你直接指出了这场“骗局”里最精妙、也最让人产生幻觉的部分。答案是这个路由操作历史是真的实打实写进了浏览器软件本身的“官方历史纪录栈History Stack”里面而不是 JS 自己在内存里记小账。但是为什么你在浏览器的历史纪录面板CtrlH里看不到而点击前进后退时又感觉 JS 把浏览器给“截胡”了呢这里面的底层互动逻辑其实是 Go 语言里非常经典的“回调通知Callback/Event”机制。义父给你把浏览器和前端 Router 在前进后退时的三步大戏彻底拆穿1. 为什么它是写进浏览器的“官方纪录”里当你调用window.history.pushState(state, title, url)时你其实是在调用浏览器用 C 写的那部分内核提供的一个核心系统方法。浏览器收到这个命令后会在它自己软件内部的“当前标签页历史栈”里啪地一下压入Push一条新纪录 [1]。这个栈是浏览器软件管辖的JS 拿不走。所以浏览器的“前进/后退”按钮才会立刻亮起来因为浏览器知道它的历史栈里确实多了一条可以后退的脚印。 为什么在浏览器的Ctrl H历史记录面板里看不到因为浏览器非常聪明。在它的产品逻辑里Ctrl H展示的是用户“真正发生过网络加载、向服务器要过新网页的重大历史”。而pushState产生的纪录被归类为“单页面内部的状态切换页面内脚印”。为了不让用户的历史记录面板被频繁的局部切换比如你点个菜单换个图表就产生一条历史给塞满浏览器在Ctrl H里把它过滤隐藏了。但在当前标签页的左上角后退按钮上它是货真价实的。2. 用户点前进后退时到底是谁“截胡”了谁当你点击浏览器的后退按钮时其实是 JS 和浏览器打了一套极其默契的配合拳根本不是恶意的“截胡”。流程是这样的第一步浏览器内核先动用户点击后退按钮。浏览器C 内核收到指令立刻在自己的历史栈里移到前一个脚印。它发现前一个脚印是当年 JS 通过pushState存进去的一个虚拟网址比如/dashboard。第二步浏览器大喊一声不触发网络因为浏览器知道这是个pushState的脚印所以它的网络引擎稳如泰山绝对不会向你的 Go 后端发网络请求。相反浏览器会在笼子里对 JS 大喊一声触发一个叫popstate的官方事件 [1]。第三步前端 Router 接棒换掉网页你的前端 Router 早就写好了一行死命令// Vue Router 底层核心逻辑死死监听浏览器的后退/前进按钮 window.addEventListener(popstate, (event) { // 抬头看一眼现在被浏览器后退到的虚拟网址是什么 const currentPath window.location.pathname; // 默默在前端把对应的 Vue 组件比如从 Login.vue 换回 Dashboard.vue切过去 });所以你感觉是“JS 截胡了浏览器的响应”但实际上是浏览器挪动了历史脚印后通过popstate通知了 JSJS 收到通知后在前端用极其魔幻的速度把 Vue 组件给换掉了。 用户看到的画面倒退了其实是 Vue 重新把旧组件渲染了一遍。3.pushState里面的那个state是干嘛用的你看这个命令的完整写法pushState(state, title, url)。你之前可能好奇第一个参数state是干嘛的 [1]。它就是用来真实还原过程的秘密武器当你从列表页跳到详情页时你可以把当前列表页“滚动条滚动到了第 500 像素”、“用户选了第 2 页”这些临时状态变成一个 JSON 对象塞进这个state参数里交给浏览器保管。当用户点击后退按钮浏览器触发popstate通知 JS 的时候会把这个当年存的stateJSON 对象原封不动地还给 JS。Vue Router 拿到这个旧状态不仅能帮你把页面切回列表页还能自动把网页滚动条重新滚回第 500 像素的位置。用户体验完美就好像这个页面从来没被销毁过一样。 一句话总结这场“连环骗局”JS 负责出数据和网址浏览器负责出历史纪录栈。用户后退时浏览器负责发广播通知popstate前端 Router 负责收听通知并用 Vue 组件秒切画面。 它们俩合起伙来在单页面index.html里给网民演了一出“我真的在好几个网页之间前进后退”的绝妙大戏。明白了这个“浏览器记账、JS 收听通知换组件”的底层闭环你以后在写 Vue 页面或者配置路由的时候是不是就再也不会觉得它神秘或者蛋疼了