HTTP/HTML/浏览器

说一下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协议构建的可进行假面传输、身份认证的网络协议,比http协议安全。

(3)https协议的工作原理

客户端在使用https方式与web服务器通信时有以下几个步骤:

  1. 客户使用https url 访问服务器,则要求web服务器建立ssl链接。
  2. web服务器接收客户端请求后,会将网站证书(包含公钥)返回/传输给客户端。
  3. 客户端和web服务器端开始协商SSL链接的安全等级,即加密等级。
  4. 客户端浏览器通过双方协商一致的安全等级,建立会话秘钥,然后通过网站的公钥来加密会话秘钥,并传送给网站。
  5. web服务器会通过自己的私钥解密出会话密钥。
  6. web服务器通过会话秘钥加密与客户端之间的通信。

(4)https协议的优点

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

(5)https协议的缺点

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

tcp三次握手,一句话概括

客户端与服务端都需要确保各自都可收发,因此需要三次握手。

简化三次握手:

三次握手

概括:C发起请求连接S确认,同时S也发起请求连接C确认,最后建立连接

  • 第一次握手:S确认是否可以接收C发送的报文段
  • 第二次握手:C已经确认了S可以收到自己发送的报文段,C再来确认自己是否可以接收S发送的报文段
  • 第三次握手:S确认了C收到了自己发送的报文段

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是不可靠的

WebSocket的实现和应用

(1)什么是WebSocket?

WebSocket是HTML5中的协议,支持持久连接,http协议不支持持久性连接。http1.0/1.1都不支持持久性连接,http1.1中的keep-alive能将多个http请求合并为1个

(2)WebSocket是怎样的协议,有何优点?

WebSocket是基于http协议的,或者说是借用了http协议来完成一部分握手,在握手阶段与http协议是相同的。一个WebSocket握手协议的实现,基本是2个属性: upgrade、connection

基本的请求格式如下:

1
2
3
4
5
6
7
8
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

多出了下面2个属性

1
2
Upgrade:webSocket
Connection:Upgrade

同时告诉服务器发送的是websocket

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

HTTP请求的方式,HEAD方式

head:类似于get请求,只不过返回的响应中没有具体的内容,用户获取抱头

options:允许客户端查看服务器的性能,比如说服务器支持的请求方式等

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

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

下载情况样例如下:

  1. x-oss-object-type:Normal

  2. x-oss-request-id:598D5ED34F29D01FE2925F41

  3. x-oss-storage-class:Standard

输入URL到页面加载显示完成了什么?

  1. 输入地址,发送至DNS服务器,解析获取相应的域名和web服务器的IP地址
  2. 与web服务器建立TCP连接
  3. 浏览器向web服务器发送HTTP请求
  4. 服务器响应请求,并发送对应的数据
  5. 浏览器下载数据并解析源文件,渲染页面,呈现页面
  6. 连接结束

说一下web Quality (无障碍)

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

使用alt属性:

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

有时浏览器无法显示图像,具体原因可能为:

  1. 用户关闭了图像显示
  2. 浏览器为不支持图像显示的迷你浏览器
  3. 浏览器是语言浏览器(供盲人和弱视群体使用)

若使用了alt属性,那么浏览器至少可以显示或读出有关图像的描述。

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

什么是BOM? BOM是浏览器对象。有哪些常用的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.port:返回URL中的端口部分。
  • 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(nums)
  • history.back():后退一页
  • history.foward():前进一页

(3)Navigator对象

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

说一下HTML5 drag api

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

说一下http2.0

首先补充一下http与https(http+ssl加密)区别

再简要概括:http2.0是基于1999年发布的http1.0之后的首次更新

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

http常用请求头

协议头 说明
Accept 可接受的响应内容类型(Content-Types)。
Accept-Charset 可接受的字符集
Accept-Encoding 可接受的响应内容的编码方式。
Accept-Language 可接受的响应内容语言列表。
Accept-Datetime 可接受的按照时间来表示的响应内容版本
Authorization 用于表示HTTP协议中需要认证资源的认证信息
Cache-Control 用来指定当前的请求/回复中的,是否使用缓存机制。
Connection 客户端(浏览器)想要优先使用的连接类型
Cookie 由之前服务器通过Set-Cookie(见下文)设置的一个HTTP协议Cookie

HTTP常见状态码

200 OK 请求成功。一般用于GET与POST请求

201 Created 已创建。成功请求并创建了新的资源

202 Accepted 已接受。已经接受请求,但未处理完成

203 Non-Authoritative Information 非授权信息。请求成功。但返回的meta信息不在原始的服务器,而是一个副本

204 No Content 无内容。服务器成功处理,但未返回内容。在未更新网页的情况下,可确保浏览器继续显示当前文档

205 Reset Content 重置内容。服务器处理成功,用户终端(例如:浏览器)应重置文档视图。可通过此返回码清除浏览器的表单域

206 Partial Content 部分内容。服务器成功处理了部分GET请求

300 Multiple Choices 多种选择。请求的资源可包括多个位置,相应可返回一个资源特征与地址的列表用于用户终端(例如:浏览器)选择

301 Moved Permanently 永久移动。请求的资源已被永久的移动到新URI,返回信息会包括新的URI,浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替

302 Found 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI

303 See Other 查看其它地址。与301类似。使用GET和POST请求查看

