当前位置: 首页 > news >正文

如何让页面跳转更丝滑

用户在地址栏输入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的变化不会引起页面刷新)。

  1. 监听URL变化

监听hashchangeload事件。

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

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

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

  1. 浏览器会话历史

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

2. history api

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

  1. 页面跳转

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

  1. 监听URL变化

监听popstate事件。

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

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

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

  1. 浏览器会话历史

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

相关文章:

  • docker_重装mysql
  • [论文阅读] 颜色迁移-Automated Colour Grading
  • 卡尔曼滤波算法原理
  • 结构重参数化
  • 浏览器高度兼容性
  • 【Typora】Typora 新手入门参数配置记录
  • OS-调度
  • DiffuSEEG:一种基于stable diffusion 的SEEG数据补全方法
  • Nginx配置实例-动静分离
  • 【WPF】附加事件
  • Armbian搭建本地Gitea服务器
  • 毕业设计-基于机器视觉的车型识别系统
  • 程序员基础能力系列(2)——vscode快捷键总结
  • 软件架构基本功
  • 从源码上解决rosdep update失败问题
  • MySQL 事务
  • 后续遍历非递归算法
  • MFC列表控件的用法(基于对话框的编程)
  • NFS协议详解
  • Compiere的应用字典介绍
  • 小程序-模板与配置-WXSS模板样式
  • 小程序-模板与配置-WXML模板语法
  • 群晖NAS安装frp实现内网穿透(非Docker)
  • Linux性能学习(2.1):内存_查看系统内存以及Buffer Cached说明
  • Connext DDS开发指南(5)基本QoS策略
  • MoCoViT: Mobile Convolutional Vision Transformer
  • Harbor安装
  • leetcode解题思路分析(一百三十六)1158 - 1169 题
  • @EnableWebMvc注解让swagger-ui.html无法打开404报错问题及其解决方案(史上最全最详细)
  • Java接口:概述、多实现、多继承、JDK8后接口新增方法
  • 北大的校徽是谁设计的 第一任校长是谁
  • 助学贷款官网登录手机版入口在哪
  • 2023内蒙古高考专科分数线公布 专科多少分
  • 2023宁夏高考报名人数预测 报考人数预计多少
  • 上海交通大学2023强基计划招生专业有哪些
  • 法家思想主张是什么 法家代表人物有谁
  • i是主格还是宾格
  • 2021年江西高考信息公开公示规定
  • 2023大连科技学院适合女生的专业有哪些 什么专业好就业
  • 2023汉语言文学专业就业方向及前景 好不好就业