如何让页面跳转更丝滑

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

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

一. 静态网页应用

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

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

二. Ajax应用

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

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

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

三. SPA应用

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

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

1. URL变化时，不会引起浏览器刷新页面。
   默认使用window.location.href=“http://www.xxx.com/xxx” 这种跳转方式 会引起页面刷新。

2. 页面切换时能记录到浏览器会话历史，保证前进/后退按钮正常使用。

实现方案

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

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

1. URL hash

基于锚点原理实现。

1. 页面跳转

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

2. 监听URL变化

监听hashchange和load事件。

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

addEventListener('hashchange',event => {
    // 路由匹配
})
addEventListener('load',event => {
    // 路由匹配
})
1
2
3
4
5
6

3. 路由匹配

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

4. 浏览器会话历史

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

2. history api

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

1. 页面跳转

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

2. 监听URL变化

监听popstate事件。

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

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

3. 路由匹配

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

4. 浏览器会话历史

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>
1

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