浅谈前端路由的原理

前言

前端路由相信大家都不陌生，对于现在主流是SPA（单页面应用）框架，前端路由显得格外重要，比如react的react-router以及vue的vue router等等。它们出现的主要目的是为了提高性能以及用户体验。

实现原理

hash

使用案例：

1 http://10.0.0.1/
2 http://10.0.0.1/#/about
3 http://10.0.0.1/#/concat

在HTML5之前，前端路由就是使用hash实现， URI 规则中需要带上 #。
更新hash路由的方式：

• window.location.hash
• html的a标签

如何监听hash路由变化：
通过hashchange事件，比如mdn上的一个示例：

window.addEventListener('hashchange', function() {
  console.log('The hash has changed!')
}, false);

history

使用案例：

1 http://10.0.0.1/
2 http://10.0.0.1/about
3 http://10.0.0.1/concat

基于HTML5的history API。
更新history路由的方式：（使用History的静态方法）

• History.pushState()
• History.replaceState()
• History.go()
• History.forward()
• History.back()

有关这些API的使用，大家可以去mdn官网查阅，这里我就不做介绍，官网地址：History

如何监听history路由变化：
通过popstate事件，但是调用history.pushState()或history.replaceState()不会触发popstate事件。mdn的使用示例：

window.addEventListener('popstate', (event) => {
  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
});
history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // Logs "location: http://example.com/example.html, state: null
history.go(2);  // Logs "location: http://example.com/example.html?page=3, state: {"page":3}

自定义一个全局事件来监听history.pushState()和history.replaceState()，这种案例大家可以自行网上搜索。

如何性能优化

前端路由性能上的优化主要目的是为了提高用户体验，更具体的而言，就是页面进行首次渲染的时候能够让用户更快的看到内容。那么它的底层原理究竟是什么呢？

路由与Tabs

不知道大家平时在使用组件的时候有注意到一个细节现象没，就是路由组件的使用与Tabs组件的使用非常相似甚至可以说完全一致，但是它们两个的底层实现也是完全一样吗？答案是完全不一样。
对于Tabs的实现，我们是把所有tab的内容全部转换成真实dom并插入到浏览器页面，然后通过控制其display来决定显示哪个tab。
对于路由，它是把所有的分支内容全部生成为虚拟dom存放在内容当中，然后仅仅只把当前路由下的虚拟dom渲染成真实dom并插入到浏览器页面中
所以如果我们打开浏览器devtools查看时会发现一个现象，对于Tabs组件，它的所有内容都在dom树中，切换tab只不过是更新内容的display；对于路由组件，dom树中只显示当前路由下的所有内容，切换路由，这个dom的所有内容都会刷新，但是不会生成多余的dom。
知道了路由和Tabs的实现原理，进而也就不难解释为什么路由能够提升页面的首次渲染以及它俩的利弊。

小结

总结一下路由与Tabs的各自优缺点：

• 对于路由而言，由于每次只加载当前路由下的内容，所以对于首次渲染，其效率非常高，因为它不需要创建任何对于的dom节点，但是对于更新路由由于每次都是完全替换所有dom节点，所以性能损耗较大。
• 对于Tabs而言，它是直接把所有的内容都创建成dom，所以对于首次渲染而言，其效率比较低，但是对于更新tab，那么其效率是非常高效。

结语

这篇博客讲述前端路由的实现原理并且通过对比Tabs组件重点讲述了其为什么能够提高用户体验，相信通过对比讲述能够让大家对路由以及Tabs有更深刻的了解。同样，如果大家有任何疑问，欢迎评论区留言或者私信我，如果本篇文章有讲述不对之处也欢迎评论区指正，下期再会。