【学姐面试宝典】—— 前端基础篇Ⅰ
前言
博主主页👉🏻蜡笔雏田学代码
专栏链接👉🏻【前端面试专栏】
今天开始学习前端面试题相关的知识!
感兴趣的小伙伴一起来看看吧~🤞
文章目录
- http 和 https 的基本概念
- http 和 https 的区别
- https 协议的工作原理
- tcp 三次握手
- TCP 和 UDP 的区别
- BOM 属性对象方法
- 400 和 401、403 状态码
- fetch 发送 2 次请求的原因
- Cookie、sessionStorage、localStorage 的区别
- 对 HTML 语义化标签的理解
- iframe 是什么?有什么缺点?
http 和 https 的基本概念
http:
超文本传输协议,是互联网上应用最为广泛的一种网络协议,是一个客户端和服 务器端请求和应答的标准(TCP),用于从 WWW 服务器传输超文本到本地浏览器的传 输协议,它可以使浏览器更加高效,使网络传输减少。https:
是以安全为目标的 HTTP 通道,简单讲是 HTTP 的安全版,即 HTTP 下加入 SSL 层,HTTPS 的安全基础是 SSL,因此加密的详细内容就需要 SSL。 (https 的 SSL 加密是在传输层实现的。)https 协议的主要作用
:建立一个信息安全通道,来确保数组的传输,确保网站的真实 性。
http 和 https 的区别
http 传输的数据都是未加密的,也就是明文的,网景公司设置了 SSL 协议来对 http 协议 传输的数据进行加密处理,简单来说 https 协议是由 http 和 ssl 协议构建的可进行加密传 输和身份认证的网络协议
,比 http 协议的安全性更高。
主要的区别如下:
- Https 协议需要 ca 证书,费用较高。
- http 是
超文本传输协议
,信息是明文传输,https 则是具有安全性的ssl 加密传输协议
。 使用不同的链接方式,端口也不同,一般而言,http 协议的端口为 80,https 的端口为 443- http 的连接很简单,是无状态的;HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传 输、身份认证的网络协议,比 http 协议安全。
https 协议的工作原理
客户端在使用 HTTPS 方式与 Web 服务器通信时有以下几个步骤:
- 客户使用 https url 访问服务器,则要求 web 服务器建立 ssl 链接。
- web 服务器接收到客户端的请求之后,会将网站的证书(证书中包含了公钥),返回或 者说传输给客户端。
- 客户端和 web 服务器端开始协商 SSL 链接的安全等级,也就是加密等级。
- 客户端浏览器通过双方协商一致的安全等级,建立会话密钥,然后通过网站的公钥来加 密会话密钥,并传送给网站。
- web 服务器通过自己的私钥解密出会话密钥。
- web 服务器通过会话密钥加密与客户端之间的通信。
tcp 三次握手
一句话概括:客户端和服务端都需要直到各自可收发,因此需要三次握手
。
简化三次握手:
从图片可以得到三次握手可以简化为:C 发起请求连接 S 确认,也发起连接 C 确认我们 再看看每次握手的作用:第一次握手:S 只可以确认 自己可以接受 C 发送的报文段第 二次握手:C 可以确认 S 收到了自己发送的报文段,并且可以确认 自己可以接受 S 发 送的报文段第三次握手:S 可以确认 C 收到了自己发送的报文段。
TCP 和 UDP 的区别
- TCP 是面向连接的,UDP 是无连接的即发送数据前不需要先建立链接。
- TCP 提供可靠的服务。也就是说,通过 TCP 连接传送的数据,无差错,不丢失, 不重复,且按序到达;UDP 尽最大努力交付,即不保证可靠交付。 并且因为 TCP 可靠, 面向连接,不会丢失数据因此适合大数据量的交换。
- TCP 是面向字节流,UDP 面向报文,并且网络出现拥塞不会使得发送速率降低(因 此会出现丢包,对实时的应用比如 IP 电话和视频会议等)。
- TCP 只能是 1 对 1 的,UDP 支持 1 对 1,1 对多。
- TCP 的首部较大为 20 字节,而 UDP 只有 8 字节。
- TCP 是面向连接的可靠性传输,而 UDP 是不可靠的。
BOM 属性对象方法
什么是 Bom?
Bom 是浏览器对象。
有哪些常用的 Bom 属性呢?
location 对象
:
location.href——返回或设置当前文档的 URL
location.search——返回 URL 中的查询字符串部分
。例 如 http://www.dreamdu.com/dreamdu.php?id=5&name=dreamdu —— 返回包括(?)后面的内 容?id=5&name=dreamdu
location.hash——返回 URL#后面的内容
,如果没有#,返回空。
location.host——返回 URL 中的域名部分
,例如 www.dreamdu.com
location.hostname——返回 URL 中的主域名部分
,例如 dreamdu.com
location.pathname——返回 URL 的域名后的部分
。例如 http://www.dreamdu.com/xhtml/ 返 回/xhtml/
location.port——返回 URL 中的端口部分
。例如 http://www.dreamdu.com:8080/xhtml/ 返回 8080
location.protocol——返回 URL 中的协议部分
。例如 http://www.dreamdu.com:8080/xhtml/ 返 回(//)前面的内容 http:
location.assign——设置当前文档的 URL
location.replace() ——设置当前文档的 URL,并且在 history 对象的地址列表中移除这个 URL location.replace(url);
location.reload()——重载当前页面
history 对象
history.go() ——前进或后退指定的页面数 history.go(num);
history.back() ——后退一页
history.forward() ——前进一页
Navigator 对象
navigator.userAgent ——返回用户代理头的字符串表示(就是包括浏览器版本信息等的字 符串) navigator.cookieEnabled ——返回浏览器是否支持(启用)cookie
400 和 401、403 状态码
- 400 状态码:
请求无效
产生原因:前端提交数据的字段名称和字段类型与后台的实体没有保持一致,前端提交到后台的数据应该是 json 字符串类型,但是前端没有将对象 JSON.stringify 转 化成字符串。
解决方法:对照字段的名称,保持一致性 将 obj 对象通过 JSON.stringify 实现序列化- 401 状态码:当前请求需要用户验证
- 403 状态码:服务器已经得到请求,但是拒绝执行
fetch 发送 2 次请求的原因
fetch 发送 post 请求的时候,总是发送 2 次,第一次状态码是 204,第二次才成功?
原因很简单,因为你用 fetch 的 post 请求的时候,导致 fetch 第一次发送了一个 Options 请求,询问服务器是否支持修改的请求头,如果服务器支持,则在第二次中发送真正的 请求。
Cookie、sessionStorage、localStorage 的区别
共同点:
都是保存在浏览器端,并且是同源的
Cookie:
cookie 数据始终在同源的 http 请求中携带(即使不需要),即 cookie 在浏览器 和服务器间来回传递。而 sessionStorage 和 localStorage 不会自动把数据发给服务器,仅 在本地保存。cookie 数据还有路径(path)的概念,可以限制 cookie 只属于某个路径下, 存储的大小很小只有 4K 左右。 (key:可以在浏览器和服务器端来回传递,存储容量 小,只有大约 4K 左右)
sessionStorage:
仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持,localStorage: 始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie 只在设置的 cookie 过期时间之前一直有效,即使窗口或浏览器关闭。(key:本身就是一个回话过程,关 闭浏览器后消失,session 为一个回话,当页面不同即使是同一页面打开两次,也被视为 同一次回话)
localStorage:
localStorage 在所有同源窗口中都是共享的;cookie 也是在所有同源窗口中 都是共享的。(key:同源窗口都会共享,并且不会失效,不管窗口或者浏览器关闭与 否都会始终生效)
补充说明一下 cookie 的作用:
保存用户登录状态。例如将用户 id 存储于一个 cookie 内,这样当用户下次访问该页面 时就不需要重新登录了,现在很多论坛和社区都提供这样的功能。 cookie 还可以设置 过期时间,当超过时间期限后,cookie 就会自动消失。因此,系统往往可以提示用户保 持登录状态的时间:常见选项有一个月、三个 月、一年等。
跟踪用户行为。例如一个天气预报网站,能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的,当利用了 cookie 后就会显得很人性化了,系统能 够记住上一次访问的地区,当下次再打开该页面时,它就会自动显示上次用户所在地区 的天气情况。因为一切都是在后 台完成,所以这样的页面就像为某个用户所定制的一 样,使用起来非常方便定制页面。如果网站提供了换肤或更换布局的功能,那么可以使 用 cookie 来记录用户的选项,例如:背景色、分辨率等。当用户下次访问时,仍然可以 保存上一次访问的界面风格。
对 HTML 语义化标签的理解
HTML5 语义化标签是指正确的标签包含了正确的内容,结构良好,便于阅读,比如 nav 表示导航条,类似的还有 article、header、footer 等等标签。
iframe 是什么?有什么缺点?
定义:iframe 元素会创建包含另一个文档的内联框架
提示:可以将提示文字放在
<
<
<iframe>
<
<
</iframe>之间,来提示某些不支持 iframe 的浏览器。
缺点:会阻塞主页面的 onload 事件 搜索引擎无法解读这种页面,不利于 SEO iframe 和主页面共享连接池,而浏览器对相同区域有限制所以会影响性能。
今天的分享就到这里啦✨ \textcolor{red}{今天的分享就到这里啦✨} 今天的分享就到这里啦✨
原创不易,还希望各位大佬支持一下 \textcolor{blue}{原创不易,还希望各位大佬支持一下} 原创不易,还希望各位大佬支持一下
🤞 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!
⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!
✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!