面试问题: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美观度有要求的项目,需要与后端配合,确保所有路由都有对应的处理。
相关推荐
uhakadotcom1 小时前
兄弟们,炸裂了!llama 4发布了!又有哪些创业公司被颠覆了?
前端·算法·面试
uhakadotcom1 小时前
EventEmitter3:高性能事件发射器的使用与优势
前端·javascript·面试
uhakadotcom2 小时前
🎭 Playwright:跨浏览器自动化测试框架
前端·javascript·面试
uhakadotcom2 小时前
Figma入门指南:协作设计的新时代
前端·javascript·面试
关二哥拉二胡2 小时前
前端的 AI 应用开发系列三:突破万能的基石 Function Calling
javascript·面试
uhakadotcom3 小时前
Supervised Fine-Tuning(SFT)最佳实践
算法·面试·github
uhakadotcom3 小时前
使用Python访问NVIDIA CUDA:简化并行计算
后端·面试·github
Richard20124 小时前
Java 源码 - 本地变量ThreadLocal
java·面试
uhakadotcom4 小时前
gRPC协议:高性能远程过程调用框架
后端·面试·github
Hole_up5 小时前
蓝桥杯真题-分糖果-题解
python·算法·职场和发展·蓝桥杯