前端知识之浏览器如何工作
Updated:
@[toc]
一、首先提两个问题
1. 一个页面从输入URL到页面加载完成，这个过程都发生了什么？
- 当发送一个URL 请求，不管这个页面是URL web 页面的URL 还是Web 页面上每个资源的URL ，浏览器都会开启一个线程去处理这个请求，同时在远程DNS 服务器上启动一个DNS查询，使得浏览器获得对应的ip地址
- 浏览器和远程服务器通过TCP 三次握手建立一个TCP/IP 连接。（该握手包括一个同步报文，一个同步-应答报文，一个应答报文，这三个报文在浏览器和服务器之间传递）该握手首先由客户端尝试建立通信，然后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文
- 一旦TCP/IP 连接建立，浏览器就会通过该链接向远程服务器发送http 的get 请求。远程服务器找到资源并使用http 响应返回该资源，值为200 的HTTP 响应状态表示一个正确的响应
- web 服务器提供该资源服务，客户端开始下载资源
2. 如何把一个URL 变成一个屏幕上显示的网页？
- 浏览器首先使用http 协议或者https 协议，向服务器请求页面
- 把请求回来的HTML 代码经过解析，构建成DOM 树
- 计算dom 树上的css 属性
- 最后根据css属性对元素逐个进行渲染，得到内存中的位图（点阵图，是由像素的单个点组成的，这些点可以进行不同的排列和染色构成图样）
- 一个可选的步骤是对位图进行合成，这会极大的增加后续绘制的速度
- 合成之后，再绘制到界面上
需要知道的是：
从http请求回来开始，这个过程就并非一般想象中的一步做完再做下一步，而是一条流水线
从http请求回来，就产生了流式的数据，后续的DOM 树构建，css计算，渲染，合成，绘制，都是尽可能的流式的处理前一步的产出；即不需要等到上一步完全结束，就直接开始上一步的输出，这样我们在浏览网页时，才会看到逐步出现的页面。
二、网络通讯
1. HTTP
- http协议是基于tcp协议出现的，对于tcp协议来说，tcp是一种双向的通讯信道
- http 在tcp 的基础上，规定了Request-Response 的模式。这个模式决定了通讯必定是由浏览器首先发起的
- http 协议是纯粹的文本协议，规定了使用tcp 协议来传输文本格式的一个应用层协议
请求部分：第一行被称作 request line，分为三个部分：http method（请求方法），请求路径和请求的协议和版本
1
2GET / HTTP/1.1
Host: time.geekbang.org响应部分：第一行被称作response line ，分为三个部分：协议和版本，状态码，状态文本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15HTTP/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>
<head><title>301 Moved Permanently</title></head>
<body bgcolor="white">
<center><h1>301 Moved Permanently</h1></center>
<hr><center>openresty</center>
</body>
</html>在 request line/response line 之后，是请求头/响应头，这些头由若干行组成，每行是用冒号分割的名称和值
- 在头之后，以一个空行（两个换行符）为分割，是请求体/响应体，请求体可能包含文件或者表单数据，响应体则是html 代码
2. HTTP method
- GET 浏览器通过地址栏访问页面都是get 方法
- POST 表单提交
- HEAD 跟get类似，只是返回请求头
- PUT 添加资源
- DELETE 删除资源
- CONNECT 用于https 和websocket
- OPTION 用于调试，多数线上服务器不支持
- TRACE用于调试，多数线上服务器不支持
3. HTTP Status code（状态码）和 Status text（状态文本）
response line 的状态码以及所表达的意义
- 1xx 临时回应，表示客户端请继续（通常情况下，1xx的状态码都会被浏览器 http库直接处理掉了，不会让上层知道）
- 2xx 请求成功 （网页请求成功的标志）
- 200 请求成功
- 3xx 表示请求的目标有变化，希望客户端做进一步处理
- 301 永久性重定向（实际上，301更接近一种报错，提示客户端下次别来了）
- 302 临时重定向
- 304 客户端缓存没有更新（产生这个状态的前提是：客户端本地已经有缓存的版本了，并在请求中告诉了服务端，当服务端发现没有更新的时候，就会返回一个不含body 的304状态）
- 4xx 客户端请求错误
- 403 无权限
- 404 表示请求页面不存在
- 5xx 服务端错误
- 500 服务端错误
- 503 服务端暂时性错误，可以一会再试
4. HTTP HEAD
http 头可以看做一个键值对。原则上http 也是一种数据，我们可以自由定义 http 头和值
- 请求头
- 响应头
5. HTTP Request Body
http 请求的body 主要用于提交表单场景。（一般情况下，http请求的body 是比较自由的格式，只要浏览器发送的body 服务端认可就可以了）
常见的body格式： - application/json
- application/x-www-form-urlencoded（使用html的form 标签提交时产生的html请求，默认会使用这种格式）
- multipart/form-data （文件上传）
- text/xml
三、HTTPS
不管是https 还是http2 ，基本上保持了HTTP 的设计思想，即：使用上的Request-Response 模式
1. HTTPS 的作用
- 确定请求目标服务端身份
- 保证传输的数据不会被网络中间节点窃听或篡改
2. HTTPS 如何加密
https 是通过首先和服务端建立一条 TLS 加密通道，然后使用加密通道来传输http 的内容
TLS 构建于 tcp 协议之上，实际上是对传输内容做一次加密，所以从传输内容上来看，https 和 http 没有任何区别
四、HTTP2
HTTP2是 HTTP 1.1 的升级版本
1. HTTP2 的改进
- 支持服务端推送
在客户端发送一个请求到服务端时，提前把一部分内容推送给客户端，放入缓存中，这可以避免客户端请求顺序带来的并行度不高，从而导致的性能问题 - 支持TCP 连接复用
使用同一个TCP 连接传输多个http 请求，避免了TCP 连接建立的三次握手开销，和初建TCP 连接时传输窗口小的问题
（本文来自我对极客时间winter的重学前端的知识整理，如有转载请声明，同时有不全可以参考原著）