2024年Web前端最全面试被问及 hash 与 history 的区别该怎么回答?(2),2024年最新网易Web前端面试必问

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML,CSS,前端基础,前端核心,前端进阶,移动端开发,计算机基础,算法与数据结构,项目,职业发展等等

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

创建项目时,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。

学习笔记

主要内容包括html,css,html5,css3,JavaScript,正则表达式,函数,BOM,DOM,jQuery,AJAX,vue等等

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML/CSS

**HTML:**HTML基本结构,标签属性,事件属性,文本标签,多媒体标签,列表 / 表格 / 表单标签,其他语义化标签,网页结构,模块划分

**CSS:**CSS代码语法,CSS 放置位置,CSS的继承,选择器的种类/优先级,背景样式,字体样式,文本属性,基本样式,样式重置,盒模型样式,浮动float,定位position,浏览器默认样式

HTML5 /CSS3

**HTML5:**HTML5 的优势,HTML5 废弃元素,HTML5 新增元素,HTML5 表单相关元素和属性

**CSS3:**CSS3 新增选择器,CSS3 新增属性,新增变形动画属性,3D变形属性,CSS3 的过渡属性,CSS3 的动画属性,CSS3 新增多列属性,CSS3新增单位,弹性盒模型

JavaScript

**JavaScript:**JavaScript基础,JavaScript数据类型,算术运算,强制转换,赋值运算,关系运算,逻辑运算,三元运算,分支循环,switch,while,do-while,for,break,continue,数组,数组方法,二维数组,字符串

switch,while,do-while,for,break,continue,数组,数组方法,二维数组,字符串

[外链图片转存中…(img-Jib9wt94-1715414875943)]

  • 8
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值