文章目录
Web标准概述
Web是World Wide Web(万维网)的简称。World Wide Web由Tim Berners-Lee在1989年发明
Web标准不是某一个标准,而是由W3C和其他标准化组织制定的一系列标准的集合。主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。
Web标准介绍
HTTP
HTTP/0.9:https://www.w3.org/Protocols/HTTP/AsImplemented.html
HTTP/1.0:https://tools.ietf.org/html/rfc194
HTTP/1.1:
https://tools.ietf.org/html/rfc2068
https://tools.ietf.org/html/rfc2616
https://tools.ietf.org/html/rfc7230…https://tools.ietf.org/html/rfc7235
The Transport Layer Security (TLS) Protocol Version 1.3
https://tools.ietf.org/html/rfc8446
HTTP/2:https://tools.ietf.org/html/rfc7540
HTTP/2新增:
http2.0是基于1999年发布的http1.0之后的首次更新
更新内容:
· 提升访问速度
相比于http1.0请求资源所需时间更少,访问速度更快
· 允许多路复用
允许通过单一的HTPP2.0连接发送多重请求-响应信息
· 二进制分帧
http2.0会将所有的传输信息分割成更小的信息或者帧,并对他们进行二进制编码
· 首部压缩
· 服务器端推送
BOM
BOM(Browser Object Model,浏览器对象模型)HTML5规范中有一部分涵盖了BOM的主要内容,因为W3C希望将JavaScript在浏览器中最基础的部分标准化。
window对象:
window是BOM 的核心对象 ,它表示浏览器的一个实例。在浏览器中,window 对象有双重角色,它既是通过 JavaScript 访问浏览器窗口的一个接口,又是 ECMAScript 规定的 Global 对象。网页中所有全局对象、变量和函数都暴露在这个对象上。
location对象:
location 对象提供了当前窗口中加载的文档有关的信息,还提供了一些导航功能。 location既是 window 对象的属性,也是 document 对象的属性。通过location对象可以以编程方式操纵浏览器的导航系统。
navigator对象:
对象提供关于浏览器的信息,通常用于检测显示网页的浏览器类型。
screen对象:
保存着客户端显示器的信息。
history对象:
history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起,提供了操纵浏览器历史记录的能力。
使用go()方法可以在用户的历史记录中任意跳转,可以向后也可以向前。
DOM
DOM(Document Object Model,文档对象模型)是HTML和XML文档的编程接口。DOM表示由多层节点构成的文档,通过它开发者可以添加、删除和修改页面的各个部分。DOM现在是真正跨平台、语言无关的表示和操作网页的方式。
DOM0:不是W3C规范。
DOM1:开始是W3C规范。专注于HTML文档和XML文档。
DOM2:对DOM1增加了样式表对象模型(DOM2)
DOM3:对DOM2增加了内容模型 (DTD 、Schemas) 和文档验证。
DOM2和DOM3是按照模块化的思路来制定标准的,每个模块之间有一定关联,但分别针对某个DOM子集。
DOM Core:在DOM1核心部分的基础上,为节点增加方法和属性。
DOM Views:定义基于样式信息的不同视图。
DOM Events:定义通过事件实现DOM文档交互。
DOM Style:定义以编程方式访问和修改CSS样式的接口。
DOM Traversal and Range:新增遍历DOM文档及选择文档内容的接口。
DOM HTML:在DOM1 HTML部分的基础上,增加属性、方法和新接口。
DOM Mutation Observers:定义基于DOM变化触发回调的接口。这个模块是DOM4级模块,用于取代Mutation Events
HTTP协议在浏览器网络的位置
HTTP1.0,HTTP2.0,HTTP3.0
HTTP是应用层协议
服务端与客户端之间请求与响应
HTTP传输的细节交给了底层的传输协议,如:TCP/UDP
HTTP请求/响应报文:
// An highlighted block
<methods><request-URL><veision>
<headers>
<entity-body>
<version><status><respon-phrase>
<headers>
<entity-body>
HTTP请求类型:
GET POST PUT DELECT OPTIONS HEAD PATCH
HTTP常用状态码:
101:切换协议,如:将HTTP协议转换为socket协议
200:成功
206:返回部分内容
301:永久重定向
302:临时重定向
304:资源未修改,不返回实体内容,客户端从缓存中取
400:错误请求
403:拒绝执行
404:资源找不到
413:请求实体过大,如:服务器限制了上传的文件大小
500:服务器内部错误
502:作为网关或代理服务器时,上有服务器异常
503:作为网关或代理服务器时,上有服务器处理超时
Header分类
1)通用
Date
Connection:close
2)请求
User-Agent
Accept
3)响应
Server:Nginx
Last-Modified
4)实体
Content-Type:text/html;charset=utf-8
Content-Length:100
5)扩展(自定义)
X-powered-By
X-Cache:hit
Cookie
客户端
GET/HTTP/1.1
Cookie
服务端也可以设置cookie
HTTP/1.1 200 OK
Set-Cookie
当有一个请求时,可以通过判断服务端设置的cookie值判断是否一样
响应头里面可以有多个Set-Cookie
(cookie值如果过大,就会产生一些问题)
Cookie的安全策略
与以下因素相关
path
domain(hostonly*)
expires(max-age)
secure
httponly
samesite
XSS漏洞盗取cookie,设置httponly,可以避免cookie被获取
CSRF漏洞,设置token/samesite
Session
服务器端对应为Session,基于cookie存放用户信息(cookie特定的值作为key)
cookie的有效期为session,cookie的时间不是一个具体的时间,而是随浏览器的进程退出而消失
Content-Type
Content-Type: text/html;
一般是指网页中存在的 Content-Type,用于定义网络文件的类型和网页的编码,决定浏览器将以什么形式、什么编码读取这个文件。
作为请求首部字段时,通常出现在PUT请求中,GET 请求一般是没有的。
常见类型举例
- application/x-www-form-urlencoded:提交的数据按照 key1=val1&key2=val2 方式进行编码,同时进行了 URL 转码
POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8
title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3
- multipart/form-data :一般用于表单文件上传,包含复杂的二进制数据
- application/json:使用 JSON.parse() 解析数据即可
POST http://www.example.com HTTP/1.1
Content-Type: application/json;charset=utf-8
{"title":"test","sub":[1,2,3]}
- text/xml:逐渐被 JSON 取代,仍有使用场景,如微信公众号
POST http://www.example.com HTTP/1.1
Content-Type: text/xml
<?xml version="1.0"?>
<methodCall>
<methodName>examples.getStateName</methodName>
<params>
<param>
<value><i4>41</i4></value>
</param>
</params>
</methodCall>
使用建议
可以根据场景自定义数据格式,服务端进行对应的数据解析。比如前端进行大文件传输,可以使用gzip进行压缩,服务端进行对应的解压缩操作。
性能优化
keep-alive
- HTTP 1.0 原本不支持 Keep-Alive,后来扩充了 Connection: Keep-Alive
- HTTP 1.1 默认支持 Keep-Alive,除非显式指明 Connection: close
减少网络传输大小
通过编码的方式压缩内容,减少传输大小
// Response Headers
content-encoding: gzip
// Request Headers
accept-encoding: gzip, deflate, br
- 主要是针对文本资源,大约可减少60%;
- 文件过小不宜压缩(< 1k),图片或音频等本身就是压缩格式的文件也不宜压缩。
缓存
Status 304
服务器端资源未改变,可以直接使用客户端未过期的缓存。
根据是否需要向服务器发送请求,可以分为强缓存(不需要发送)和协商缓存(需要发送)。
强缓存
Expires
Expires
即过期时间,存在于服务端返回的响应头中,告知浏览器在这个过期时间之前可以直接从缓存里面获取数据,无需再次请求。
Cache-Control
采用过期时长来控制缓存,而非过期时间:
协商缓存
强缓存失效之后,浏览器向服务器发请求,由服务器来决定缓存是否可用,这就是协商缓存。
Last-Modified
- 浏览器接收响应报文中的
Last-Modified
字段作为最后修改时间。 - 浏览器再次请求时,会在请求头中携带
If-Modified-Since
字段,表示服务器传来的最后修改时间。 - 服务器拿到请求头中的
If-Modified-Since
的字段后,判断缓存是否可用。
ETag
服务器根据当前文件的内容,给文件生成的唯一标识。
- 浏览器接收响应报文中的
ETag
字段作为文件的唯一标识。 - 浏览器在下次请求时,将这个值作为
If-None-Match
字段的内容,发送请求报文。 - 服务器接收到
If-None-Match
后,与服务器上该资源的ETag
进行比对。
LocalStorage
最初设计目的并不是为了用于缓存。可以存储CSS、JS等文件,通过JS进行读写控制,提高缓存利用率和响应速度,减少不必要的网络传输。
ServiceWorker
Service worker是一个注册在指定源和路径下的事件驱动worker。它采用JavaScript控制关联的页面或者网站,拦截并修改访问和资源请求,细粒度地缓存资源。
本质上充当Web应用程序与浏览器之间的代理服务器,也可以在网络可用时作为浏览器和网络间的代理,旨在(除其他之外)创建有效的离线体验。
HTTP2 / HTTP3
HTTP2
二进制传输
HTTP1使用文本传输,HTTP2使用二进制传输,便于进行压缩。
多路复用
针对“队头阻塞”问题,使用数据流的方式复用TCP连接。在同一个连接里,客户端和服务器可以同时发送多个请求或回应,而不用严格按照顺序。
头部压缩
HTTP1是无状态的协议,每次请求都必须附上所有信息,很多字段都是重复的。HTTP2 引入头信息压缩机制,头信息使用gzip或compress压缩后再发送;客户端和服务器同时维护一张头信息表,只发送索引号即可。
server push
允许服务器未经请求,主动向客户端发送资源,成称为服务器推送。
HTTP3
基于 QUIC 协议(UDP)
Google 开发了基于UDP的QUIC协议,在协议层提升页面访问速度,可以实现多路复用、有序交付、超时重传等功能。
Something else
HTTP 抓包工具
- Wireshark
- Fiddler
- Firebug for Firefox
- Chrome 开发者工具
- IE8+ 自带的开发者工具
HTTP 发包工具
- telnet / curl
- Fiddler *
- Tamper for Firefox
- Postman for Chrome *
- Paw for OSX
推荐书籍
- 《图解 HTTP》
- 作者:上野宣
- 译者:于均良
- 《HTTP 权威指南》
- 作者:David Gourley / Brian Totty
- 译者: 陈涓 / 赵振平
- 《Web 性能权威指南》
- 作者:Ilya Grigorik
- 译者:李松峰