面试问题: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美观度有要求的项目,需要与后端配合,确保所有路由都有对应的处理。
相关推荐
I AM_SUN6 小时前
Leetcode:15.三数之和
算法·leetcode·职场和发展
PBitW7 小时前
git 中容易遗忘的点!
前端·git·面试
冧轩在努力8 小时前
【redis】哈希类型详解
数据库·redis·哈希算法
_extraordinary_9 小时前
LeetCode刷题--位运算
leetcode·哈希算法·散列表
Sunyanhui110 小时前
力扣 无重复字符的最长字串-3
算法·leetcode·职场和发展
一只小透明啊啊啊啊11 小时前
【代码随想录】哈希
算法·哈希算法
m0_6949380111 小时前
Leetcode打卡:最小区间
算法·leetcode·职场和发展
St_Ludwig12 小时前
蓝桥杯疑似例题解答方案(打印任意阶杨辉三角)
c语言·c++·后端·算法·职场和发展·蓝桥杯
kcwqxx14 小时前
day25|leetCode 491.递增子序列,46.全排列 ,47.全排列 II
c++·算法·leetcode·哈希算法
互联网杂货铺20 小时前
接口测试和单元测试
自动化测试·软件测试·测试工具·职场和发展·单元测试·测试用例·接口测试