一.从输入url到页面加载发生了什么
- 在浏览器中输入URL:
浏览器通过域名去找到对应的ip,通常会再浏览器缓存->系统缓存->路由缓存->ISPdns缓存->递归查找中进行查找 - 浏览器向服务器发送一个http请求,请求中包含:
get:表示请求的URL地址
accept & accept-encoding:表示浏览器接受什么类型的响应
user-agent:表示浏览器表示自己是谁
connection:告诉服务器不要关闭tcp连接以便为后来请求所重用
cookie:表示一些键值对,可以用来保持不同页面间请求的状态;cookie是存在客户端,每次客户端向服务端发送请求都会带上cookie - 服务器对于访问错误的URL发出重定向响应
- 浏览器跟随重定向,访问正确的URL
- 浏览器开始处理请求并返回响应
服务器接受http请求,并决定执行哪个程序处理这个请求
程序读取请求,参数和cookies,兵可能更新存储在服务器上的一些数据 - 服务器返回HTML响应
包括cache-control,content-encoding,content-type等信息 - 浏览器开始渲染HTML,形成我们平时所看到的页面
其中:浏览器会发送请求去获取HTML中的一些内嵌对象,或者发送异步的ajax请求
二.http协议概述
- http是一种能够获取HTML这样网络资源的协议,是一种client-server协议,通常请求是由浏览器这样的接收方发起的.
- 像浏览器这样的客户端发起的消息叫做requests,被服务端回应的消息叫做responses
- http协议的参与者:
客户端(user-agent):通常由浏览器来扮演,对于发起请求来说,浏览器总是作为发起一个请求的实体,而永远不是服务器
web服务端:在通信的另一端,就是一个web server来服务并提供客户端请求的文档.
proxies:在应用层上转发http消息的,就叫做proxies,它主要功能在缓存,过滤,负载均衡,对不同资源的权限控制,登录,允许存储历史信息 - http的基本性质:简单的,可扩展的,无状态有会话的,连接
- http流:当客户端想要和服务端进行信息交互时,过程为:打开一个tcp连接,发送一个http报文
- http报文:有两种http报文的类型,请求与响应
- 请求:由下面元素组成:一个http的method,上下文很明显的元素资源url,http协议的版本号,为服务器表达其他信息的可选择性的headers,对于post方法,报文的body包含发送的资源
响应:http的版本号,一个状态码,一个状态信息,http headers,包含获取资源的body
三.实战Chrome开发者工具
- chrome打开itest.info
- windows按f12打开chrome开发者工具(mac command+option+i)，并选择Network标签
- 刷新页面
- 找到itest.info这个请求，并查看结果
general:
response headers:
四.实战yslow前端性能测试
- 使用yslow测试itest.info页面,定位该页面的一些性能问题
- 访问itest.info,并且打开F12,选择yslow
- 点击run test按钮
- 结果:总评是A,在server中有3项是没有达到A的,分别是Content Delivery Network (CDN),Add Expires headers,Compress components with gzip
F:Use a Content Delivery Network(CDN),显示有17个静态组件没有在CDN上
C:Add Expires headers,设置了过期的http header
B:Compress components with gzip,有一个组件没有压缩发送,应该是要压缩发送
五.http缓存
- web缓存能够减少延迟与网络阻塞,进而减少显示某个资源所用的时间.
- 缓存就是尽量让我们从本地读取内容(这些内容往往是远程服务器上相应内容的拷贝)，从而替代从服务器上读取内容的技术..
- 缓存是指存储指定资源的一份拷贝，并在下次请求该资源时提供该拷贝的技术。。
- 缓存操作的目标:常见的http缓存只能存储get响应;缓存的关键主要包括request method和目标url
缓存控制(cache-control headers) - 完全不支持缓存:缓存中不得存储任何关于客户端请求和服务端响应的内容,每次由客户端发起的请求都会下载完整的响应内容
- 不缓存内容:在释放缓存内容前像服务端源地址发送请求以验证缓存是否有效
*私有缓存和公共缓存
public:响应可以被任何请求来源缓存;private:响应的内容只能被唯一的用户缓存,不可以被共享缓存存储 - 缓存过期:判断缓存是否过期是一个最常使用的标志是max-age.,它是距离请求发起的时间的秒数,针对一些不会发生改变的文件,可以手动设置一定的时长保证缓存有效
- 缓存验证:must-revalidate:在使用一些老的资源前强制验证状态判断其是否过期
- 缓存有效性:定期移除一部分缓存文件,叫做缓存抛弃.
- 缓存验证:缓存的响应头信息里含有"cache-control:must-revalidate",则在浏览的过程中会触发缓存验证
六.http请求
- http请求是由客户端发出的信息,用来使服务器执行动作,起始行包含三个元素:
- 一个http方法:描述要执行的动作
- 请求目标:以请求的环境为特征
- http版本:定义剩余报文的结构
- headers:有许多请求头可以使用
general headers:适用于整个报文
request headers:例如user-agent,accept-type
entity headers:例如content-length,使用与请求的body - body:请求的最后一部分是它的body,不是所有请求都有一个body,如get,head,delete等,常见有body的是post请求
body长分为single-resource bodies和multiple-resource bodies,,前者由一个单文件组成,后者由多部分body组成
七.http cookie
- http cookie是服务器发送到用户浏览器并保存在浏览器上的一块数据,它会在浏览器下一次发起请求时被携带并发送到服务器.
- cookie主要用在以下三方面:会话状态管理,个性化设置,浏览器行为跟踪
- 创建cookie
当服务器收到http请求时,可以在响应头里面增加一个setcookie头部. - set-cookie响应头部和cookie请求头部
服务器使用set-cookie响应头部向用户代理发送cookie信息,服务器告诉客户端要保存cookie信息,响应的数据里面应该包含set-cookie头,浏览器收到之后将cookie保存 - 会话期cookie
它在浏览器关闭之后会自动删除,仅在会话期间有效 - 持久cookie
它可以指定一个特定的过期时间或者有效期 - 安全和httponly类型cookie
只有在使用sll和https协议向服务器发送请求时,才能确保cookie被安全地发送到服务器 - cookie的作用域
domain和path定义了cookie的作用域,即需要发送cookie的url集合
domain规定了需要发送cookie的主机名,默认是当前的文档地址上的主机名,如果指定了domain,则一般包含子域名
path表明需要发送cookie的url路径,用%x2F做文件夹分隔符
同站cookie:允许服务器指定在跨站请求时cookie是否会被发送,从而可以阻止跨站请求伪造攻击. - 第三方cookie
cookie的域和页面的域是一样的,则是第一方cookie,如果cookie的域和页面的域不一样,则为第三方cookie