页面访问过程及get/post的理解——

Posted 2021-01-15 fancyl

1. Chrome查看开发者工具面板，常看的一些数据？

Elements：查找网页源代码html中的任一元素，手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。

Console：记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。

Sources：断点调试JS。

Network：从发起网页页面请求request后分析HTTP请求后得到的各个请求资源信息（包括状态，资源类型，大小，所用时间等），可以根据这个进行网络性能优化。

Timeline：记录分析在网站的生命周期内所发生的各类事件，以此可以提高网页的运行时间的性能。

Performance：记录JS,CPU执行时间细节，可以录制过程。

Application：记录网站加载的所有资源信息，包括存储数据（Local Storage,Session Storage,IndexedDB,Web SQL,Cookies）、缓存数据、字体、图片、脚本、样式表等。

Security：判断当前页面是否安全。

Audits：对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。

1. 一个web页面的访问过程？

用户在浏览器输入url，比如http://sina.com，那么接下来：

①浏览器首先会查询本机的系统来获取主机名对应的IP地址；

②若本机查询不到相应的IP地址，则会发起DNS请求，获取主机名对应的IP地址；

③使用查询到的IP地址，直接访问目标服务器。

首先说说访问目标地址的两种方式：

第一，使用目标IP地址访问。比如你可以直接在浏览器中输入新浪的IP地址：218.30.13.36来直接访问它的主机；

第二，由于IP地址都是一堆数字不方便记忆，于是有了域名这种字符型标识。DNS服务器则完成域名解析的工作，它将你访问的目标域名转换成相应的IP地址。

因此若你的电脑上不了网未必就一定是目标主机的问题，还可能是DNS服务器的故障。所以这种情况下，你能熟知几个常用的IP地址，那么在命令行使用ping一下就能知道问题是否是出现在了DNS服务器上了。比较常用的IP有：百度180.76.76.76，谷歌8.8.8.8或阿里云223.5.5.5

为什么我们不能自己建立一个www.sina.com网站，让全世界的人都访问我的这个网站呢？由以上几步可以看出，因为域名系统的存在，使得我们可以访问目标域名（www.sina.com）的时候，DNS服务器总是解析对应的IP地址（218.30.13.36）。所以若要别人都访问你的“新浪”，则需要将DNS的服务器路径指向你本机所在的IP地址，这显然得新浪愿意才行。

④浏览器发送HTTP请求。

HTTP请求由三部分组成，分别是：请求行、消息报头、请求正文。

⑤从请求消息中获得客户机想访问的主机名。

⑥从请求信息中获取客户机想要访问的web应用。（web应用程序指提供浏览器访问的程序，简称web应用）

⑦从请求信息中获取客户机想要访问的web资源。（web资源，即各种文件，图片，视频，文本等）

⑧读取相应的主机下的web应用，web资源。

⑨用读取到的web资源数据，创建一个HTTP响应。

⑩服务器回送HTTP响应。

HTTP响应也是由三个部分组成，分别是：状态行、消息报头、响应正文。

?客户浏览器解析回送的资源，并显示结果。

1. HTTP协议详解：

HTTP（Hyper Text Transfer Protocol）超文本传输协议，目的是保证浏览器与服务器之间的通信。HTTP的工作方式是客户端与服务器之间的请求-应答协议。是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。

HTTP协议的主要特点概括如下：

①支持客户/服务器模式；

②简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET,POST,PUT.DELETE。每种方法规定了客户与服务器练习的类型不同。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度快。

③灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。

④无连接：无连接的含义是限制每次连接只处理一个请求，服务器处理完客户的请求，并收到客户的应答后，即断开连接。，采用这种方式可以节省传输时间。

⑤无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆功能。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。

1. Get与Post区别？

HTTP是基于TCP/IP的关于数据如何在万维网中通讯的协议。HTTP的底层是TCP/IP，所以GET和POST的底层也是TCP/IP，也就是说GET/POST都是TCP链接，他们能做的事是一样的。他们最大的区别是GET产生一个TCP数据包，POST产生两个TCP数据包。具体来说，对于GET请求，浏览器会把http header和data一并发送出去，服务器相应200（返回数据）；而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 OK（返回数据）。据研究，在网络环境好的情况下，发一次包的时间和发两次包的时间差别基本上可以无视。而在网络差的情况下，两次包的TCP在验证数据包完整性上，有非常大的有点。另外，并不是多有的浏览器都会在post中发送两次包，Firefox就只发一次。

Get请求的参数写在url中，传输的参数安全性低，传输的数据大小有限制，不超过2KB、GET方式服务器端用request.QueryString获取变量的值。

Post方式将表单内各字段和内容放在HTML HEADER中一起传送到action属性所指定的URL地址，用户看不到这个过程、传送的数据量比较大、传输的数据安全性较高、POST方式在服务器端用Request.Form获取提交的数据。

通常，get用于从服务器获取数据，post用于向服务器提交数据。