面试问题: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美观度有要求的项目,需要与后端配合,确保所有路由都有对应的处理。
相关推荐
前端小巷子2 小时前
Web开发中的文件上传
前端·javascript·面试
Kaltistss3 小时前
98.验证二叉搜索树
算法·leetcode·职场和发展
mit6.8244 小时前
[Cyclone] 哈希算法 | SIMD优化哈希计算 | 大数运算 (Int类)
算法·哈希算法
你这个年龄怎么睡得着的4 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
牛客企业服务6 小时前
2025年AI面试推荐榜单,数字化招聘转型优选
人工智能·python·算法·面试·职场和发展·金融·求职招聘
Penk是个码农7 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye7 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
爱学习的茄子8 小时前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
程序员爱钓鱼9 小时前
Go 语言泛型 — 泛型语法与示例
后端·面试·go
爱coding的橙子10 小时前
每日算法刷题Day42 7.5:leetcode前缀和3道题,用时2h
算法·leetcode·职场和发展