304 Not Modified 未修改。所请求的资源未修改,服务器返回此状态码时,不会返回任何资源。客户端通常会缓存访问过的资源,通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源

305 Use Proxy 使用代理。所请求的资源必须通过代理访问

306 Unused 已经被废弃的HTTP状态码

307 Temporary Redirect 临时重定向。与302类似。使用POST请求重定向

400 Bad Request 客户端请求的语法错误,服务器无法理解

401 Unauthorized 请求要求用户的身份认证

402 Payment Required 保留,将来使用

403 Forbidden 服务器理解请求客户端的请求,但是拒绝执行此请求

404 Not Found 服务器无法根据客户端的请求找到资源(网页)。通过此代码,网站设计人员可设置”您所请求的资源无法找到”的个性页面

500 Internal Server Error 服务器内部错误,无法完成请求

501 Not Implemented 服务器不支持请求的功能,无法完成请求

502 Bad Gateway 作为网关或者代理工作的服务器尝试执行请求时,从远程服务器接收到了一个无效的响应

503 Service Unavailable 由于超载或系统维护,服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中

504 Gateway Time-out 充当网关或代理的服务器,未及时从远端服务器获取请求

505 HTTP Version not supported 服务器不支持请求的HTTP协议的版本,无法完成处理

补充400和401、403状态码

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

产生原因:

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

解决办法:

  • 对照字段名称,保持一致性
  • 将对象通过JSON.stringify()进行序列化

(2)401状态码:该请求需要用户验证权限

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

fetch发送2次请求的原因

fetch发送post请求的时候,总是发送2次,第一次204,第二次才成功?

原因很简单,因为你用fetch的post请求时,导致fetch第一次发送了一个Options请求,询问服务器是否支持修改的请求头,如果服务器支持,则在第二次中发送真正的请求。

Cookie、sessionStorage、localStorage的区别

相同点:都是保存在浏览器端,且是同源的。

区别:

  • Cookie: cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。二sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下,存储容量很小只有4k左右。cookie在设置的过期时间之前一直有效。
  • sessionStorage:仅在当前浏览器窗口关闭前有效,不可持久保持。session本身就是一个会话过程,当页面不同即使是同一页面打开两次,也被视为同一次会话。
  • localStorage:始终有效除非手动删除,窗口或浏览器关闭也一直保存,因此用作持久数据。和cookie一样在所有同源窗口中都是共享的

补充cookie的作用及应用场景:

  • 保存登录态。例如将用户id存储于一个cookie内,并设置一定的过期时间。在用户下次访问该页面时不必重复登录。
  • 跟踪用户行为。例如一个天气预报网站,不必每次进入都需要选择所在地,使用cookie来使系统记住上一次访问的地区。当用户再次访问时,自动显示上次访问地区的天气。
  • 网站主题——换肤、布局等设置。利用cookie来记录用户的选项比如背景色、界面风格等

说一下web worker

在HTML页面中,如果在执行脚本时,页面的状态是不可响应的,直到脚本执行完成后,页面才变成可响应。web worker是运行在后台的js,独立于其他脚本,不会影响页面性能。并且能通过postMessage将结果回传到主线程。这样在进行复杂操作时就不会阻塞主线程了。

如何创建web worker:

  • 检测浏览器对web worker的支持性
  • 创建web worker文件(js, 回传函数等)
  • 创建web worker对象

iframe是什么?有何缺点?

定义:iframe元素会创建包含另一个文档的内联框架

提示:可以将提示文字放在<iframe></iframe>内,来提示某些不支持iframe的浏览器

缺点:

  • 会阻塞主页面的onload事件
  • 搜索引擎无法解读这种页面,不利于SEO
  • iframe和主页面共享连接池,而浏览器对相同区域有限制所以会影响性能

Doctype作用?严格模式与混杂模式如何区分?它们有何意义?

Doctype声明于文档最前面,告诉浏览器是以何种方式来渲染页面,这里有两种模式,严格模式和混杂模式。

严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。

混杂模式,向后兼容,模拟老式浏览器,防止浏览器无法兼容页面。

Cookie如何防范XSS攻击

XSS(跨站脚本攻击)是指攻击者在返回的HTML中嵌入了JavaScript脚本,为了减轻这些攻击,需要在HTTP头部配置:set-cookie:

  • httponly : 可以防止XSS,它会禁止JavaScript脚本来访问cookie
  • secure:告诉浏览器仅在请求为https的时候发送cookie

结果应为: Set-Cookie = <cookie-value>...

Cookie和session的区别

  1. cookie数据存放在客户的浏览器上,session数据放在服务器上。

  2. cookie不是很安全,别人可以分析存放在本地的cookie并进行cookie欺骗
    考虑到安全应当使用session。

  3. session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能
    考虑到减轻服务器性能方面,应当使用COOKIE。

  4. 单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。

一句话概括RESTFUL

用URL定位资源,用HTTP描述操作

click在ios上有300ms延迟,原因及如何解决?

(1)粗暴型,禁用缩放

(2)利用FastClick,其原理为:

检测到touchend事件后,立刻触发模拟click事件,并且把浏览器300ms之后真正触发的事件给阻断掉

addEventListener参数

addEventListener(event, function, useCapture)

其中,event指定事件名; function指定事件触发时执行的函数;useCapture指定事件是否在捕获或冒泡阶段执行。