分享
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
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 文档内容，用户等待时间稍长。
好了小编今天的文章就到此结束了，喜欢我的可以点个关注哦
JavaScript 和 ES6
在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
