关于http、html和浏览器的22个Web前端面试总结

2018年7月31日17:00:07 发表评论 21 views

关于http、html和浏览器的22个Web前端面试总结

关于http、html和浏览器的22个Web前端面试总结

 

1、http和https

https的SSL加密是在传输层实现的。

(1)、http和https的基本概念

http: 超文本传输协议,是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(TCP),用于从WWW服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高效,使网络传输减少。

关于http、html和浏览器的22个Web前端面试总结

 

https: 是以安全为目标的HTTP通道,简单讲是HTTP的安全版,即HTTP下加入SSL层,HTTPS的安全基础是SSL,因此加密的详细内容就需要SSL。

https协议的主要作用是:建立一个信息安全通道,来确保数组的传输,确保网站的真实性。

 

(2)、http和https的区别?

http传输的数据都是未加密的,也就是明文的,网景公司设置了SSL协议来对http协议传输的数据进行加密处理,简单来说https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议,比http协议的安全性更高。

主要的区别如下:

  • Https协议需要ca证书,费用较高。
  • http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。
  • 使用不同的链接方式,端口也不同,一般而言,http协议的端口为80,https的端口为443
  • http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全。

 

(3)、https协议的工作原理

  • 客户端在使用HTTPS方式与Web服务器通信时有以下几个步骤。
  • 客户使用https url访问服务器,则要求web 服务器建立ssl链接。
  • web服务器接收到客户端的请求之后,会将网站的证书(证书中包含了公钥),返回或者说传输给客户端。
  • 客户端和web服务器端开始协商SSL链接的安全等级,也就是加密等级。
  • 客户端浏览器通过双方协商一致的安全等级,建立会话密钥,然后通过网站的公钥来加密会话密钥,并传送给网站。
  • web服务器通过自己的私钥解密出会话密钥。
  • web服务器通过会话密钥加密与客户端之间的通信。

 

(4)、https协议的优点

  • 使用HTTPS协议可认证用户和服务器,确保数据发送到正确的客户机和服务器;
  • HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,要比http协议安全,可防止数据在传输过程中不被窃取、改变,确保数据的完整性。
  • HTTPS是现行架构下最安全的解决方案,虽然不是绝对安全,但它大幅增加了中间人攻击的成本。
  • 谷歌曾在2014年8月份调整搜索引擎算法,并称“比起同等HTTP网站,采用HTTPS加密的网站在搜索结果中的排名将会更高”。

 

(5)、https协议的缺点

  • https握手阶段比较费时,会使页面加载时间延长50%,增加10%~20%的耗电。
  • https缓存不如http高效,会增加数据开销。
  • SSL证书也需要钱,功能越强大的证书费用越高。
  • SSL证书需要绑定IP,不能再同一个ip上绑定多个域名,ipv4资源支持不了这种消耗。

 

2、tcp三次握手,一句话概括

客户端和服务端都需要直到各自可收发,因此需要三次握手。

简化三次握手:

关于http、html和浏览器的22个Web前端面试总结

从图片可以得到三次握手可以简化为:C发起请求连接S确认,也发起连接C确认我们再看看每次握手的作用:第一次握手:S只可以确认 自己可以接受C发送的报文段第二次握手:C可以确认 S收到了自己发送的报文段,并且可以确认 自己可以接受S发送的报文段第三次握手:S可以确认 C收到了自己发送的报文段

 

3、TCP和UDP的区别

(1)TCP是面向连接的,udp是无连接的即发送数据前不需要先建立链接。

(2)TCP提供可靠的服务。也就是说,通过TCP连接传送的数据,无差错,不丢失,不重复,且按序到达;UDP尽最大努力交付,即不保证可靠交付。 并且因为tcp可靠,面向连接,不会丢失数据因此适合大数据量的交换。

(3)TCP是面向字节流,UDP面向报文,并且网络出现拥塞不会使得发送速率降低(因此会出现丢包,对实时的应用比如IP电话和视频会议等)。

(4)TCP只能是1对1的,UDP支持1对1,1对多。

(5)TCP的首部较大为20字节,而UDP只有8字节。

(6)TCP是面向连接的可靠性传输,而UDP是不可靠的。

 

4、WebSocket的实现和应用

(1)、什么是WebSocket?

WebSocket是HTML5中的协议,支持持久连续,http协议不支持持久性连接。Http1.0和HTTP1.1都不支持持久性的链接,HTTP1.1中的keep-alive,将多个http请求合并为1个。

 

(2)、WebSocket是什么样的协议,具体有什么优点?

  • HTTP的生命周期通过Request来界定,也就是Request一个Response,那么在Http1.0协议中,这次Http请求就结束了。在Http1.1中进行了改进,是的有一个connection:Keep-alive,也就是说,在一个Http连接中,可以发送多个Request,接收多个Response。但是必须记住,在Http中一个Request只能对应有一个Response,而且这个Response是被动的,不能主动发起。
  • WebSocket是基于Http协议的,或者说借用了Http协议来完成一部分握手,在握手阶段与Http是相同的。我们来看一个websocket握手协议的实现,基本是2个属性,upgrade,connection。

