用户在地址栏输入URL或者点击链接后，浏览器会发出请求，然后Web应用负责把URL映射到指定页面，即路由。

路由映射逻辑可以由前端实现(即前端路由)，也可以是后端实现(即后端路由)。

一. 静态网页应用

前期的Web应用一般是静态页面，采用后端路由。后端接受到请求后，解析并匹配URL，返回HTML给浏览器。

静态网页应用不好的地方是: 用户每次更新操作都需要刷新页面，用户交互体验不佳。

二. Ajax应用

后来，出现了革命性的技术-Ajax，它允许网页在不刷新页面的情况跟后端交互数据，实现局部刷新页面。

当用户有更新操作时，通过XMLHttpRequest跟后端异步交互数据，然后用JavaScript进行DOM操作，更新页面。

简单的Ajax应用解决了页面更新的问题，但页面跳转的问题依然存在。

三. SPA应用

SPA是在Ajax的基础上诞生的，它实现了在不刷新页面的情况进行页面更新和页面跳转，由前端路由来切换页面。

前端路由要解决的两个核心问题:

URL变化时，不会引起浏览器刷新页面。
默认使用window.location.href=“http://www.xxx.com/xxx” 这种跳转方式会引起页面刷新。
页面切换时能记录到浏览器会话历史，保证前进/后退按钮正常使用。

实现方案

前端路由的设计思路是: 使用自定义的页面跳转方式; 检测URL变化，解析匹配URL并路由到指定页面。

常见有以下两种实现方案:

1. URL hash

基于锚点原理实现。

页面跳转

通过改变URL #hash值来跳转页面(URL #hash的变化不会引起页面刷新)。

监听URL变化

监听hashchange和load事件。

当URL #hash值变化时会触发hashchange事件;
当页面刷新时会触发load事件。

addEventListener('hashchange',event => {// 路由匹配
})
addEventListener('load',event => {// 路由匹配
})

路由匹配

解析匹配URL，并路由到指定页面。

浏览器会话历史

URL #hash值的变化会被加入到浏览器会话历史。

2. history api

基于浏览器会话历史 api实现。

页面跳转

使用pushstate()和replacestate()来跳转页面。(只改变URL，不会引起页面刷新)

监听URL变化

监听popstate事件。

在同一文档的不同历史记录条目之间导航时，会触发popstate事件(pushstate()和replacestate()不会触发popstate事件)。

addEventListener('popstate',event => {// 路由匹配
})

路由匹配

解析匹配URL，并路由到指定页面。

浏览器会话历史

history api会正常记录浏览器会话历史。

3. 对比

URL hash: 不需要后端做多余的重定向处理，但后端也无法正常获取到URL的#hash值。
history api: 后端可以获取到完整的URL参数，但需要后端支持重定向到入口html。

总结

路由的本质是将URL映射到指定页面，它是Web应用的基本功能。

前期的静态网页应用使用后端路由，由后端做路由映射并返回HTML。不足之处是: 用户每次更新操作都需要刷新页面。

后来，出现了革命性的技术-Ajax，允许网页在不刷新页面的情况跟后台交互数据，实现页面局部刷新。

为了进一步提升页面跳转的交互体验，出现了SPA，它实现了在不刷新页面的情况进行页面更新和页面跳转。主要有基于URL #hash和基于history api两种实现方案。

补充

锚点

锚点链接可以跳转到页面中指定位置。当页面内容较多时，可以提升用户体验。

a. 创建锚点

<h1 name="anchor_a">锚点a<h1>

b. 访问锚点链接(url的#hash值就是锚点)，页面会自动定位到锚点位置。
http://www.xxx.com#anchor_a

如何让页面跳转更丝滑相关推荐

让你的网页更丝滑（一）
前段时间,我将精力专注在Web性能领域:在这个领域下有个重要的课题是如何让网页更丝滑(流畅). 想让网页变得丝滑,首先,我们需要一个标准来判断什么样的网页是丝滑的:其次,我们要准确的测量出网页的性能数 ...
让你的网页更丝滑（全）
这篇文章是2019年5月11号,我在上海FDConf2019上的分享整理. 演讲主题:[让你的网页更丝滑] 时间:2019年5月11日(下午) 地点:上海 - FDCon2019 - B会场(全栈&a ...
java安装好了打不开机_劝告大家！早餐打豆浆，黄豆泡好直接打不对，教你1招，豆浆香浓更丝滑...
" 导语:打豆浆泡好直接打?难怪豆浆没有早餐店的好喝,教你正确做法适当吃豆制品对于大人小孩都有好处,豆浆作为其中的一种,更是我家早餐常会喝的,香浓顺滑的豆浆,搭配油条或者是饼,美好的早餐便 ...
Mac 让程序坞更丝滑
Mac在设置自动隐藏和显示程序坞后,鼠标滑到程序坞位置,默认有1秒的延迟才会出现. 为了让这一操作更丝滑,可以在终端中使用如下命令: defaults write com.apple.Dock aut ...
这样设置过渡动画，让你的Android手机变得更丝滑
前言通过合理的设置安卓中过渡动画的缩放速度,可以让安卓手机中窗口的切换更自然.更流畅,操作上感觉更加的丝滑.安卓手机上一般有窗口动画缩放(window_animation_scale).过渡动画缩放 ...
让你的app体验更丝滑的11种方法！冲击手机应用榜单Top3指日可待
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由WeTest质量开放平台团队发表于云+社区专栏一款app除了要有令人惊叹的功能和令人发指交互之外,在性能上也应该追求丝滑的要求,这 ...
Unity简单几行代码让玩家水平移动更丝滑真实
可以先来看看基础的移动代码,接收玩家的输入,然后赋予刚体速度. 但是这种写法存在几个问题,下面一一纠正. 首先,如果直接改变刚体的速度,那么可能会出现穿墙的问题. 而且没有一种从速度0到缓慢加速的过程 ...
html5用代码实现页面跳转页面跳转,H5上滑跳转页面的实现（代码实例）
本文给大家介绍H5上滑跳转页面的实现,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 方法一:movePage($('body')); function movePage(dom) ...
使用 Circular Reveal 动画让页面跳转更炫酷
Android 5.0中引入了很多炫酷的动画效果,Circular Reveal便是其中一种.使用起来很简单,但效果却是意想不到的炫酷,让你的app更有逼格. 一.效果废话不说,下面的gif图中使用 ...

如何让页面跳转更丝滑