面试被问及 Hash 与 History 的区别,该怎么回答?

开发 前端
hash 通过监听浏览器 onhashchange 事件变化,查找对应路由应用。通过改变 location.hash 改变页面路由。history Interface 是浏览器历史记录栈提供的接口,可通过 back、forward、go 等。

[[442954]]

为什么推荐使用 hash 模式?

创建项目时,vue-router 默认使用 hash 模式,设置模式的时候到底该使用hash还是history模式呢?

先了解它们的实现原理,搞清楚之间的区别,就知道什么时候该选择什么模式了。

一、实现原理

hash 原理

hash 通过监听浏览器 onhashchange 事件变化,查找对应路由应用。通过改变 location.hash 改变页面路由。

history 原理

利用 html5 的history Interface 中新增的 pushState() 和 replaceState() 方法,改变页面路径。

history Interface 是浏览器历史记录栈提供的接口,可通过 back、forward、go 等,可以读取历览器历史记录栈的信息,pushState、repalceState 还可以对浏览器历史记录栈进行修改。

hash 与 history 区别对比:

二、为什么推荐使用 hash 模式?

理由:

1、从兼容角度分析。

hash 可以兼容到 IE8,而 history 只能兼容到 IE10。

2、从网络请求的角度分析。

使用 hash 模式,地址改变时通过 hashchange 事件,只会读取哈希符号后的内容,并不会发起任何网络请求。

而 history 模式,每访问一个页面都要发起网络请求,每个请求都需要服务器进行路由匹配、数据库查询、生成HTML文档后再发送响应给浏览器,这个过程会消耗服务器的大量资源,给服务器的压力较大。

3、服务器配置角度分析。

hash 不需要服务器任何配置。

history 进行刷新页面时,无法找到url对应的页面,会出现 404 问题。因为域名后面的路由是由前端控制的,后端只能保留域名部分,所以就会造成页面丢失的问题,需要服务器端添加一个回退路由,就能解决该问题了。

hash 模式不足

1、hash 模式中的 # 也称作锚点,这里的的 # 和 css 中的 # 是一个意思,所以在 hash 模式内,页面定位会失效。

2、hash 不利于 SEO(搜索引擎优化)。

3、白屏时间问题。浏览器需要等待 JavaScript 文件加载完成之后渲染 HTML 文档内容,用户等待时间稍长。

 

责任编辑:姜华 来源: 今日头条
相关推荐

2023-04-10 09:32:00

DubboJava

2021-03-24 10:25:24

优化VUE性能

2019-10-18 14:54:04

Kafka写入磁盘

2022-09-13 14:44:40

HashMap哈希表红黑树

2019-12-09 10:37:27

Hash算法面试

2013-08-21 13:43:16

架构师架构师面试职场面试

2011-06-30 17:58:30

网站被K

2024-02-26 00:26:16

ChatGPTMQQueue

2017-12-08 11:14:21

2023-11-15 07:54:03

HashMap数据结构

2019-02-15 20:00:49

软件测试工程师面试

2024-01-01 08:19:32

模式History前端

2019-11-19 16:10:24

面试官Java编程语言

2018-04-09 07:26:15

2022-09-05 09:02:01

服务器CPU服务

2009-07-21 14:44:15

求职面试自杀式回答

2021-04-13 10:41:25

Redis内存数据库

2020-07-02 07:52:11

RedisHash映射

2019-11-26 08:24:13

TCP拥塞控制网络协议

2018-06-07 22:10:42

阿里云ET农业大脑
点赞
收藏

51CTO技术栈公众号