基本请求如下:

  1. GET /chat HTTP/1.1
  2. Host: server.example.com
  3. Upgrade: websocket
  4. Connection: Upgrade
  5. Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
  6. Sec-WebSocket-Protocol: chat, superchat
  7. Sec-WebSocket-Version: 13
  8. Origin: http://example.com

多了下面2个属性:

  • Upgrade:webSocket
  • Connection:Upgrade

告诉服务器发送的是websocket

  1. Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
  2. Sec-WebSocket-Protocol: chat, superchat
  3. Sec-WebSocket-Version: 13

 

5、HTTP请求的方式,HEAD方式

  • head:类似于get请求,只不过返回的响应中没有具体的内容,用户获取报头
  • options:允许客户端查看服务器的性能,比如说服务器支持的请求方式等等。

 

6、一个图片url访问后直接下载怎样实现?

请求的返回头里面,用于浏览器解析的重要参数就是OSS的API文档里面的返回http头,决定用户下载行为的参数。下载的情况下:

1. x-oss-object-type:

Normal

2. x-oss-request-id:

598D5ED34F29D01FE2925F41

3. x-oss-storage-class:

Standard

 

7、web Quality (无障碍)

能够被残障人士使用的网站才能称得上一个易用的(易访问的)网站。

残障人士指的是那些带有残疾或者身体不健康的用户。

使用alt属性:

  1. <img src="person.jpg"  alt="this is a person"/>

有时候浏览器会无法显示图像。具体的原因有:

  • 用户关闭了图像显示
  • 浏览器是不支持图形显示的迷你浏览器
  • 浏览器是语音浏览器(供盲人和弱视人群使用)
  • 如果您使用了 alt 属性,那么浏览器至少可以显示或读出有关图像的描述。

 

8、几个很实用的BOM属性对象方法?

什么是Bom? Bom是浏览器对象。有哪些常用的Bom属性呢?

(1)、location对象

  • location.href-- 返回或设置当前文档的URL
  • location.search -- 返回URL中的查询字符串部分。
  • location.hash -- 返回URL#后面的内容,如果没有#,返回空
  • location.host -- 返回URL中的域名部分
  • location.hostname -- 返回URL中的主域名部分
  • location.pathname -- 返回URL的域名后的部分。
  • location.port -- 返回URL中的端口部分。
  • location.protocol -- 返回URL中的协议部分。
  • location.assign -- 设置当前文档的URL
  • location.replace() -- 设置当前文档的URL,并且在history对象的地址列表中移除这个URL location.replace(url);
  • location.reload() -- 重载当前页面

 

(2)、history对象

  • history.go() -- 前进或后退指定的页面数 history.go(num);
  • history.back() -- 后退一页
  • history.forward() -- 前进一页

 

(3)、Navigator对象

  • navigator.userAgent -- 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
  • navigator.cookieEnabled -- 返回浏览器是否支持(启用)cookie

 

9、HTML5 drag api

  • dragstart:事件主体是被拖放元素,在开始拖放被拖放元素时触发。
  • darg:事件主体是被拖放元素,在正在拖放被拖放元素时触发。
  • dragenter:事件主体是目标元素,在被拖放元素进入某元素时触发。
  • dragover:事件主体是目标元素,在被拖放在某元素内移动时触发。
  • dragleave:事件主体是目标元素,在被拖放元素移出目标元素是触发。
  • drop:事件主体是目标元素,在目标元素完全接受被拖放元素时触发。
  • dragend:事件主体是被拖放元素,在整个拖放操作结束时触发。

 

10、http2.0

首先补充一下,http和https的区别,相比于http,https是基于ssl加密的http协议。简要概括:http2.0是基于1999年发布的http1.0之后的首次更新。

关于http、html和浏览器的22个Web前端面试总结

 

  • 提升访问速度(可以对于,请求资源所需时间更少,访问速度更快,相比http1.0)
  • 允许多路复用:多路复用允许同时通过单一的HTTP/2连接发送多重请求-响应信息。改善了:在http1.1中,浏览器客户端在同一时间,针对同一域名下的请求有一定数量限制(连接数量),超过限制会被阻塞。
  • 二进制分帧:HTTP2.0会将所有的传输信息分割为更小的信息或者帧,并对他们进行二进制编码
  • 首部压缩
  • 服务器端推送

 

11、补充400和401、403状态码

(1)、400状态码:请求无效

产生原因:

  • 前端提交数据的字段名称和字段类型与后台的实体没有保持一致
  • 前端提交到后台的数据应该是json字符串类型,但是前端没有将对象JSON.stringify转化成字符串。

解决方法:

  • 对照字段的名称,保持一致性
  • 将obj对象通过JSON.stringify实现序列化

(2)、401状态码:当前请求需要用户验证

(3)、403状态码:服务器已经得到请求,但是拒绝执行

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: