Performance API:
navigationStart
unloadStart
unloadEnd
fetchStart
domainLookupStart
domainLookupEnd
connectStart
secureConnectStart
connectEnd
requestStart
responseStart
responseEnd
domLoading
domInteractive
contentLoadedEventStart
contentLoadedEventEnd
domComplete
loadEventStart
loadEventEnd
将一个url变成屏幕上显示的网页过程
- http或https协议向服务端请求页面（以下步骤不是做完一步才做下一步，是流式处理，即不需要等到上一步完全结束，就开始处理上一步的输出）
- 将请求回来的html代码解析，构建成DOM树
- 计算DOM树上的css属性
- 最后根据css属性对元素逐个渲染，得到内存中的位图
- 一个可选步骤是对位图进行合成（能够极大地增加后续绘制的速度）
- 合成后，绘制到界面上
HTTP协议
3-1. telnet示例
telnet baidu.com 80
request
# request line: HTTP method, 请求的路径， 协议和版本
GET / HTTP/1.1
# 请求头，每行以冒号分隔名称和值
HOST: baidu.com
response
# response line: 协议和版本， HTTP状态码，状态文本
HTTP/1.1 301 Moved Permanently
# 响应头，每行以冒号分隔名称和值
Date: Fri, 25 Jan 2019 13:28:12 GMT
Content-Type: text/html
Content-Length: 182
Connection: keep-alive
Location: https://time.geekbang.org/
Strict-Transport-Security: max-age=15768000
# 响应体，html代码
<html>
<head><title>301 Moved Permanently</title></head>
<body bgcolor="white">
<center><h1>301 Moved Permanently</h1></center>
<hr><center>openresty</center>
</body>
</html>
3-2 HTTP协议格式
- request
- request line
- method
- path
- version
- head
- body
- request line
- response
- response line
- version
- status code
- status text
- head
- body
- response line
3-3 HTTP方法（method）
GET
POST
HEAD
OPTIONS
PUT
DELETE
CONNECT 多用于HTTPS和Websocket
TRACE 一般用于调试 多数线上服务都不支持
3-4 HTTP Status code(状态码) 和 Status text (状态文本)
- 1xx：消息，临时回应，表示客户端请继续
- 100 Continue
- 101 Switching Protocols
- 102 Processing
- 2xx：请求成功
- 200 OK
- 201 Created
- 202 Accepted
- 203 Non-Authoritative Information
- 204 No Content
- 205 Reset Content
- 206 Partial Content
- 207 Multi-Status
- 3xx：重定向，请求的目标有变化 希望客户端进一步处理
- 300 Multiple Choices
- 301 Moved Permanently 永久性跳转
- 302 Moved Temporarily 临时性跳转
- 303 See Other
- 304 Not Modified 跟客户端缓存一致 没有更新
- 305 Use Proxy
- 306 Switch Proxy
- 307 Temporary Redirect
- 4xx: 客户端请求错误
- 400 Bad Request
- 401 Unauthorized
- 402 Payment Required
- 403 Forbidden 无权限
- 404 Not Found 请求的页面不存在
- 405 Method Not Allowed
...
- 5xx: 服务端请求错误
- 500 Internal Server Error 服务端错误
- 501 Not Implemented
- 502 Bad Gateway
- 503 Service Unavailable 服务端暂时性错误，可以一会再试
- 504 Gateway Timeout
- 505 HTTP Version No Supported
...
3-5 HTTP Head (HTTP 头)
较常见的HTTP头：
| Request Header | 意义 |
|---|---|
| Accept | 浏览器端接受的格式 |
| Accept-Encoding | 浏览器端接收的编码方式 |
| Accept-Language | 浏览器端接受的语言，用于判断多语言 |
| Cache-Control | 控制缓存的时效性 |
| Connection | 连接方式，若是keep-alive 且服务端支持，则会复用连接 |
| Host | HTTP访问使用的域名 |
| If-Modified-Since | 上次访问的更改时间，如果服务端认为此时间后自己没有更新，则会给出304响应 |
| If-None-Match | 上次访问时使用的E-Tag，通常是页面的信息摘要（比更改时间更准确） |
| User-Agent | 客户端表示，多数浏览器的这个字段十分复杂 |
| Cookie | 客户端存储的cookie字符串 |
| Response Header | 意义 |
|---|---|
| Content-Encoding | 内容编码方式，通常是gzip |
| Content-Length | 内容的长度，有利于浏览器判断内容是否已经结束 |
| Content-Type | 内容的类型，所有请求网页的都是text/html |
| Cache-Control | 缓存控制 ，用于通知各级缓存保存的时间，如max-age=0,表示不需要缓存 |
| Connection | 连接方式，keep-alive 表示复用连接 |
| Keep-Alive | 保持连接不断时需要的一些信息，如timeout=5,max=100 |
| Last-Modified | 页面上次修改的时间 |
| ETag | 页面信息摘要，用于判断是否需要重新到服务端取回页面 |
| Expires | 过期时间，用于判断下次请求是否需要到服务端取回页面 |
| Server | 服务端软件的类型 |
| Set-Cookie | 设置cookie，可以存在多个 |
| Date | 当前服务器的日期 |
| Via | 服务端的请求链路，对一些调试场景至关重要的一个头 |
3-6 HTTP Request Body (HTTP 头)
一些常见的body格式是：（Content-Type的内容）
application/x-www-form-urlencoded # 常见于表单提交数据，key1=value1&key2=value2
multipart/form-data # 表单上传文件
application/xml # xml
application/json # json数据
text/plain # 纯文本数据
3-7 HTTPS
在HTTP协议的基础上，HTTPS和HTTP2规定了更复杂的内容，但即便保持了HTTP的设计思想，使用Request-Response模式
-
HTTPS
HTTPS有两方面作用，1是确认目标服务端身份，二是保证传输的数据不会被网络中间节点窃听或篡改 -
HTTP2
HTTP2是HTTP 1.1的升级版本
HTTP2.0最大的改进有两点，1是支持服务端推送，2是支持TCP连接复用
服务端推送能狗仔客户端发送第一个请求到服务端是，提前把一部分内容推送给客户端，放入缓存当中，这可以避免客户端请求顺序带来的并行度不高，从而导致的性能问题
TCP连接复用，则使用同一个TCP连接来传输多个HTTP请求，避免了TCP连接建立时的三次握手开销，和初建TCP连接时传输窗口小的问题
网友评论