面试问题: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美观度有要求的项目,需要与后端配合,确保所有路由都有对应的处理。
相关推荐
程序员曦曦1 小时前
17:00开始面试,17:08就出来了,问的问题有点变态。。。
自动化测试·软件测试·功能测试·程序人生·面试·职场和发展
_一条咸鱼_2 小时前
揭秘 Android View 位移原理:源码级深度剖析
android·面试·android jetpack
_一条咸鱼_2 小时前
深度剖析:Android View 滑动原理大揭秘
android·面试·android jetpack
_一条咸鱼_2 小时前
深度揭秘:Android View 滑动冲突原理全解析
android·面试·android jetpack
_一条咸鱼_2 小时前
揭秘 Android View 惯性滑动原理:从源码到实战
android·面试·android jetpack
八股文领域大手子4 小时前
深入理解缓存淘汰策略:LRU 与 LFU 算法详解及 Java 实现
java·数据库·算法·缓存·mybatis·哈希算法
帽儿山的枪手4 小时前
socket套接字你搞清楚了吗
网络协议·面试
wuqingshun3141595 小时前
蓝桥杯 11. 打印大X
数据结构·算法·职场和发展·蓝桥杯·深度优先
拉不动的猪6 小时前
前端常见数组分析
前端·javascript·面试