面试问题:hash和history的区别

问:

hash和history的区别

回答:

  1. 工作原理‌:

    • hash模式 ‌:利用锚点技术,通过改变URL中的hash部分(即#后面的部分)来实现页面跳转,不会重新加载页面。例如,URL变为http://www.example.com/#/home时,hash值为#/home。这种模式下,hash值虽然出现在URL中,但不会被包含在HTTP请求中,因此不会对后端产生影响。‌12
    • history模式 ‌:利用HTML5 History API中的pushState()replaceState()方法,通过修改浏览器的历史记录来实现页面跳转。这种模式下,URL看起来更美观,没有#符号。例如,URL可以变为http://www.example.com/home。如果浏览器不支持这些方法,则无法使用history模式。
  2. 刷新页面时的行为‌:

    • hash模式 ‌:在hash模式下,刷新页面时,浏览器会保留当前的hash值,因此不会返回404错误。例如,即使URL变为http://www.example.com/#/home,浏览器也会正常显示页面内容。
    • history模式 ‌:在history模式下,刷新页面时会向服务器发送请求,如果服务器没有对应的路由处理,则会返回404错误。例如,如果URL变为http://www.example.com/home,而服务器没有对应的路由处理,则会返回404错误。
  3. 兼容性‌:

    • hash模式‌:兼容性较好,几乎所有浏览器都支持锚点技术,不需要服务器特别配置。
    • history模式‌:需要HTML5支持的浏览器,不支持IE6-8等老版本浏览器。
  4. 使用场景‌:

    • hash模式‌:适合对兼容性要求较高的项目,或者开发测试阶段使用。‌2
    • history模式‌:适合对URL美观度有要求的项目,需要与后端配合,确保所有路由都有对应的处理。
相关推荐
C++忠实粉丝28 分钟前
Linux系统基础-多线程超详细讲解(5)_单例模式与线程池
linux·运维·服务器·c++·算法·单例模式·职场和发展
螺蛳粉只吃炸蛋的走风2 小时前
网络编程IO多路复用之poll模式
网络·c++·面试·poll·阻塞与非阻塞
Aurora_th2 小时前
蓝桥杯 Python组-神奇闹钟(datetime库)
python·算法·职场和发展·蓝桥杯·datetime
南城花随雪。4 小时前
哈希表(Hash Table)、跳表(Skip List) 和 有序字典(Ordered Dictionary) 的详细介绍
list·哈希算法·散列表
付宇轩5 小时前
leetcode 173.二叉搜索树迭代器
算法·leetcode·职场和发展
WenGyyyL6 小时前
力扣每日一题——数组能够形成多少对
算法·leetcode·职场和发展·集合·数组·哈希表
CocowhoLynn6 小时前
P10424 [蓝桥杯 2024 省 B] 好数 题解
职场和发展·蓝桥杯
zmd-zk7 小时前
[spark面试]spark与mapreduce的区别---在DAG方面
大数据·分布式·面试·spark·mapreduce
trueEve8 小时前
SQL,力扣题目262,行程和用户
算法·leetcode·职场和发展
惟长堤一痕8 小时前
LeetCode 高频SQL50题(基础版)day01
算法·leetcode·职场和发展