面试-网络知识

http, http2.0, TCP, UDP, url过程..

http & https

http和https的基本概念

http: 超文本传输协议 HyperText Transfer Protocol

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

  • 明文的.
  • 是无状态的

https: 超文本传输安全协议 HyperText Transfer Protocol Secure

是以安全为目标的HTTP通道,即HTTP + SSL

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

  • 具有安全性的ssl加密传输协议

  • 一般而言,http协议的端口为80,https的端口为443

  • 身份认证

谷歌曾在2014年8月份调整搜索引擎算法,并称“比起同等HTTP网站,采用HTTPS加密的网站在搜索结果中的排名将会更高”。

https缺点:

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

报文

HTTP 协议是以 ASCII 码传输,建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分:状态行、请求头、消息主体。

1
2
3
4
<method> <request-URL> <version>
<headers>

<entity-body>

HTTP 响应与 HTTP 请求相似,HTTP响应也由3个部分构成,分别是:

  • 状态行
  • 响应头(Response Header)
  • 响应正文

状态码:

200 OK 客户端请求成功

404 Not Found 请求的资源不存在,例如,输入了错误的URL

500 Internal Server Error 服务器发生不可预期的错误,导致无法完成客户端的请求。

503 Service Unavailable 服务器当前不能够处理客户端的请求,在一段时间之后,服务器可能会恢复正常。

403 Forbidden 服务器收到请求,但是拒绝提供服务。服务器通常会在响应正文中给出不提供服务的原因

400 Bad Request 由于客户端请求有语法错误,不能被服务器所理解。前端提交数据的字段名称和字段类型与后台的实体没有保持一致. json字符串类型 结果给的Obj

304 Not Modified 文件未修改,可以直接使用缓存的文件。如果客户端发送了一个带条件的GET 请求且该请求已被允许,而文档的内容(自上次访问以来或者根据请求的条件)并没有改变,则服务器应当返回这个304状态码。

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

http版本问题

http2.0 :

  • 内容安全,应为http2.0是基于https的

  • 提升访问速度,

  • 允许多路复用(改善了:在http1.1中,浏览器客户端在同一时间,针对同一域名下的请求有一定数量限制(连接数量),超过限制会被阻塞。)

  • 首部压缩

  • 二进制格式: http1.X的解析是基于文本的,http2.0将所有的传输信息分割为更小的消息和帧,并对他们采用二进制格式编码(有更多的扩展性)

TCP & UDP

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

  • TCP提供可靠的服务。无差错,不丢失,不重复,且按序到达. 适合大数据量的交换。

  • UDP尽最大努力交付,即不保证可靠交付。适合视频?

  • TCP只能是1对1的,UDP支持1对1,1对多。

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

web socket

http协议不支持持久性连接。WebSocket是HTML5中的协议,支持持久连续.

Http1.0和HTTP1.1都不支持持久性的链接,(HTTP1.1中的keep-alive,将多个http请求合并为1个)

HTTP的生命周期通过Request来界定,也就是Request一个Response,那么在Http1.0协议中,这次Http请求就结束了。

Http1.1中进行了改进,是的有一个connection:Keep-alive,也就是说,在一个Http连接中,可以发送多个Request,接收多个Response。

WebSocket是什么样的协议,具体有什么优点?

WebSocket是基于Http协议的, 在握手阶段与Http是相同的。

Cookie、sessionStorage、localStorage的区别

共同点:保存在浏览器端,并且是同源的

Cookie:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。用来保存用户登录状态(设置过期时间)。跟踪用户行为。

sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。

  • 有效期区别:

sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持

localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据

cookie: 只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭

  • 作用域区别:

sessionStorage:不同的浏览器窗口中不能共享;

localStorage:在所有同源窗口都是共享的;

cookie:也是在所有同源窗口中共享的

Cookie如何防范XSS攻击

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

httponly-这个属性可以防止XSS,它会禁止javascript脚本来访问cookie。

secure - 这个属性告诉浏览器仅在请求为https的时候发送cookie。

自己做的时候就是, sanitize npm库

HTML5新增

  • 更好的实践web语义化,增加了header,footer,nav,aside,section等语义化标签,
  • 在表单方面,为了增强表单,为input增加了color,emial,data ,range等类型
  • 在存储方面,提供了sessionStorage,localStorage,和离线存储
  • 在多媒体方面, 规定了音频和视频元素audio和vedio
  • canvas绘图,支持内联SVG。支持MathML
  • 多线程编程的web worker和websocket协议

在地址栏里输入一个URL,到这个页面呈现出来,中间会发生什么?

输入url ->

需要找到这个url域名的服务器ip ->

{ 查看缓存中是否有记录 ->缓存的查找记录为:`浏览器缓存->系统缓存->路由器缓存

缓存中没有 -> hosts文件

还没有 -> 查询DNS服务器 -> 得到服务器的ip地址 }

网络通信阶段:

{浏览器根据ip&端口号,构造一个http请求 -> 封装在一个tcp包中

建立TCP链接:

tcp包 -> 依次经过传输层,网络层,数据链路层,物理层到达服务器

服务器解析该请求 -> 返回相应的html给浏览器}

构建网页阶段:

浏览器根据这个html来构建DOM树 -> 遇到JS脚本和外部JS连接 -> 停止构建DOM树 -> 执行和下载相应的代码(阻塞) (推荐JS代码应该放在html代码的后面)

构建CSS对象模型树(CSSOM) ->和DOM树合并为渲染树

布局 -> 定各个元素的位置和尺寸

web 性能优化

性能测试 chrome f12? 第三方?

降低请求量合并资源,减少HTTP 请求数,minify / gzip 压缩,webP,lazyLoad。

加快请求速度预解析DNS,减少域名数,并行加载,CDN 分发。

缓存:HTTP 协议缓存请求,离线缓存 manifest,离线数据缓存localStorage。

渲染:JS/CSS优化,加载顺序,服务端渲染,pipeline。 react?

评论