前端之HTTP、HTML和浏览器(1)

1、http和https

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

（1）http,https基本概念

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

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协议构建的可进行加密传输、身份认证的网络协议，更安全

（3）https协议的工作原理

客户端在使用HTTPS方式与WEB服务器通信时有以下几个步骤：

* 客户使用https url访问服务器，则要求web服务器建立SSL连接

* web服务器接收到客户端请求后，会将网站的证书（证书中包含公钥）返回或者传输给客户端

* 客户端和web服务器端开始协商SSL链接的安全等级，即加密等级

* 客户端通过双方协商一致的安全等级，建立会话密钥，然后通过网站的公钥来加密会话密钥，并传送给网站

* web服务器通过自己的私钥解密出会话密钥

* web服务器通过会话密钥加密与客户端之间的通信

（4）https协议的优点

* 使用HTTPS协议可认证用户和服务器，确保数据发送到正确的客户机和服务器

* HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比HTTP协议安全，可使数据在传输过程中不被窃取、改变，确保数据的完整性

* HTTPS是现行架构下最安全的解决方案，虽然不是绝对安全，但大幅增加了中间人攻击的成本

* 比起同等HTTP网站，采用HTTPS加密的网站在搜索结果中的排名将会更高

（5）https协议的缺点

* https握手阶段比较费时，会使页面加载时间延长50%，增加10%~20%的耗电

* https缓存不如http高效，会增加数据开销

* SSL证书也需要钱，功能越强大的证书费用越高

* SSL证书需要绑定IP，不能在同一个IP上绑定多个域名，IPV4资源支持不这种消耗

2、tcp三次握手

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

第一次握手：建立连接时，客户端发送SYN包（SYN=j）到服务器，并进入SYN_SENT状态等待服务器确认；SYN：同步序列编号

第二次握手：服务器收到SYN包， 必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（SYN=k），即SYN+ACK包，此时服务器进入SYN_RECV状态

第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK（ack=k+1），此包发送完毕，客户端和服务器进入ESTABLESHED状态，完成三次握手

3、TCP和UDP的区别

（1）TCP是面向连接的；UDP是无连接的，即发送数据前不需要先建立链接

（2）TCP提供可靠的服务，通过TCP连接传输的数据无差错、不丢失、不重复，且按序到达，适合大数据量的交换；UDP尽最大努力交付，但不保证可靠

（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协议不支持持久性连接

（2）WebSocket是什么样的协议？具有什么优点？

WebSocket是基于Http协议的，或者说借用了Http协议来完成一部分握手，在握手阶段与Http是相同的。

eg：一个websocket握手协议的实现，基本是2个属性，upgrade，connection
基本请求如下：

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

多了下面两个属性：

Upgrade:webSocket
Connection:Upgrade
告诉服务器发送的是websocket
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
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属性：
<img src="person.jpg"  alt="this is a person"/>

有时候浏览器会无法显示图像。具体的原因有：
* 用户关闭了图像显示
* 浏览器是不支持图形显示的迷你浏览器
* 浏览器是语音浏览器（供盲人和弱视人群使用）
* 如果您使用了 alt 属性，那么浏览器至少可以显示或读出有关图像的描述。

8、几个实用的BOM（浏览器对象）属性对象方法

(1)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() -- 重载当前页面

(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、400和401、403状态码

(1)400状态码：请求无效

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

解决方法：
对照字段的名称，保持一致性
将obj对象通过JSON.stringify实现序列化

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

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