面试被问及 hash 与 history 的区别该怎么回答?
haoteby 2024-11-11 12:45 14 浏览
为什么推荐使用 hash 模式？
创建项目时，vue-router 默认使用 hash 模式，设置模式的时候到底该使用hash还是history模式呢？
先了解它们的实现原理，搞清楚之间的区别，就知道什么时候该选择什么模式了。
一、实现原理
hash 原理
hash 通过监听浏览器 onhashchange 事件变化，查找对应路由应用。通过改变 location.hash 改变页面路由。
history 原理
利用 html5 的history Interface 中新增的 pushState() 和 replaceState() 方法，改变页面路径。
history Interface 是浏览器历史记录栈提供的接口，可通过 back、forward、go 等，可以读取历览器历史记录栈的信息，pushState、repalceState 还可以对浏览器历史记录栈进行修改。
hash 与 history 区别对比：
hash | history |
有 # 号 | 没有 # 号 |
能够兼容到IE8 | 只能兼容到IE10 |
实际的url之前使用哈希字符，这部分url不会发送到服务器，不需要在服务器层面上进行任何处理 | 每访问一个页面都需要服务器进行路由匹配生成 html 文件再发送响应给浏览器，消耗服务器大量资源 |
刷新不会存在 404 问题 | 浏览器直接访问嵌套路由时，会报 404 问题。 |
不需要服务器任何配置 | 需要在服务器配置一个回调路由 |
二、为什么推荐使用 hash 模式？
理由：
1、从兼容角度分析。
hash 可以兼容到 IE8，而 history 只能兼容到 IE10。
2、从网络请求的角度分析。
使用 hash 模式，地址改变时通过 hashchange 事件，只会读取哈希符号后的内容，并不会发起任何网络请求。
而 history 模式，每访问一个页面都要发起网络请求，每个请求都需要服务器进行路由匹配、数据库查询、生成HTML文档后再发送响应给浏览器，这个过程会消耗服务器的大量资源，给服务器的压力较大。
3、服务器配置角度分析。
hash 不需要服务器任何配置。
history 进行刷新页面时，无法找到url对应的页面，会出现 404 问题。因为域名后面的路由是由前端控制的，后端只能保留域名部分，所以就会造成页面丢失的问题，需要服务器端添加一个回退路由，就能解决该问题了。
hash 模式不足
1、hash 模式中的 # 也称作锚点，这里的的 # 和 css 中的 # 是一个意思，所以在 hash 模式内，页面定位会失效。
2、hash 不利于 SEO（搜索引擎优化）。
3、白屏时间问题。浏览器需要等待 JavaScript 文件加载完成之后渲染 HTML 文档内容，用户等待时间稍长。
好了小编今天的文章就到此结束了，喜欢我的可以点个关注哦
相关推荐
- 5个珍藏多年的资源网站，免费又实用，建议收藏
-
今天给大家分享5个珍藏多年的资源网站，每个都是免费的，而且非常的实用，建议收藏。1、wallhaven一个国外知名的壁纸网站，拥有海量的8k、4k的超清图片壁纸，该网站的图片是由各地的创作者提供下载，...
- 设计网站推荐 | 国内外设计类素材网站
-
网站分享|十个不得不推荐的设计类素材网站！一些压箱底的常用的设计类素材分享！一定要打开这些网站试一试哦！...
- 阿里巴巴旗下菜鸟裹裹换新LOGO?长高了
-
LOGO大师整理编辑（ID：logods）...
- 10个做PPT必备的素材网站，越用越上瘾，每个都是宝藏
-
Pexelshttps://www.pexels.com/zh-cn/...
- 阿里旗下的四款免费小工具 好用并且能大大提升工作效率
-
好的工具能大大的提升你的工作效率，今天给大家分享的是阿里旗下的四款经典免费小工具，主要是用来设计，能方便，且高效的提高你的工作效率，觉得有用就收藏了吧。第一个：阿里巴巴图标库阿里巴巴图标库有将近80多...
- UI设计入门干货!八大软件+技能+素材网站
-
随着互联网行业的发展，UI设计师越来越多的被提及，UI设计师大火，需求岗位越来越多，也有越来越多的人转行投身UI设计师。UI设计是什么？一般所说的UI设计多指UI视觉设计，主要负责APP、Web、H5...
- 干货!宝藏PPT素材——海量图标免费使用
-
我是星辰四个月的假期收集了一些PPT素材，筹备了这个公众号今天终于和大家见面了此公众号不定时更新各种素材干活和PPT模板记得关注我哦~后台发送“PPT”领取免费PPT模板总是很难找到合适PPT素材？费...
- 写了100多篇原创文章，我常用的在线工具网站推荐给大家
-
摘要不知不觉写博客已经一年多了，累计写了100多篇原创文章，今天给大家分享下我经常使用的在线工具网站，希望对大家有所帮助！MarkdownNice支持自定义样式的在线Markdown编辑器，编辑完成...
- 设计者必备神器:必须收藏的在线软件推荐
-
本内容来源于@什么值得买SMZDM.COM｜首席生活家保密对于新电脑或重新刷系统的电脑，安装一堆软件是很费时间的，而软件多了会对系统运行速度有影响，特别是机械硬盘，响应时间与软件数量成正比的。而用了...
- 干货 | 设计师必备网站，大神作品、图片素材一网打尽
-
经常会听到这样的一句话：设计师每日正式开始工作的第一件事，就是打开3个及以上的设计/素材网站。网站中的优秀作品不仅可以帮助设计师提升自己，还能激发创作的灵感，所以今天，我们为大家整理了一些国内外优秀的...
- 推荐11个超好用的在线作图网站
-
现在做图好像已经不是设计师的专利不管是新媒体人、文案，还是随便一个人不会随时随地做几张漂亮图不能分分钟出点海报、封面图、邀请函什么的还怎么昂首挺胸在办公室里混不会PS没关系，不会做图可不行所以今天老贼...
- 做设计还只知道花瓣包图网?这100+个免费商用素材网站送给你
-
作为设计师你常用的网站是哪些呢？花瓣？站酷？千库？千图？包图？这些网站确实是大家最常用的网站，各种风格的元素、模板、源文件，用起来可以说是得心应手了~但是一旦出现了这个场景，你就也跟着崩溃了........
- 5个好看的图标网站，直接搜索下载
-
今天和大家分享5个图标网站，里面收录大量丰富的图标，在这里找到好图标不是什么难事。Iconsdbwww.iconsdb.com...
- 8个高清无版权的图片资源网站，质量高又免费，够你用一辈子
-
很多时候我们找素材总是要花费很多时间，今天就给大家分享8个，高清无版权的图片资源网站，质量高又免费，够你用一辈子。01*Logosc...
- 淘宝PPT设计师不会告诉你的4个网站!帮你剩下不少钱
-
之前的文章中，给各位推荐过图片素材网站，像：500px，unsplash等，也给各位推荐过图标网站，像阿里巴巴图标库。这些网站都很好用。但是，我最近发现，有一类素材网站，在做PPT时也会经常用到，...